ved*_*har 5 safari video html5 mp4 ios
我用mp4格式嵌入了HTML5视频.如何在不使用"poster"属性的情况下获取海报等缩略图.这个问题来自Safari和iOS.我添加了像下面提到的代码的视频.
<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>
在Chrome,IE,Firefox的第一帧视频作为缩略图,但不会出现在Safari和iOS上.
Ken*_*Ken 21
只需添加preload="metadata"的video标签，并设置#t=0.1为链接的src，它将让您的视频作为缩略图的0.1秒的帧
然而，这个方案的缺点是当你点击播放视频时，它总是从0.1s开始
<video preload="metadata" controls>
<source src="video.mp4#t=0.1" type="video/mp4">
</video>
如果您想在不存储服务器端图像的情况下执行此操作，尽管有点笨拙……可以使用画布记录视频的第一帧，然后将其覆盖在video元素上。可能可以使用Canvas的URL作为Poster的源（例如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叠加层和视频。overlay 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..
})
| 归档时间： |
|
| 查看次数： |
3814 次 |
| 最近记录： |