HTML5 Video - Làm việc ra sao

Video trên Web

Cho tới nay, vẫn chưa có một tiêu chuẩn cho việc xem video trên trang web.

Ngày nay, hầu hết video được chạy thông qua một plug-in (ví dụ như flash). Do đó, những trình duyệt khác nhau có thể sẽ có plug-in khác nhau.
HTML5 định nghĩa một phần tử mới, nó quy định một tiêu chuẩn để nhúng một video vào web:

Đó chính là thẻ

<video> 

HTML5 Video – Làm việc ra sao

Để hiển thị một video trong HTML5, ta cần đoạn code sau:

<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>  

Link Demo

Thuôc tính điều khiển được thêm vào thẻ video như chạy, dừng, điều chinh âm thanh.
Bạn nên để đoạn thông báo nếu trình duyệt không hỗ trợ xem video html5 ở giữa cặp thẻ <video> và </video>.
Thẻ <video> cho phép có nhiều thẻ <source>.
<source> có thể chứa nhiều link video khác. Trình duyệt sẽ chọn phát video được xếp đầu tiên.

Định dạng video được các trình duyệt hỗ trợ 

Hiện nay, có 3 định dạng video được hỗ trợ trong thẻ <video>: MP4, WebM, and Ogg

Trình duyệt Internet Explorer 9: 
MP4

Firefox 4.0:
WebM, Ogg

Google Chrome 6:
MP4,WebM, Ogg

Apple Safari 5:
MP4

Opera 10.6:
WebM, Ogg

HTML5 <video> – DOM Methods and Properties

HTML5 có các phương thức DOM, thuộc tính, và sự kiện dành cho thẻ <video> và <audio>.

Những phương thức, thuộc tính và sự kiện đó cho phép ta thao tác chúng bằng JavaScript.

Có nhiều phương thức dành cho việc chạy video, dừng, tải về, điều chỉnh âm thanh, thời lượng xem và còn có sự kiện thông báo cho ta biết lúc nào bắt đầu chạy video, khi nào dừng, khi nào kết thúc.

Sau đây là một ví dụ minh họa, bằng một cách đơn giản ta biết được cách cài đặt và gọi các phương thức như thế nào.

Ví dụ: Tạo chức năng chạy/ dừng và thay đổi kích thước video:

Link Demo

Ví dụ trên sử dụng 2 phương thức là: play() and pause(). Sử dụng 2 thuộc tính là: paused and width. Xem code và chạy ví dụ trong file demo đi kèm.

Phụ lục:

Code kiểm tra xem trình duyệt đang sử dụng có hỗ trợ xem video html5 hay không?

function checkVideo()
{
if(!!document.createElement('video').canPlayType)
{
var vidTest=document.createElement("video");
oggTest=vidTest.canPlayType('video/ogg; codecs="theora, vorbis"');
if (!oggTest)
{
h264Test=vidTest.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"');
if (!h264Test)
{
alert("Sorry. No video support.");
}
else
{
if (h264Test=="probably")
{
alert("Yeah! Full support!");
}
else
{
alert("Meh. Some support.");
}
}
}
else
{
if (oggTest=="probably")
{
alert("Yeah! Full support!");
}
else
{
alert("Meh. Some support.");
}
}
}
else
{
alert("Sorry. No video support.");
}
} 

Theo khoapham.vn