Question

我用它来在浏览器上安装视频播放器

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

在点击播放之前，它会从视频的最开头显示图像，但在我的大多数视频中，前几秒都是黑屏。是否可以让它在视频的特定时间获取图像，如“0:00:15”，而无需为视频创建缩略图？

Answer 1

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

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

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

Answer 2

也许这会有所帮助:(我还没有测试过它。你也可以将视频的＆＃34;海报＆＃34;属性设置为图像对象的src。试试吧。=））< / p>

<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);

        });

Source 1 Source 2

Answer 3

我只想在此添加一件事我想你忘了添加preload =＆＃34;元数据＆＃34;视频标记中的属性如下所示

join

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

Answer 4

将

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

这将在15秒后开始播放视频。

Answer 5

我是这样做的：

如果currentTime为15，则跳至0，但播放时将超过15s。

html：

<video id="video1" src="path/to/video#t=15" onplay="goToStart()"  controls ></video>

javascript：

function goToStart(){
    if (document.getElementById('video1').currentTime == 15){
    document.getElementById('video1').currentTime = 0;
    }
}

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

5 个答案: