Воспроизведение видео в формате HTML5 при зависании, вызывающем плакат, чтобы не показывать, отложенное видео

Question

Хорошо, у меня странная проблема, что я надеюсь, что кто-то сможет пролить свет. Этот сайт находится здесь: http://tlt.voltronik.co.uk - Прокрутите вниз до раздела Последние клики/Самые популярные клипы.

Есть несколько видеороликов, которые, когда завис над, должны играть. Я установил плакат как подходящий кадр видео, чтобы они не всегда использовали первый кадр, поскольку он не всегда является наиболее подходящим. Вот в JS я использую для воспроизведения/паузы при наведении курсора мыши:

var vid = document.getElementsByClassName("video-hover"); 

[].forEach.call(vid, function (item) { 
    item.addEventListener('mouseover', hoverVideo, false); 
    item.addEventListener('mouseout', hideVideo, false); 
}); 

function hoverVideo(e) { 
    this.play(); 
} 

function hideVideo(e) { 
    this.pause(); 
} 

Проблема заключается в том (как вы, возможно, уже открыли для себя), что иногда плакаты показывают, и иногда они не делают. Иногда они все загружаются в обязательном порядке, и иногда ни один из них не делает. Однако большую часть времени, когда они показывают, вы наводите курсор на видео и ничего не происходит. Вам нужно переместить курсор мыши на видео, затем снова наведите курсор на видео для воспроизведения видео.

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

Я не думаю, что это связано с фоном rgba или воспроизведением стиля стиля параллакса, потому что это поведение также видно на странице «Timelapse Clips».

Может ли кто-нибудь пролить свет на то, почему это может произойти?

Answer 1

Переместите тег источника mp4 над веб-сайтом.

В первый раз, когда видео занимает какое-то время, потому что оно должно загружаться. Вы можете установить preload = "auto", чтобы избежать этой задержки.

Answer 2

У меня была та же проблема, что и у вас. Хотя это не касается проблем с плакатами, оно достигает того, о чем я думаю, на что вы надеетесь. Мне пришлось полностью удалить плакат и добавить изображение с дисплеем: ни один класс, который я добавляю при наведении курсора с помощью jQuery. Вот моя ручка: http://codepen.io/rhenwilson/pen/zIcBC.

var figure = $("figure") 
var vid = $("video"); 
var cover = $(".img-cover") 
$(figure).hover(function() 
     { $(cover).addClass("img-hide"); 
}, function() 
     { $(cover).removeClass("img-hide"); 
} 
); 

[].forEach.call(vid, function (item) { 
     item.addEventListener('mouseover', hoverVideo, false); 
     item.addEventListener('mouseout', hideVideo, false); 
}); 

function hoverVideo(e) { 
     this.play(); 
} 

function hideVideo(e) { 
     this.pause(); 
}