<audio> এবং  <video> এলিমেন্ট দুইটির সাহায্যে HTML5 এ বিল্ট-ইন মাল্টিমিডিয়া সাপোর্ট শুরু হয়েছে। অর্থাৎ, আপনি আপনার HTML ডকুমেন্টে (সোজা কথায় ওয়েবপেজে বা ওয়েবসাইটে) সহজেই মিডিয়া তথা ভিডিও এবং অডিও যুক্ত করতে পারবেন অতিরিক্ত ফ্ল্যাশ বা সিলভারলাইট প্লাগ-ইনের প্রয়োজনীয়তা ছাড়াই।

মিডিয়া এমবেড করা

আপনার ওয়েব পেজ তথা HTML ডকুমেন্টে মিডিয়া যুক্ত করা সহজ:

<video src="https://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>
  Your browser does not support the <code>video</code> element.
</video>

<audio src="/test/audio.ogg">
<p>Your browser does not support the audio element.</p>
</audio>

src এট্রিবিউটটি অডিও ফাইলটির URL (ওয়েব অ্যাড্রেস) অথবা যেকোন ফাইলের পাথও (যেমন, C:\Users\audio.ogg) হতে পারে।

<audio src="audio.ogg" controls autoplay loop>
<p>Your browser does not support the audio element </p>
</audio>

এই কোডের উদাহরণটি HTML5 <audio> এলিমেন্ট ব্যবহার করে:

• controls : ওয়েবপেজে সাধারণ HTML5 কন্ট্রোলগুলো প্রদর্শন করে
• autoplay : স্বয়ংক্রিয়ভাবে মিডিয়া প্লে করে
• loop : স্বয়ংক্রিয়ভাবে অডিও পুনরাবৃত্তি (লুপ/রিপিট) করতে থাকে

<audio src="audio.mp3" preload="auto" controls></audio>

preload এট্রিবিউটটি বড় অডিও ফাইলের জন্য সাধারণত ব্যবহার করা হয়। এটি তিনটি ভ্যালু নিতে পারে।

• "none" হলে ফাইল বাফার হবে না
• "auto" হলে স্বয়ংক্রিয়ভাবে বাফার হবে
• "metadata" কেবলমাত্র ফাইলের মেটাডাটা বাফার করবে

(বাফার মানে ইন্টারনেট সার্ভার থেকে ব্যবহারকারীর কম্পিউটারে কোন ফাইল সাময়িকভাবে জমা হওয়া, স্ট্রিমিংয়ের জন্য বেশি ব্যবহৃত হয়।)

একাধিক ব্রাউজারের জন্য একাধিক ফরম্যাটের একাধিক ফরম্যাটের ফাইল প্রদানের সুবিধার জন্য <source> এলিমেন্টটি ব্যবহার করা যেতে পারে। উদাহরণস্বরুপ:

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

এতে ব্রাউজারে ogg ফরম্যাটের ফাইল প্লে হবে, যদি OGG সমর্থন না করে, তবে MP4 প্লে হবে। বিভিন্ন ব্রাউজারে সমর্থিত অডিও ও ভিডিও এলিমেন্টের ফরম্যাট এর তালিকা দেখতে পারেন।

কোন কোডেক ব্যবহার করতে হবে, তা নির্ধারণ করে দিয়ে আপনি ব্রাউজারকে আরও বুদ্ধিমানের মত সিদ্ধান্ত নিতে সাহায্য করতে পারেন।

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Your browser does not support the <code>video</code> element.
</video>

এখানে, আমরা উল্লেখ করে দিচ্ছি যে, ভিডিওটি Dirac এবং Speex কোডেক দুইটি ব্যবহার করছে। যদি ব্রাউজার Ogg সাপোর্ট করে, কিন্তু উল্লেখিত কোডেকগুলোকে না করে, তবে ভিডিওটি লোড হবে না।

যদি type এট্রিবিউটটি উল্লেখ না করা হয়, মিডিয়ার ধরণ সার্ভারে জিজ্ঞেস করা হয় এবং ব্রাউজার পরীক্ষা করে দেখে যে ওই ধরণের ফাইল হ্যান্ডেল করতে পারবে কিনা; যদি তা রেন্ডার করা না যায়, তবে পরবর্তী source পরীক্ষা করা হয়। যদি কোন source এলিমেন্টই ব্যবহার করা সম্ভব না হয়, একটি error ইভেন্ট video এলিমেন্টের জন্য দেয়া হয়। type এট্রিবিউটটি উল্লেখ করা হলে, ব্রাউজার প্লে করতে সক্ষম, এমন type এর তালিকার সঙ্গে এটিকে মিলিয়ে হয়, এবং যদি তা ব্রাউজারের কাছে পরিচিত না হয়, সার্ভারের কাছে কোনকিছু জিজ্ঞাসা না করেই পরবর্তী source পরীক্ষা করা হয়।

