Wie setze ich das Miniaturbild auf HTML5-Video?

118

Gibt es eine Möglichkeit, ein Miniaturbild für HTML5-Videos festzulegen? Ich möchte vor dem Spielen einige Bilder sehen. Mein Code sieht folgendermaßen aus:

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

Vielen Dank!

Ivijan Stefan Stipić
quelle

Antworten:

207

In , poster="placeholder.png"um den Video - Tag.

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

Funktioniert es?

Jason Brooks
quelle
1
Weitere Informationen finden Sie auf der MDN-Website: developer.mozilla.org/en-US/docs/Web/HTML/Element/video . Das Attribut wird sehr gut unterstützt.
Jehon
88

Zeigen Sie Ihren ersten Video-Frame als Miniaturbild an:

Fügen Sie preload="metadata"Ihrem Video-Tag und dem zweiten des ersten Frames #t=0.5Ihrer Videoquelle hinzu :

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.w3schools.com/html/mov_bbb.mp4#t=0.5" type="video/mp4">
</video>

David Ben Dahan
quelle
9
Das Problem dabei ist, dass das Video von der angegebenen startet #t=0.5. Sagen Sie, wenn Sie Thumbnail von t = 8 gut wollten, dann würde vid von der 8. Sekunde beginnen, was nicht ideal ist, ist es :)
Marko
23

Wenn Sie ein Video als erstes Bild als Miniaturbild wünschen, können Sie es verwenden

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>

HINWEIS: Stellen Sie sicher, dass Sie einen Videotyp haben (z. B. mp4, ogg, webm usw.).

PVCS
quelle
4
Nur wenn das Video vorinstalliert war. Andernfalls wird im IE immer noch ein schwarzer Hintergrund angezeigt, bis das Video vom Browser geladen wurde!
Hafenkranich
3

Das scheint ein zusätzliches Bild zu sein, das dort gezeigt wird.

Sie können dies versuchen

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

Spielen Sie jetzt mit jQuery das Video ab und verbergen Sie das Bild als

$('img').click(function () {
  $(this).hide();
  // use the parameters to play the video now..
})
Afzaal Ahmad Zeeshan
quelle
Danke dir. Ich habe keine jQuery-Optionen zum Spielen verwendet, aber ich kann es versuchen. Hast du gute Vorschläge?
Ivijan Stefan Stipić
Dies ist der beste Vorschlag. Auf diese Weise können Sie das dort angezeigte Bild automatisch ausblenden. Und spielen Sie das Video einfach mit $('video').play();:)
Afzaal Ahmad Zeeshan
3
<?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>
entmutigen
quelle
-1

<video width="400" controls="controls" preload="metadata">
  <source src="https://www.youtube.com/watch?v=Ulp1Kimblg0">
</video>

Hardik Shah
quelle
-1

1) Fügen Sie die folgende Abfrage hinzu:

$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
 }
);

hinweis: füge im ersten src (gezeigt) den originalen youtube link hinzu.

2) Bearbeiten Sie das Iframe-Tag wie folgt:

<iframe width="1280" height="720" src="https://www.youtube.com/embed/nfQHF87vY0s?autoplay=1" frameborder="0" allowfullscreen></iframe>

Hinweis: Kopieren Fügen Sie die YouTube-Video-ID nach dem Einbetten / in den Iframe-Quellcode ein.

ashwinrishipj
quelle