Audio và Video với HTML5

HTML5 đã xâm nhập vào cuộc sống của chúng ta với những tính năng tuyệt vời mà nó mang lại. 2 trong những tính năng tuyệt vời này là các thẻ<audio> và <video> , cho phép bạn chia sẻ những đoạn video và âm thanh trên mạng. Chúng ta cùng tìm hiểu xem 2 thẻ này làm được những gì :

1 <audio>

Dựa vào tên thẻ mà chúng ta biết được công dụng của thẻ này. Với thẻ <audio> bạn có thể nhanh chóng chèn những bản nhạc yêu thích vào trang web của bạn. Thẻ này được sử dụng rất đơn giản , rất giống với cách dùng thẻ <img>, chúng ta chỉ việc chèn thuộc tính src là đường dẫn đến file audio mà bạn muốn chia sẻ là được.

<audio width="300" height="32" src="audio-file.mp3"> </audio>

Thật đơn giản phải không nào ? Ngoài ra bạn còn có thể chèn những dòng tin nhắn dự phòng cho trường hợp những trình duyệt nào không hỗ trợ thẻ này.

<audio width="300" height="32" src="audio-file.mp3"> Xin lỗi, trình duyệt của bạn không hỗ trợ . </audio>

Thẻ audio cũng hỗ trợ rất nhiều lựa chọn cho bạn. Sau đây là một vài lựa chọn cho thẻ này :autoplayVới lựa chọn này trang web của bạn sẽ tự động chạy các file audio. Đây là lựa chọn mà theo mình bạn nên cẩn trọng khi sử dụng,vì nó có thể gây phiên hà cho người dùng.

<audio width="300" height="32" src="audio-file.mp3" autoplay="autoplay"> </audio>

Bạn có thể ngăn ngừa việc phát audio tự động bằng cách chèn autoplay=”false” vào là được.

loop

Khi bạn thêm thuộc tính này thì file audio sẽ tự động phát lại khi kết thúc.

<audio width="300" height="32" src="audio-file.mp3" loop="loop"> </audio>

Nếu bạn không muốn phát lại thì dùng loop=”false”.

preload

Thuộc tính này cho phép các trình duyệt tự động tải(buffering) toàn bộ file audio về máy của bạn mà không cần người dùng phải click vào nút Play. Điều này có lợi là người dùng có thể thưởng thức file audio mà không bị giựt khi đường truyền chậm, hay bị đứt giữa chừng.
Thuộc tính này có 3 giá trị : “auto“, “none“, “metadata“.

<audio width="300" height="32" src="audio-file.mp3" preload="auto"> </audio>

Các bạn nên nhớ điều này, đó là trình duyệt Safari mặc định sẽ ấn định thuộc tính preload là auto, vì thế nếu bạn không muốn dùng thuộc tính này có thể dùng preload=”none”

controls

Với thuộc tính này, bạn sẽ cho phép người dùng có thể điều khiển được trang thái audio như tạm dừng, chỉnh âm lượng, phát lại….

<audio width="300" height="32" src="audio-file.mp3" controls="controls"> </audio>

filetypes

Thật không may là hiện giờ mỗi trình duyệt đều có kiểu hỗ trợ định dạng âm thanh khác nhau, và vì thế để có thể chạy tốt trên các trình duyệt , bạn cần phải định dạnh lại file audio của bạn ở một định dạng có thể chạy tốt trên các trình duyệt. Sau đây là bảng danh sách các định dạng chạy trên các trình duyệt khác nhau.

Browser	MP3	Wav	Ogg
Internet Explorer 9	YES	NO	NO
Firefox 4.0	NO	YES	YES
Google Chrome 6	YES	YES	YES
Apple Safari 5	YES	YES	NO
Opera 10.6	NO	YES	YES

Thật khó để có thể hỗ trợ một định dạnh cho nhiều trình duyệt, tuy nhiên bạn có thể chèn một file với nhiều định dạng dự phòng bằng việc sử dụng thẻ <source>

<audio width="300" height="32" controls="controls"><source src="audio-file.ogg" type="audio/ogg" /><source src="audio-file.mp3" type="audio/mpeg" /> </audio>

2 

Thẻ này có cách dùng và thuộc tính tương tự như thẻ

 

 

<video width="320" height="240" controls="controls"><source src="movie.mp4" type="video/mp4" /><source src="movie.ogg" type="video/ogg" /><source src="movie.webm" type="video/webm" /><object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.thuthuatweb.net/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/movie.mp4&poster=/wp-admin/" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="320" height="240" type="application/x-shockwave-flash" src="http://www.thuthuatweb.net/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/movie.mp4&poster=/wp-admin/" allowfullscreen="true" allowscriptaccess="true" /> </object> Xin lỗi, trình duyệt không hỗ trợ. </video>

Ở ví dụ trên, chúng ta sử dụng nhiều định dạng khác nhau cho nhiều trình duyệt, và 1 dòng thông báo hiển thị nếu như những định dạng đó không được hỗ trợ trên các trình duyệt khác.
Chúng ta cùng tìm hiểu thêm một số thuộc tính khác của thẻ <video>

height/width

Thuộc tính này xác định chiều cao và chiều rộng của file video

<video width="640" height="480" controls="controls"><source src="video-file.mp4" type="video/mp4" /><source src="video-file.ogv" type="video/ogg" /><object width="640" height="480" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.thuthuatweb.net/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/video-file.mp4&poster=/wp-admin/" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="640" height="480" type="application/x-shockwave-flash" src="http://www.thuthuatweb.net/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/video-file.mp4&poster=/wp-admin/" allowfullscreen="true" allowscriptaccess="true" /></object> Xin lỗi , trình duyệt không hỗ trợ. </video>

poster
Nếu video của chúng ta không chạy được ,Thay vì là một màn hình đen cùng với lỗi thì chúng ta có thể sử dụng một hình ảnh như là một poster chẳng hạn, dùng làm hình ảnh thay thế cho video này.

<video width="320" height="240" controls="controls" poster="video-thumbnail.jpg"><source src="video-file.mp4" type="video/mp4" /><source src="video-file.ogv" type="video/ogg" /><object width="320" height="240" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="http://www.thuthuatweb.net/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/wp-admin/video-file.mp4&poster=/wp-admin/video-thumbnail.jpg" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /><embed width="320" height="240" type="application/x-shockwave-flash" src="http://www.thuthuatweb.net/wp-includes/js/tinymce/plugins/media/moxieplayer.swf" flashvars="url=/wp-admin/video-file.mp4&poster=/wp-admin/video-thumbnail.jpg" allowfullscreen="true" allowscriptaccess="true" /></object> Xin lỗi, trình duyệt không hỗ trợ . </video>

Sự hỗ trợ đồng bộ trên tất cả các trình duyệt là điểm yếu nhất của HTML5 khi mà hiện tại mỗi trình duyệt vẫn còn có nhiều sự khác nhau về việc hỗ trợ định dạng cũng như cách hiển thị. Vì thế theo mình, khi bạn dùng html5 cho các đoạn audio hay video thì bạn nên sử dụng thêm phương án dự phòng, đó là Flash.
Hy vọng với bài viết này có thể giúp những bạn mới bắt đầu tìm hiểu HTML5 sẽ có thêm kinh nghiệm về nền tảng này.