এইচটিএমএল 5 ভিডিওতে থাম্বনেইল চিত্রটি কীভাবে সেট করবেন?

Question

এইচটিএমএল 5 ভিডিওতে থাম্বনেইল চিত্র সেট করার কোনও উপায় আছে কি? খেলার আগে কিছু ছবি দেখতে চাই। আমার কোডটি এর মতো দেখাচ্ছে:

<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 । বৈশিষ্ট্যটি বেশ ভালভাবে সমর্থিত।

— jehon

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 থেকে থাম্বনেইলটি চেয়েছিলেন তবে ভাল id ম সেকেন্ড থেকে শুরু হবে যা আদর্শ নয় এটি :)

— মার্কো

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>

দ্রষ্টব্য: আপনার ভিডিওর প্রকার সম্পর্কে নিশ্চিত করুন (উদা: এমপি 4, ওগ, ওয়েব ইত্যাদি)

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();

— সোজা

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

দ্রষ্টব্য: প্রথম এসআরসি-তে (দেখানো) আসল ইউটিউব লিঙ্কটি যুক্ত করুন।

2) আইফ্রেমে ট্যাগটি সম্পাদনা করুন:

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

নোট: এম্বেডের পরে / iframe src এ ইউটিউব ভিডিও আইডি অনুলিপি করুন।