如何在不使用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视频缩略图？

回答

相关问题