html5 видео повторно отображает изображение постера на домене

Question

Как я могу «остановить» воспроизведение видео html5 и вернуться к изображению постера?Пока не будет вызван this.play(), изображение плаката будет отображаться правильно.

Мой код:

<video loop="loop" onMouseOver="this.play();" onMouseOut="this.pause();" poster="/oceans-clip.thumb.jpg">
    <source src="/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>

Это работает, как и ожидалось, однако я хочу вернуться к изображению плаката onMouseOut, а не простоприостановка видео.Какой хороший способ сделать это?

Answer 1

Я искал решение этой проблемы и, по-видимому,

Решение Стива Лейси:

Конечно.Вы можете сделать эквивалент 'video.src = "";

работает на моем OSX 10.9 в браузерах: Safari 7.0, Firefox 26.0 и Chrome 31. Я не тестировал его нахотя для мобильных устройств.

Я тестировал его с помощью видеообъекта, созданного с помощью JS:

var object = document.createElement("video");
/// ... some setup like poster image, size, position etc. goes here...
/// now, add sources:
var sourceMP4 = document.createElement("source"); 
sourceMP4.type = "video/mp4";
sourceMP4.src = "path-to-video-file.mp4";
object.appendChild(sourceMP4);
//// same approach add ogg/ogv and webm sources

Теперь, когда я хочу остановить видео и снова показать плакат, я просто делаю:

object.pause();
object.src = "";

Но этого недостаточно, поскольку видео не сможет воспроизводиться снова.Чтобы сделать его воспроизводимым после этого момента, я удалил атрибут 'src' (оставив подобъекты 'source' как есть):

object.removeAttribute("src");

После этого он работает:

1. Воспроизвести видео
2. при остановке видео, появится плакат
3. может воспроизвести то же видео снова

Answer 2

spec исключает это:

кадр плаката не должен отображаться снова после показа кадра видео

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

Answer 3

Этот пост старый, но у меня возникла та же проблема, и я решил ее следующим образом.

onmouseout="this.load();"

Answer 4

Я использовал это, и это хорошо со мной

$('container video').hover(function () {$(this).get(0).play();}
   ,function () {$(this).get(0).load();});});

Answer 5

Вы можете использовать:

    <script type="text/javascript">
    function videostop() {
      window.location.reload()
    }
    </script>

Это не остановит ваше видео, оно перезагрузит весь документ. Будет показана «рамка для постера».

Richie

P.S. Я из Германии. Извините, если мой английский плохой. Но я думаю, мой JavaScript в порядке: -)