有没有办法在 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>
谢谢！
【问题讨论】：
标签： html html5-video preloading
将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>
这行得通吗？
【讨论】：
将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>【讨论】：
#t=0.5开始。假设您想要 t=8 的缩略图，那么 vid 将从第 8 秒开始，这并不理想：)
如果您想要视频第一帧作为缩略图，则可以使用
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>
注意：确保您的视频类型（例如：mp4、ogg、webm 等）
【讨论】：
我从您的示例和其他示例中找到了解决方案并做了这个：
<video id="video1" width="470" height="264" poster="video_poster.jpg" onclick="playPause()">
<source src="video.mp4" width="470" height="264" type="video/mp4" >
<source src="video.webm" type="video/webm" >
<source src="video.ogv" type="video/ogg" >
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="470" height="264" >
<param name="movie" value="video.swf" >
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="11.0.0.0">
<!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
<param name="expressinstall" value="../../Scripts/expressInstall.swf">
<!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="video.swf" width="500" height="500">
<!--<![endif]-->
<param name="quality" value="high">
<param name="wmode" value="opaque">
<param name="swfversion" value="11.0.0.0">
<param name="expressinstall" value="../../Scripts/expressInstall.swf">
<!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
<div>
<h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
</div>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
Unfortunately Your browser is old and does not support full video experience.
</object>
</video>
<script>
var myVideo=document.getElementById("video1");
var att=document.createAttribute("poster");
if (myVideo.error) {
switch (myVideo.error.code) {
case MEDIA_ERR_NETWORK:alert("Network error - please try again later.");break;
case MEDIA_ERR_DECODE:alert("Video is broken.."); break;
case MEDIA_ERR_SRC_NOT_SUPPORTED:alert("Sorry, your browser can't play this video."); break;
}
}
else
{
function playPause()
{
if (myVideo.paused)
{
myVideo.play();
att.value="";
myVideo.setAttributeNode(att);
}
else myVideo.pause();
}
}
</script>
出色的工作。谢谢！
【讨论】：
<?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>
【讨论】：
那里似乎显示了一个额外的图像。
你可以试试这个
<img src="/images/image_of_video.png" alt="image" />
/* write your code for the video here */
现在使用 jQuery 播放视频并将图像隐藏为
$('img').click(function () {
$(this).hide();
// use the parameters to play the video now..
})
【讨论】：
$('video').play(); 播放视频即可：)
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
}
);
注意：在第一个 src（如图所示）中添加原始 youtube 链接。
2) 将 iframe 标签编辑为：
<iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s?autoplay=1" frameborder="0" allowfullscreen></iframe>
注意：将 youtube 视频 ID 复制粘贴到 iframe src 中的 embed/ 之后。
【讨论】：
<video width="400" controls="controls" preload="metadata">
<source src="https://www.youtube.com/watch?v=Ulp1Kimblg0">
</video>【讨论】：