视频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?

推荐答案

也许这有助于：（我没有测试过，也可以将视频的poster属性设置为图像对象的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

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