HTML5 वीडियो पर थंबनेल छवि कैसे सेट करें?

Question

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>

धन्यवाद!

Answer 1

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>

क्या वह काम करता है?

Comments

अधिक जानकारी के लिए, MDN वेबसाइट देखें: developer.mozilla.org/en-US/docs/Web/HTML/Element/video । विशेषता काफी अच्छी तरह से समर्थित है।

— जेहोन

Answer 2

थंबनेल के रूप में अपना वीडियो पहला फ़्रेम प्रदर्शित करें:

जोड़े 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>

Comments

इसके साथ मुद्दा यह है कि वीडियो निर्दिष्ट से शुरू होता है #t=0.5। यदि आप टी = 8 कुएं से थंबनेल चाहते हैं, तो vid 8 वें सेकंड से शुरू होगा जो आदर्श नहीं है :)

— मार्को

Answer 3

यदि आप थंबनेल के रूप में एक वीडियो पहला फ्रेम चाहते हैं, तो आप उपयोग कर सकते हैं

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 आदि)

Comments

यदि वीडियो पहले से लोड किया गया था। अन्यथा यह अभी भी IE पर एक काली पृष्ठभूमि दिखाएगा जब तक कि वीडियो ब्राउज़र द्वारा लोड नहीं किया गया था!

— हाफेनक्रानिक

Answer 4

ऐसा लगता है कि वहाँ एक अतिरिक्त छवि दिखाई जा रही है।

आप इसका उपयोग करके देख सकते हैं

<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..
})

Comments

धन्यवाद। मैंने खेलने के लिए jQuery विकल्पों का उपयोग नहीं किया, लेकिन मैं कोशिश कर सकता हूं। क्या आपके पास कोई अच्छा सुझाव है?

— इविज़न स्टीफन स्टिपिक

यह सबसे अच्छा सुझाव है, इसका उपयोग करके आप स्वचालित रूप से उस छवि को छिपा सकते हैं जिसे वहां दिखाया जा रहा था। और केवल $('video').play();:) का उपयोग करके वीडियो चलाएं

— Afzaal Ahmad Zeeshan

Answer 5

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

Answer 6

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

Answer 7

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 (दिखाया गया) में मूल यूट्यूब लिंक जोड़ें।

2) आइफ्रेम टैग को इस प्रकार संपादित करें:

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

नोट: कॉपी विडियो youtube वीडियो आईडी एम्बेड करने के बाद / iframe src में।