Показать постер после приостановки видео в HTML

у меня есть этот код

<video id="primorvid" onclick="this.paused ? this.play() : this.pause();" poster="http://primor.m-sites.co.il/wp-content/uploads/2016/08/Untitled-18.jpg" width="1903" height="564">
<source src="http://primor.m-sites.co.il/wp-content/uploads/2016/08/Primor-V.4-HD.mp4" type="video/mp4" />
</video>

видео работает, оно показывает изображение плаката, прежде чем я нажимаю на видео, и воспроизведение / пауза работает нормально.

как мне действовать дальше, если я хочу, чтобы постер снова появлялся после того, как я приостановил видео?

Большое спасибо Дэвид


html jquery video pause poster
person David Roshi    schedule 29.08.2016    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Добавьте этот JS-код:

const vid = document.querySelector('#primorvid');
let currentTime = 0;

vid.addEventListener('click', function(e) {
    if (vid.paused) {
        currentTime = vid.currentTime;
        vid.load();
    } else {
        vid.currentTime = currentTime;
    }
});

Пояснение:

const vid = document.querySelector('#primorvid');
let currentTime = 0;

Просто получаем видео и сохраняем его в vid, а также объявляем currentTime, где мы будем хранить время, когда видео было приостановлено.

Добавляем прослушиватель кликов к видео:

vid.addEventListener('click', function(e) { ... });

Если последнее состояние видео было воспроизведено (т. е. сейчас оно приостановлено), сохраните текущее время и перезагрузите его (это показывает постер и приостанавливает видео):

if (vid.paused) {
    currentTime = vid.currentTime;
    vid.load();
} else {
    vid.currentTime = currentTime;
}

В противном случае установите текущее время на то, что было раньше, и играйте снова.

Другим решением, которое не предполагает повторной буферизации видео, было бы установить элемент наложения с вашим плакатом и показать его, когда видео приостановлено, вместе с прослушивателем событий.

person fnune    schedule 29.08.2016

arrow_upward
0
arrow_downward

Вы можете попробовать это.

var vrVid = document.getElementById("primorvid");
var pauseTime = vrVid.currentTime;
vrVid.load();
vrVid.currentTime = pauseTime;
vrVid.play();

Я думаю, что это решит вашу проблему, но я не думаю, что это лучшее решение, потому что оно перезагрузит видео и буферизует его.

person kernal lora    schedule 29.08.2016