Наведите курсор на проигрыватель HTML5, который не работает в Chrome

Я пытаюсь воспроизвести видео в формате html 5 при наведении указателя мыши. Он отлично работает в firefox и safari, только в хроме видео пропадает при наведении курсора и становится видимым только после наведения курсора на другой элемент на странице ....

Это сайт: www.manart.de

Это код:

    <div id="wrapper">
    <video id="video-example" width="880" height="495" poster="fileadmin/cover.png" loop>
    <source src="fileadmin/schiffchen.ogg.ogv" type="video/ogg"></source>
    <source src="fileadmin/schiffchen.mp4" type="video/mp4"></source>
    </video>    
    </div><!--end wrapper-->

    <script src="fileadmin/js.js"></script>

А это js:

    document.addEventListener('mouseover',hoverVideo,false);
    var vid = document.getElementById('video-example');
    function hoverVideo(e)
    {   
    if(e.target == vid)
    {
    vid.play();
    this.addEventListener('mouseout',hideVideo,false);
    }

    }

Спасибо за помощь!!!!


google-chrome html video hover
person Benedikt    schedule 10.08.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Это немного странно, но если вы удалите рамку плаката (я также убедился, что метод hideVideo был определен, чтобы избежать генерации исключения), он работает (скрипка).

Я пробовал использовать JPG вместо PNG для рамки плаката с теми же результатами (скрипка). И когда вы заменяете видео на видео со звуком, становится очевидно, что видео воспроизводится, но его не видно (fiddle).

Мне кажется, что это ошибка в Chrome, но Google не особо выдавил, когда я искал (возможно, мои термины были неправильными).

Поэтому быстрое исправление, вероятно, состоит в том, чтобы просто удалить кадр плаката, который, поскольку Chrome будет отображать первый кадр видео при его загрузке, вероятно, в любом случае довольно близок к тому, что вы ищете.

Обновление:

В качестве альтернативы вы можете использовать хак, подробно описанный в этой ветке на аналогичной проблема, которая включает динамическое добавление элементов управления в проигрыватель перед началом воспроизведения и немедленное их удаление (скрипка ). Автор подтвердил, что проблема является ошибкой в ​​Chrome, убедившись, что она не возникает в Chrome 19.

HTML:

<div id="wrapper">
    <video id="video-example" poster="http://www.manart.de/fileadmin/cover.png" width="880" height="495" loop>
      <source id='mp4'
        src="http://www.manart.de/fileadmin/schiffchen.mp4"
        type='video/mp4'>
      <source id='ogv'
        src="http://www.manart.de/fileadmin/schiffchen.ogg.ogv"
        type='video/ogg'>
    </video>    
</div>

JavaScript:

var vid = document.getElementById('video-example');
// add the listener directly to the video element
vid.addEventListener('mouseover',hoverVideo,false);

function hoverVideo(e) {   
    if (vid.getAttribute('controls') != 'true') {
        vid.setAttribute('controls', 'true');                    
    }
    vid.play();
    vid.removeAttribute('controls');
    vid.addEventListener('mouseout',hideVideo,false);
}

function hideVideo(e) {
    // do whatever you were going to do here, but omitting
    // the method completely causes an exception
    //vid.pause();   

    // clean up the listener when finished
    vid.removeEventListener('mouseout', hideVideo);
}
person net.uk.sweet    schedule 10.08.2012