[英]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.