Html video html5：是否可以在特定时间显示视频的缩略图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22607572/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
video html5: Is it possible to display thumbnail from video on a specific time?
提问by Mee
I use this to have a video player on browser
我用它在浏览器上有一个视频播放器
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
</video>
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?
在点击播放之前，它从视频的最开始显示图像，但在我的大部分视频中，前几秒钟是黑屏。是否可以让它在视频的特定时间获取图像，例如“0:00:15”，而不为视频创建缩略图？
采纳答案by Dafen
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. =) )
也许这会有所帮助：（我还没有测试过。此外，您可以将视频的“海报”属性设置为图像对象的 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);
});
回答by jpostdesign
Using the posterattribute is the easiest way to go. Getting a preview image of the video from a time other than the start is exactly what its designed for.
使用海报属性是最简单的方法。从开始以外的时间获取视频的预览图像正是它的设计目的。
http://www.w3schools.com/tags/att_video_poster.asp
http://www.w3schools.com/tags/att_video_poster.asp
Trying to create a function to dynamically grab another segment of the video to use as the posterwill undoubtedly create more latency and overhead for the client, negatively affecting the UX.
尝试创建一个函数来动态抓取另一段视频用作海报无疑会为客户端带来更多延迟和开销，从而对 UX 产生负面影响。
回答by Developer
I just want to add one more thing in this I guess you forgot to add preload="metadata" attribute in video tag like the below
我只想再添加一件事，我猜你忘了在视频标签中添加 preload="metadata" 属性，如下所示
<video preload="metadata" width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
and one more thing I want to add that this will not starts video after 15 seconds, this will only take an screenshot from video and make it as a first view of the video
还有一件事我想补充一点，这不会在 15 秒后启动视频，这只会从视频中截取屏幕截图并将其作为视频的第一次观看
回答by JSnub
I did it this way:
我是这样做的：
It jumps to 0 if the currentTime is 15, but will go over the 15s mark when played
如果 currentTime 为 15 则跳转到 0，但播放时会超过 15s
html:
html：
<video id="video1" src="path/to/video#t=15" onplay="goToStart()" controls ></video>
javascript:
javascript:
function goToStart(){
if (document.getElementById('video1').currentTime == 15){
document.getElementById('video1').currentTime = 0;
}
}
回答by Chetan Jain
Add #t=15 to your video source, like below
将 #t=15 添加到您的视频源，如下所示
<video width="320" height="240" controls>
<source src="video.mp4#t=15" type="video/mp4">
</video>
This will starts video after 15 seconds.
这将在 15 秒后开始视频。
