jquery - the - ¿Cómo establecer la imagen en miniatura en video HTML5?

preload video html5

Question

¿Hay alguna forma de establecer una imagen en miniatura en video HTML5? Quiero ver algunas fotos antes de jugar. Mi código se ve así:

<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>

¡Gracias!

Answer 1

Muestre su primer fotograma de video como miniatura:

Agregue preload="metadata" a su etiqueta de video y la segunda del primer fotograma #t=0.5 a su fuente de 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>

Answer 2

Agregue poster="placeholder.png" a la etiqueta de 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>

¿Eso funciona?

Answer 3

Encontré la solución que obtuve de su ejemplo y otros ejemplos e hice esto:

<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>

Fantástico trabajo. ¡Gracias!

Answer 4

Eso parece ser una imagen extra que se muestra allí.

Puedes intentar usar esto

<img src="/images/image_of_video.png" alt="image" />
/* write your code for the video here */

Ahora, usando jQuery, reproduce el video y oculta la imagen como

$(''img'').click(function () {
  $(this).hide();
  // use the parameters to play the video now..
})

Answer 5

Si quiere un primer cuadro de video como miniatura, entonces puede usar

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>

NOTA: asegúrese de su tipo de video (por ejemplo: mp4, ogg, webm, etc.)

Answer 6

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