[英]How to get HTML5 video thumbnail without using poster on safari or iOS?
我已經嵌入了 mp4 格式的 HTML5 視頻。 如何在不使用“海報”屬性的情況下獲取海報等縮略圖。 這個問題出現在 Safari 和 iOS 上。 我添加了像下面提到的代碼一樣的視頻。
<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>
在 Chrome、IE、Firefox 上，視頻的第一幀以縮略圖形式出現，但在 Safari 和 iOS 上則不然。
只需在video標簽中添加preload="metadata"並在 url src 處設置#t=0.1 ，它將獲得視頻的 0.1s 幀作為縮略圖
然而，這個方案的缺點是當你點擊播放視頻時，它總是從0.1s開始
<video preload="metadata" controls>
<source src="video.mp4#t=0.1" type="video/mp4">
</video>
如果您想在不存儲服務器端圖像的情況下執行此操作，雖然有點笨重...使用畫布記錄視頻的第一幀，然后將其覆蓋在視頻元素上。 可以使用畫布的 URL 作為海報的來源（例如video.poster = c.toDataURL(); ），但這需要正確的 CORS 設置（不確定視頻是否在您自己的服務器上，以及你可以控制它，所以采取了最安全的選擇）。 如果視頻正確編碼以進行流式傳輸，這將效果最佳（因此 MOOV 原子位於視頻的前面，否則繪制疊加層會很慢 - 請參閱此答案以獲取更多詳細信息）
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>
這對我有用：
<img src="thumbnail.png" alt="thumbnail" />
/* code for the video goes here */
現在使用 jQuery 播放視頻並將圖像隱藏為
$("img").on("click", function() {
$(this).hide();
// play the video now..
})
這有點晚了，但我們有相同的場景。 我無法使用“靜音”屬性，因為我的視頻是播客。 這就是我想出來的，我希望與未來的訪客分享。 我所做的是在 body 標簽中加載視頻，繪制一個畫布，作為 base64 檢索並作為背景圖像應用於視頻。
由於我的視頻高度應固定為 150 像素，因此我計算了縱橫比，以便無論實際視頻的高度和寬度如何，都將調整為 150 像素的高度和動態寬度。
$('body').append('<video class="checkmeload" style="position:absolute;top:-10000px" controls preload="auto" playsinline src="//src-here"><source src="//src-here" type="//videotype-here"></video>');
$('body').find('.checkmeload').on('loadeddata', function(){
var video = $('.checkmeload');
var canvas = document.createElement('canvas');
aspectratio = (video[0].videoWidth / video[0].videoHeight);
newwidth = (150 * aspectratio);
canvas.width = newwidth;
canvas.height = 150;
var context = canvas.getContext('2d');
context.drawImage(video[0], 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');
$('body').find('.checkmeload').remove();
$('#myvideo').css('background-image','url("'+dataURI +'")');
});
在不使用海報的情況下，HTML5 視頻標簽不會在移動 Safari 上顯示縮略圖
[英]HTML5 video tag not showing thumbnail on mobile Safari without using poster
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.