如何在HTML5video上设置缩略图？
有没有办法在HTML5video上设置缩略图？ 玩之前我想看一些照片。 我的代码如下所示：
<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> 谢谢！
将poster="placeholder.png"添加到video标签。
<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>
那样有用吗？
如果你想要一个video的第一帧作为一个缩略图，比你可以使用
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>
注意：确保你的videotypes（例如：mp4，ogg，webm等）
您可以将video第一帧显示为缩略图 ，只需将preload="metadata"添加到video标签，然后将第一帧#t=0.5的第二帧添加到video源 ：
<video width="400" controls="controls" preload="metadata"> <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4"> </video>
这似乎是一个额外的形象在那里显示。
你可以尝试使用这个
<img src="http://img.dovov.comimage_of_video.png" alt="image" /> /* write your code for the video here */
现在使用jQuery播放video并将图像隐藏起来
$('img').click(function () { $(this).hide(); // use the parameters to play the video now.. })
我从你的例子和其他例子中find了解决scheme，并做出如下：
<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.comhttp://img.dovov.comshared/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>