মিডিয়া প্লেব্যাকের সঙ্গে জড়িত সকল ইভেন্টের জন্য Media events তালিকাটি দেখতে পারেন। বিভিন্ন ব্রাউজারে সমর্থিত মিডিয়া ফরম্যাটের তালিকার জন্য দেখুন, অডিও এবং ভিডিও এলিমেন্টের সমর্থিত মিডিয়া ফরম্যাট।

মিডিয়া প্লেব্যাক নিয়ন্ত্রণ করা

নতুন এলিমেন্টগুলো ব্যবহার করে আপনার ডকুমেন্টে মিডিয়া এমবেড করা হয়ে গেলে, আপনি জাভাস্ক্রিপ্ট কোড থেকে তা নিয়ন্ত্রণ করতে পারবেন। উদাহরণস্বরুপ, প্লেব্যাক শুরু করতে চাইলে আপনি নিচের কাজটি করতে পারেন।

var v = document.getElementsByTagName("video")[0];
v.play();

প্রথম লাইন ডকুমেন্ট থেকে প্রথম ভিডিও এলিমেন্টটি নির্বাচিত করে এবং দ্বিতীয়টি এলিমেন্টের nsIDOMHTMLMediaElement ইন্টারফেসে (যা মিডিয়া এলিমেন্ট ইমপ্লিমেন্ট করতে ব্যবহার করা হয়) নির্ধারিত play() মেথড কল করে।

একটি HTML5 অডিও প্লেয়ার নিয়ন্ত্রণ করে প্লে, পজ, ভলিউম বাড়ানো-কমানোর মত কাজগুলো সহজেই জাভাস্ক্রিপ্টে করা যায়:

<audio id="demo" src="audio.mp3"></audio>
<div>
  <button onclick="document.getElementById('demo').play()">Play the Audio</button>
  <button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
  <button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
  <button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div> 

মিডিয়া ডাউনলোড বন্ধ করা

pause() মেথড কল করলে যদিও মিডিয়ার প্লেব্যাক বন্ধ হয়ে যায়, ব্রাউজার কিন্তু ঠিকই ব্যবহারকারীর ব্যান্ডউইথ অপচয় করে ফাইল বাফারিংয়ের কাজটুকু সারতে থাকে।

ডাউনলোড একবারেই বন্ধ করার জন্য এখানে ছোট্ট একটা টিপ:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src = ""; 

মিডিয়া এলিমেন্টের src এট্রিবিউটকে একটি শুণ্য বা খালি স্ট্রিংয়ে সেট করার মাধ্যমে আপনি এলিমেন্টটি মিডিয়া ডিকোডারের কাজ বন্ধ করে দেন। যার ফলে নেটওয়ার্ক থেকে ডাউনলোডও বন্ধ হয়ে যায়।

মিডিয়া চালানোর সময় সামনে-পেছনে নেয়া

কোথা থেকে প্লে করা শুরু হবে তা মিডিয়া এলিমেন্টের সাহায্যে নির্ধারণ করা যায়। এলিমেন্টের currentTime প্রোপার্টি পরিবর্তন করে কাজটি করা সম্ভব; এলিমেন্টটির প্রোপার্টি সংক্রান্ত আরও বিস্তারিত তথ্যের জন্য দেখুন HTMLMediaElement। আপনি যে মুহুর্ত থেকে প্লেব্যাক শুরু করতে চান, সেই সময়টি সেকেন্ডে সেট করে দিন।

You can use the element's seekable property to determine the ranges of the media that are currently available for seeking to. This returns a TimeRanges object listing the ranges of times that you can seek to.

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();  // Returns the starting time (in seconds)
mediaElement.seekable.end();    // Returns the ending time (in seconds)
mediaElement.currentTime = 122; // Seek to 122 seconds
mediaElement.played.end();      // Returns the number of seconds the browser has played

প্লেব্যাক রেঞ্জ নির্ধারণ

<audio> বা <video> element, you can optionally include additional information to specify the portion of the media to play. To do this, append a hash mark ("#") followed by the media fragment description.

A time range is specified using the syntax:

#t=[starttime][,endtime]

The time can be specified as a number of seconds (as a floating-point value) or as an hours/minutes/seconds time separated with colons (such as 2:05:01 for 2 hours, 5 minutes, and 1 second).

কয়েকটি উদাহরণ:

https://foo.com/video.ogg#t=10,20

ভিডিওটি ১০ সেকেন্ড থেকে শুরু করে ২০ সেকেন্ড পর্যন্ত চলবে।

https://foo.com/video.ogg#t=,10.5

ভিডিওটি একদম শুরু থেকে শুরু করে ২০ সেকেন্ড পর্যন্ত চলবে।

https://foo.com/video.ogg#t=,02:00:00

ভিডিওটি একদম শুরু থেকে শুরু করে ২০ ঘন্টা পর্যন্ত চলবে।

https://foo.com/video.ogg#t=60

ভিডিওটি ৬০ সেকেন্ড থেকে শুরু করে শেষ পর্যন্ত চলবে।

বিকল্প অপশন

