如何在野生动物园或iOS上不使用海报的情况下获取HTML5视频缩略图? [英] How to get HTML5 video thumbnail without using poster on safari or iOS?
问题描述
我已经嵌入了mp4格式的HTML5视频.如何在不使用海报"属性的情况下获得海报之类的缩略图.这个问题出现在Safari和iOS上.我已经添加了视频，如下面提到的代码.
I have embedded HTML5 video with mp4 format. How to get thumbnail image like poster without using "poster" attribute. This problem coming on Safari and iOS. I have added video like below mentioned code.
<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>
在Chrome，IE，Firefox上，视频的第一帧作为缩略图显示，但在Safari和iOS中不显示.
On Chrome, IE, Firefox first frame of video coming as thumbnail image, but not coming on Safari and iOS.
推荐答案
如果您希望在不存储服务器端图像的情况下执行此操作，尽管有点笨拙...使用画布记录视频的第一帧是可能的然后将其覆盖在video元素上可能可以使用Canvas的URL作为Poster的源(例如video.poster = c.toDataURL();)，但是这需要正确的CORS设置(不确定视频是否在您自己的服务器上，以及是否可以控制它)采取了最安全的选择).如果对视频进行了正确的编码以进行流传输，那么这将是最好的选择(因此MOOV原子位于视频的前面，否则绘制叠加层会很慢-请参见
If you want to do this without storing server side images it is possible, though a bit clunky... uses a canvas to record the first frame of the video and then overlay that over the video element. It may be possible to use the URL for the Canvas as a source for the Poster (eg video.poster = c.toDataURL();) but that requires correct CORS setup (not sure if the video was on your own server, and if you have control over that, so took the safest option). This will work best if video is correctly encoded for streaming (so MOOV atom is at the front of the video, otherwise it will be slow to draw the overlay - see this answer for more detail)
HEAD包含视频和叠加层的样式(您需要调整大小和位置以适合您的应用程序)
The HEAD contains styling for the video and the overlay (you will need to adjust sizing and position to suit your application)
<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处理程序，可以隐藏覆盖并开始播放视频
In the BODY you will need the div for the overlay and the video. The overlay div has an onclick handler to hide the overlay and start the video playing
<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>
最后，您将需要以下代码来加载视频，搜索第一帧并将视觉内容加载到画布中，然后将其插入叠加层中
Finally you will need code that will load the video, seek to the first frame and load the visual into a canvas that you then insert into the overlay
<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>
这篇关于如何在野生动物园或iOS上不使用海报的情况下获取HTML5视频缩略图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
