video html5:是否可以在特定时间显示视频的缩略图? [英] video html5: Is it possible to display thumbnail from video on a specific time?

问题描述

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

I use this to have a video player on browser

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

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

Before clicking play, it display an image from the very beginning of the video, but in most of my video, first several seconds is black screen. Is it possible to make it get image at a specific time of the video, like "0:00:15", without creating thumbnail for the video?

推荐答案

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

Maybe this helps: (I have not tested it. Also you might be able to set the "poster" attribute of the video to the src of the image object. Just try it. =) )

<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

这篇关于video html5:是否可以在特定时间显示视频的缩略图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！