HTML included between, for example, the opening and closing tags of media elements is processed by browsers that don't support HTML5 media. You can take advantage of this fact to provide alternative fallback media for those browsers.

This section provides two possible fallback options for video. In each case, if the browser supports HTML5 video, that is used; otherwise, the fallback option is used.

ফ্ল্যাশ ব্যবহার করা

<video> এলিমেন্টের সাপোর্ট না থাকলে আপনি প্রাগৈতিহাসিক কায়দার ফ্ল্যাশের সাহায্যে ভিডিও চালাতে পারেন নিচের মত করে:

<video src="video.ogv" controls>
    <object data="flvplayer.swf" type="application/x-shockwave-flash">
      <param value="flvplayer.swf" name="movie"/>
    </object>
</video>

উল্লেখ্য, আপনার object ট্যাগে classid যুক্ত করা উচিৎ হবে না, যদি আপনি ইন্টারনেট এক্সপ্লোরার ছাড়া অন্যান্য ব্রাউজারেও সাপোর্ট পেতে চান!

জাভা এ্যাপ্লেটের সাহায্যে Ogg ভিডিও প্লে করা

যেসকল ব্রাউজারে HTML5 ভিডিও সাপোর্ট না করলেও জাভা সাপোর্ট করে, সেখানে আপনি জাভা Cortado এ্যাপ্লেটটি ব্যবহার করে ভিডিও চালাতে পারেন।

<video src="my_ogg_video.ogg" controls width="320" height="240">
  <object type="application/x-java-applet" width="320" height="240">
     <param name="archive" value="cortado.jar">
     <param name="code" value="com.fluendo.player.Cortado.class">
     <param name="url" value="my_ogg_video.ogg">
     <p>You need to install Java to play this file.</p>
  </object>
</video>

If you do not create an alternate child element of the cortado object element, such as the <p> element above, FireFox 3.5 installations that handle the video natively but do not have Java installed will incorrectly inform the user that they need to install a plugin to view content on the page.

Starting in Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), error handling has been revised to match the latest version of the HTML5 specification. Instead of the error event being dispatched to the media element itself, it now gets delivered to the child <source> elements corresponding to the sources resulting in the error.

This lets you detect which sources failed to load, which may be useful. Consider this HTML:

<video>
<source id="mp4_src"
  src="video.mp4"
  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</source>
<source id="3gp_src"
  src="video.3gp"
  type='video/3gpp; codecs="mp4v.20.8, samr"'>
</source>
<source id="ogg_src"
  src="video.ogv"
  type='video/ogg; codecs="theora, vorbis"'>
</source>
</video>

Since Firefox doesn't support MP4 and 3GP due to their patent-encumbered nature, the <source> elements with the IDs "mp4_src" and "3gp_src" will receive error events before the Ogg resource is loaded. The sources are tried in the order in which they appear, and once one loads successfully, the remaining sources aren't tried at all.

যখন কোন source ই লোড হবে না

To detect that all child <source> elements have failed to load, check the value of the media element's networkState attribute. If this is HTMLMediaElement.NETWORK_NO_SOURCE, you know that all the sources failed to load.

If at that point you add another source by inserting a new <source> element as a child of the media element, Gecko attempts to load the specified resource.

কোন সোর্স ব্যবহার সম্ভব না হলে বিকল্প ব্যবস্থা

Another way to show the fallback content of a video when none of the sources could be decoded in the current browser is to add an error handler on the last source element. Then you can replace the video with its fallback content:

<video controls>
  <source src="dynamicsearch.mp4" type="video/mp4"></source>
  <a href="dynamicsearch.mp4">
    <img src="dynamicsearch.jpg" alt="Dynamic app search in Firefox OS">
  </a>
  <p>Click image to play a video demo of dynamic app search</p>
</video>

var v = document.querySelector('video'),
    sources = v.querySelectorAll('source'),
    lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
  var d = document.createElement('div');
  d.innerHTML = v.innerHTML;
  v.parentNode.replaceChild(d, v);
}, false);

আরও দেখুন

• The media-related HTML elements: <audio>, <video>, <source>;
• Manipulating video using canvas
• Introducing the Audio API Extension
• nsIDOMHTMLMediaElement
• Media formats supported by the audio and video elements
• Theora Cookbook
• Popcorn.js - The HTML5 Media Framework
• Kaltura Video Library Solution, a JavaScript library (mwEmbed) which supports a seamless fallback with HTML5, VLC Player, Java Cortado and OMTK Flash Vorbis player. (It is used by Wikimedia)
• OMTK - Flash, a Flash library which implements a Vorbis decoder
• Projekktor Player, a JavaScript wrapper for audio- and video-tags with flash fallback, open source, GPL
• Applet Cortado, an audio/video playback solution in Java maintained by Xiph.org
• Video.JS, an open source HTML5 video player and framework.
• MediaElement.js - open source HTML5 audio/video framework with a custom Flash shim that mimic HTML5 media API for older browsers.
• Flv Player - HTML5 fallback support video player
• DASH - Dynamic Adaptive Streaming over HTTP - for HTML5 video