動態使用第一幀作爲HTML5視頻中的海報？

Question

我想知道是否有任何直接的方式來實現這種效果，而不需要後端代碼來提取框架，將其保存爲jpg和數據庫它的某個地方。

當視頻加載時，視頻的第一幀剛剛顯示爲海報會產生很大的幫助（這隻有在瀏覽器能夠明顯播放視頻時才起作用，這可能與如何有所不同poster傳統的作品，但是這不是一個問題。

Answer 1

有一個Popcorn.js插件叫做Popcorn.capture這將允許您從您的HTML5視頻的任意幀創建海報。

有一個由強加的限制瀏覽器禁止讀取跨域請求的資源的像素數據（使用畫布API記錄a的當前值）幀）。源視頻必須與腳本和html頁面託管在相同的域上，該頁面要求此方法起作用。

創建一個使用這個插件海報的代碼非常簡單：

// This block of code must be run _after_ the DOM is ready 
// This will capture the frame at the 10th second and create a poster 
var video = Popcorn("#video-id"); 

// Once the video has loaded into memory, we can capture the poster 
video.listen("canplayall", function() { 

    this.currentTime(10).capture(); 

}); 

Answer 2

您可以將視頻元素上設置preload='auto'自動加載視頻的第一幀。

Answer 3

我最近爲一個最近在桌面和移動設備上工作的項目做了這個。訣竅是讓它在iPhone上運行。

設置preload=metadata適用於桌面和Android設備，但不適用於iPhone。

對於iPhone手機，我必須將其設置爲autoplay，以便海報圖像在初始加載時自動顯示。 iPhone會阻止視頻自動播放，但海報圖像顯示爲結果。

我不得不使用帕萬的答案在這裏找到iPhone的支票。 Detect iPhone Browser。然後根據設備使用合適的視頻標籤，無論是否帶有autoplay。

var agent = navigator.userAgent; 
var isIphone = ((agent.indexOf('iPhone') != -1) || (agent.indexOf('iPod') != -1)) ; 

$videoTag = ""; 
if(isIphone()) { 
    $videoTag = '<video controls autoplay preload="metadata">'; 
} else { 
    $videoTag = '<video controls preload="metadata">'; 
}