在懸停播放HTML5視頻導致海報不顯示，視頻延遲

好的，在這裏有一個奇怪的問題，我希望有人能夠揭露一些光。有問題的網站在這裏：http://tlt.voltronik.co.uk - 請滾動到最新的Clip/Most Popular Clip剪輯。在懸停播放HTML5視頻導致海報不顯示，視頻延遲

有幾個視頻在盤旋時應該播放。我已將海報設置爲視頻的相關框架，以便它們不會始終使用第一幀，因爲它並不總是最合適的。下面是我使用的播放/暫停上懸停的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'頁面上也可見。

任何人都可以闡明爲什麼這可能會發生？

來源

2014-01-07 Jack

BTW，第3受歡迎的剪輯的海報框架不存在http://tlt.voltronik.co.uk/wp-content/uploads/2014/01/Sunset5_4K_UltraHD_Timelapse-266x150.jpeg – acoiro

謝謝爲此，修復。 – Jack

對此有輕微更新 - 我讀過一個png可以在jpeg上工作，即使文件大小會大得多。我已經嘗試過這一點，這沒有什麼區別。儘管它們在那裏，但它所做的並不是加載海報圖像。我很困難。還有其他建議嗎？ – Jack

將mp4 source標籤移到webm上方。

視頻第一次需要片刻播放，因爲它必須加載。你可以設置preload =「auto」來避免這種延遲。

來源

2014-01-07 09:10:01 acoiro

謝謝，但當我這樣做時，Firefox嚇壞了，說它不能播放視頻。首先在源列表中列出WebM，所有瀏覽器都會表現出來。有想法該怎麼解決這個嗎？ – Jack

將視頻設置爲preload =「auto」已經解決了延遲的問題（我認爲...很難說它的表現如此間歇）。然而，有時海報沒有出現的問題仍然存在。在這裏看截圖：http://cl.ly/image/2f362p3P3o1K – Jack

其他人有什麼想法？請在我上面的評論中看到我的屏幕截圖。 – Jack

我遇到了同樣的問題。雖然這不能解決海報問題，但它實現了我認爲你所期望的。我必須完全刪除海報，並添加一個帶有display：none類的圖像，我使用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(); 
}

來源

2014-06-21 22:28:01 user3763713

在懸停播放HTML5視頻導致海報不顯示，視頻延遲

回答

相關問題