如何在不使用Safari或iOS上的海報的情況下獲取HTML5視頻縮略圖？

我已經嵌入HTML5視頻與MP4格式。如何在不使用「海報」屬性的情況下獲得像海報一樣的縮略圖圖像。這個問題來自Safari和iOS。我添加了像下面提到的代碼的視頻。如何在不使用Safari或iOS上的海報的情況下獲取HTML5視頻縮略圖？

<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>

在Chrome，IE，火狐視頻的第一幀來作爲縮略圖圖像，但在Safari和iOS不來了。

來源

2016-12-21 vedankita kumbhar

可以添加你的代碼？ –

有一個自動播放的解決方案，但它只能在IOS 10+工作 – Hokusai

來源：How to set the thumbnail image on HTML5 video?

這爲我工作：

<img src="thumbnail.png" alt="thumbnail" /> 
/* code for the video goes here */

現在使用jQuery播放視頻和隱藏圖像

$("img").on("click", function() { 
    $(this).hide(); 
    // play the video now.. 
})

來源

2016-12-21 05:45:29

謝謝，但我不想使用單獨的圖像或海報的視頻，因爲視頻動態和我不想通過添加單獨的圖像返工。你有任何想法將第一幀視頻集作爲海報。 –

你介意使用js插件嗎？ –

不可以使用哪個插件？ –

如果你想這樣做，而不存儲服務器側的圖像是可能的，雖然有點笨重......使用畫布來記錄視頻的第一幀，然後覆蓋，超過了視頻元素。它可能會使用的URL畫布作爲海報（如video.poster = c.toDataURL();）的來源，但需要正確的CORS設置（不知道，如果視頻是你自己的服務器上，如果你有控制這一點，所以採取了最安全的選擇）。這將工作最好的，如果視頻是正確編碼的流（所以MOOV原子是在視頻的前面，否則將是緩慢的繪製覆蓋 - 見this answer更多細節）

的HEAD包含造型爲視頻和覆蓋（你將需要調整大小和位置，以滿足您的應用程序）

<head> 
    <style> 
    video_box{ 
     float:left; 
    } 
    #video_overlays { 
     position:absolute; 
     float:left; 
     width:640px; 
     min-height:264px; 
     background-color: #000000; 
     z-index:300000; 
    } 
    </style> 
</head>

在BODY您需要div的疊加和視頻。疊加div有一個onclick處理程序來隱藏覆蓋並啓動視頻播放

<div id="video_box"> 
    <div id="video_overlays" onclick="this.style.display='none';document.getElementById('video').play()"></div> 

    <video id="video" controls width="640" height="264"> 
     <source src="BigBuck.mp4" type='video/mp4'> 
    </video> 

    </div> 
</div>

最後，你需要的代碼，將加載視頻，尋求到第一幀和視覺加載到一個畫布，你再插入到覆蓋

<script> 

function generateOverlay() { 
    video.removeEventListener('seeked',generateOverlay);/tidy up the event handler so it doesn't redraw the overlay every time the user manually seeks the video 
    var c = document.createElement("canvas"); 
    var ctx = c.getContext("2d"); 
    c.width = 640; 
    c.height = 264; 
    ctx.drawImage(video, 0, 0, 640, 264); // take the content of the video frame and place in canvas 
    overlay.appendChild(c); // insert canvas into the overlay div 
} 

    // identify the video and the overlay 
    var video = document.getElementById("video"); 
    var overlay = document.getElementById("video_overlays"); 

    // add a handler that when the metadata for the video is loaded it then seeks to the first frame 
    video.addEventListener('loadeddata', function() { 
     this.currentTime = 0; 
    }, false); 

    // add a handler that when correctly seeked, it generated the overlay 
    video.addEventListener('seeked', function() { 
    // now video has seeked and current frames will show 
    // at the time as we expect 
     generateOverlay(); 
    }, false); 

    // load the video, which will trigger the event handlers in turn 
    video.load(); 

</script>

來源

2017-04-05 21:45:29 Offbeatmammal

如何在不使用Safari或iOS上的海報的情況下獲取HTML5視頻縮略圖？

回答

相關問題