nhúng video trong HTML5

HTML5 cho phép chúng ta nhúng video vào trang web rồi xem trực tiếp trên trình duyệt mà không cần phải sử dụng plugin của bên thứ ba như Adobe Flash Player. Hôm nay Blog Mạng Lưới Toàn Cầu sẽ cùng bạn xem code nhúng này cụ thể như thế nào.

Code mẫu:

<video width="640" height="480" controls posster="images/poster.png">

<source src="mangluoitoancau.mp4" type="video/mp4">

<source src="mangluoitoancau.ogg" type="video/ogg">

Trình duyệt của bạn không hỗ trợ thẻ video

</video>

Giải thích code:

• Để nhúng video chúng ta bắt đầu bằng thẻ mở <video> và kết thúc bằng thẻ đóng </video>
• width và height quy định chiều rộng và chiều cao của video
• controls làm xuất hiện nút Play (bật video), Pause (tạm dừng), tùy chọn toàn màn hình và nút điều khiển âm thanh.
• Nguồn video đặt trong thẻ source, với đường dẫn cụ thể được quy định trong thuộc tính src, trình duyệt dựa vào thuộc tính type để biết định dạng của video.
• Có 3 định dạng video được các trình duyệt hỗ trợ là: mp4, ogg và webm. Tuy nhiên không phải trình duyệt nào cũng hỗ trợ cả 3, có trình duyệt chỉ hỗ trợ 1 định dạng duy nhất.
• Dòng cuối cùng sẽ xuất hiện trong trường hợp trình duyệt không hỗ trợ thẻ video, thí dụ IE8. Hầu hết các trình duyệt phổ biến gồm: Google Chrome, FireFox, Opera, Safari và IE9+ đều có hỗ trợ thẻ video
• Thuộc tính poster dùng để làm ảnh nền cho video, thí dụ video ở đầu bài sử dụng poster là bức ảnh dưới đây:

Các định dạng video được hỗ trợ trên trình duyệt:

Trình duyệt	MP4	WebM	Ogg
Internet Explorer	Có	Không	Không
Chrome	Có	Có	Có
Firefox	Có (FireFox 21+)	Có	Có
Safari	Có	Không	Không
Opera	Không	Có	Có

Ngoài ra chúng ta có thể sử dụng Javascript để điều khiển bật, tắt, thay đổi kích thước video như ví dụ dưới đây:

Tùy chọn movie

   

 
Theo đó:

• Trước tiên video được gán một id cụ thể, trong ví dụ này là myvideo
• Video sẽ được lấy bằng lệnh document.getElemnetById("myvideo")
• Sau đó video này sẽ được điều khiển thông qua các lệnh video.pause(),video.play(), video.width="xyz" , với xyz là giá trị cụ thể nào đó. Các lệnh này được lồng trong các hàm.
• Các button tương ứng khi được nhấn sẽ gọi các hàm này lên bằng lệnh onclick, ví dụ: <button onclick="play();">Chạy</button> sẽ gọi hàm play() và chạy video này.

Code cụ thể:
<div>
<button onclick="playPause();">Play/Pause</button>
<button onclick="size250();">250</button>
<button onclick="size400();">400</button>
<button onclick="size550();">550</button>
</div>
<video id="myvideo" width="250">
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"></source>
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm"></source>
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg"></source>
</video>
<script type="text/javascript">
var video = document.getElementById("myvideo");
function playPause()
{ 
if (video.paused) 
video.play(); 
else 
video.pause(); 
} 

function size250()
{video.width = 250;} 

function size400()
{video.width = 400;}

function size550()
{video.width = 550;} 
</script>