web-dev-qa-db-ja.com

HTML5ビデオにサムネイル画像を設定する方法は？

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>

ありがとう！

htmlhtml5html5-videopreloading
85
Ivijan Stefan Stipić

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>

それは動作しますか？

154
Jason Brooks

ビデオの最初のフレームをサムネイルとして表示する：

preload="metadata"をvideoタグに追加し、最初のフレームの#t=0.5をvideo sourceに追加します。

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

ビデオの最初のフレームをサムネイルとして使用する場合は、使用できます

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など）

15
PVCS

あなたの例と他の例から得た解決策を見つけて、これを作りました：

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

素晴らしい仕事。ありがとう！

4
Ivijan Stefan Stipić

それはそこに表示されている余分な画像のようです。

あなたはこれを使って試すことができます

<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..
})
3
Afzaal Ahmad Zeeshan
<?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>
3
debasish
<video width="400" controls="controls" preload="metadata">
  <source src="https://www.youtube.com/watch?v=Ulp1Kimblg0">
</video>
0
Hardik Shah

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 /の後に貼り付けます。

0
ashwinrishipj