Html 如何在 HTML5 视频上设置缩略图？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20075875/
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
How to set the thumbnail image on HTML5 video?
提问by Ivijan Stefan Stipi?
Is there a way to set thumbnail image on HTML5 video? I want to see some pictures before play. My code looks like this:
有没有办法在 HTML5 视频上设置缩略图？我想在玩之前看一些照片。我的代码如下所示：
<video width="470" height="255" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<object data="video.mp4" width="470" height="255">
<embed src="video.swf" width="470" height="255">
</object>
</video>
Thanks!
谢谢！
回答by Jason Brooks
Add poster="placeholder.png"to the video tag.
添加poster="placeholder.png"到视频标签。
<video width="470" height="255" poster="placeholder.png" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<source src="video.webm" type="video/webm">
<object data="video.mp4" width="470" height="255">
<embed src="video.swf" width="470" height="255">
</object>
</video>
Does that work?
那样有用吗？
回答by David Ben Dahan
Display Your Video First Frame as Thumbnail:
将视频第一帧显示为缩略图：
Add preload="metadata"to your video tagand the second of the first frame #t=0.5to your video source:
添加 preload="metadata"到您的视频标签和第一帧的第二个#t=0.5到您的视频源：
<video width="400" controls="controls" preload="metadata">
<source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>回答by PVCS
If you want a video first frame as a thumbnail, than you can use
如果您想要视频的第一帧作为缩略图，则可以使用
Add #t=0.1 to your video source, like below
<video width="320" height="240" controls>
<source src="video.mp4#t=0.1" type="video/mp4">
</video>
NOTE:make sure about your video type(ex: mp4, ogg, webm etc)
注意：确保您的视频类型（例如：mp4、ogg、webm 等）
回答by Afzaal Ahmad Zeeshan
That seems to be an extra image being shown there.
那似乎是在那里显示的额外图像。
You can try using this
你可以尝试使用这个
<img src="/images/image_of_video.png" alt="image" />
/* write your code for the video here */
Now using jQuery play the video and hide the image as
现在使用 jQuery 播放视频并将图像隐藏为
$('img').click(function () {
$(this).hide();
// use the parameters to play the video now..
})
回答by debasish
<?php
$thumbs_dir = 'E:/xampp/htdocs/uploads/thumbs/';
$videos = array();
if (isset($_POST["name"])) {
if (!preg_match('/data:([^;]*);base64,(.*)/', $_POST['data'], $matches)) {
die("error");
}
$data = $matches[2];
$data = str_replace(' ', '+', $data);
$data = base64_decode($data);
$file = 'text.jpg';
$dataname = file_put_contents($thumbs_dir . $file, $data);
}
?>
//jscode
<script type="text/javascript">
var videos = <?= json_encode($videos); ?>;
var video = document.getElementById('video');
video.addEventListener('canplay', function () {
this.currentTime = this.duration / 2;
}, false);
var seek = true;
video.addEventListener('seeked', function () {
if (seek) {
getThumb();
}
}, false);
function getThumb() {
seek = false;
var filename = video.src;
var w = video.videoWidth;//video.videoWidth * scaleFactor;
var h = video.videoHeight;//video.videoHeight * scaleFactor;
var canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
var ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, w, h);
var data = canvas.toDataURL("image/jpg");
var xmlhttp = new XMLHttpRequest;
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
}
}
xmlhttp.open("POST", location.href, true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send('name=' + encodeURIComponent(filename) + '&data=' + data);
}
function failed(e) {
// video playback failed - show a message saying why
switch (e.target.error.code) {
case e.target.error.MEDIA_ERR_ABORTED:
console.log('You aborted the video playback.');
break;
case e.target.error.MEDIA_ERR_NETWORK:
console.log('A network error caused the video download to fail part-way.');
break;
case e.target.error.MEDIA_ERR_DECODE:
console.log('The video playback was aborted due to a corruption problem or because the video used features your browser did not support.');
break;
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
console.log('The video could not be loaded, either because the server or network failed or because the format is not supported.');
break;
default:
console.log('An unknown error occurred.');
break;
}
}
</script>
//Html
<div>
<video id="video" src="1499752288.mp4" autoplay="true" onerror="failed(event)" controls="controls" preload="none"></video>
</div>
回答by Hardik Shah
<video width="400" controls="controls" preload="metadata">
<source src="https://www.youtube.com/watch?v=Ulp1Kimblg0">
</video>回答by ashwinrishipj
1) add the below jquery:
1）添加以下jquery：
$thumbnail.on('click', function(e){
e.preventDefault();
src = src+'&autoplay=1'; // src: the original URL for embedding
$videoContainer.empty().append( $iframe.clone().attr({'src': src}) ); // $iframe: the original iframe for embedding
}
);
note: in the first src (shown) add the original youtube link.
注意：在第一个 src（显示）中添加原始 youtube 链接。
2) edit the iframe tag as:
2) 将 iframe 标签编辑为：
<iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s?autoplay=1" frameborder="0" allowfullscreen></iframe>
note: copy paste the youtube video id after the embed/ in the iframe src.
注意：在 iframe src 中的 embed/ 之后复制粘贴 youtube 视频 ID。
