视频html5:是否可以在特定时间显示视频缩略图？

Question

我用这个在浏览器上有一个视频播放器

<video width="320" height="240" controls>
  <source src="video.mp4" type="video/mp4">
</video>

在点击播放之前,它会从视频的最开始显示图像,但在我的大部分视频中,前几秒都是黑屏.是否可以让它在视频的特定时间获取图像,如"0:00:15",而不创建视频缩略图？

Answer 1

使用poster属性是最简单的方法.从开头以外的时间获取视频的预览图像正是它的设计目标.

http://www.w3schools.com/tags/att_video_poster.asp

尝试创建一个动态抓取另一部分视频用作海报的功能无疑会为客户端带来更多的延迟和开销,从而对UX产生负面影响.

Answer 2

也许这会有所帮助:(我还没有测试过它.你也可以将视频的"海报"属性设置为图像对象的src.试试吧.=))

<video width="320" height="240" controls id="video">
    <source src="video.mp4" type="video/mp4">
</video>

$(document).ready(function() {


            var time = 15;
            var scale = 1;

            var video_obj = null;

            document.getElementById('video').addEventListener('loadedmetadata', function() {
                 this.currentTime = time;
                 video_obj = this;

            }, false);

            document.getElementById('video').addEventListener('loadeddata', function() {
                 var video = document.getElementById('video');

                 var canvas = document.createElement("canvas");
                 canvas.width = video.videoWidth * scale;
                 canvas.height = video.videoHeight * scale;
                 canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);

                 var img = document.createElement("img");
                img.src = canvas.toDataURL();
                $('#thumbnail').append(img);

                video_obj.currentTime = 0;

            }, false);

        });

来源1 来源2

Answer 3

我只想在此添加一件事，我想您忘了在视频标签中添加preload =“ metadata”属性，如下所示

<video preload="metadata" width="320" height="240" controls>
      <source src="video.mp4#t=15" type="video/mp4">
    </video>

还有一件我想补充的事情，那就是15秒后将不会启动视频，这只会从视频中截取屏幕截图，并将其作为视频的第一个视图