29/03/16
admin
Audio và Video là các thuộc tính được sử dụng rất phổ biến trong việc thiết kế website. Nếu như trước kia các lập trình viên khi đưa video hoặc audio vào website đều phải sử dụng javascrip hoặc jquery thì hiện nay trong HTML5 đã hỗ trợ 2 định dạng này, giúp cho quá trình nhúng video hoặc audio vào website đơn giản hơn rất nhiều.

 


1. Thẻ <audio>

Tên của thẻ thể hiện tất cả công dụng của nó. Khi sử dụng thẻ <audio> bạn có thể nhanh chóng chèn những bản nhạc yêu thích vào website của bạn. Cũng giống như việc sử dụng thẻ <img>, khi sử dụng thẻ <audio> bạn chỉ cần chèn thuộc tính src là đường dẫn của link bài hát bạn muốn chia sẻ là được.

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

Trong đó width và height thể hiện chiều rộng và chiều cao (đơn vị px) của thẻ, trường hợp trình duyệt không hỗ trợ HTML5 mà bạn muốn gửi thông báo tới người dùng ta có thể sử dụng cú pháp như sau:

 <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> hỗ trợ khá nhiều lựa chọn cho bạn:

autoplay: Lựa chọn này sẽ giúp trang web của bạn tự động chạy các file audio, bạn nên cân nhắc khi sử dụng lựa chọn này vì nó có thể gây phiền toái 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: Cú pháp này giúp file audio 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: Đây là cú pháp giúp trình duyệt của người dùng tự động tải toàn bộ file audio về máy tính mà không cần người dùng phải click vào nút play, điều này giúp người dùng có thể nghe trọn vẹn file audio mà không bị ảnh hưởng khi đường truyền mạng kém. 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> 

Đối với trình duyệt Sarafi, thuộc tính preload mặc định sẽ được ấn định là auto, vì vậy nếu bạn không muốn dùng thuộc tính này bạn có thể dùng preload="none"

controls: Cú pháp này sẽ giúp người dùng điều khiển được file 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: định dạng âm thanh cho file

Hiện nay mỗi trình duyệt lại có 1 kiểu định dạng âm thanh khác nhau cho thẻ <audio> và đây là điều mình không thích chút nào, chính vì vậy bạn nên sử dụng 1 định dạng để có thể hiển thị tốt cho tất cả các trình duyệt. Dưới đây là danh sách các định dạng chạy trên các trình duyệt khác nhau.

Trình duyệt 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

Dựa vào danh sách trên, sẽ thật khó nếu bạn sử dụng 1 định dạng có thể sử dụng cho tất cả các trình duyệt, tuy nhiên bạn có thể chèn 1 file audio với nhiều định dạng dự phòng bằng cách 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ẻ <video>

Thẻ này có cách sử dụng tương tự như thẻ <audio>

 <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://drupal.edu.vn/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://drupal.edu.vn/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 file audio cho nhiều trình duyệt khác nhau, khi trình duyệt không hỗ trợ HTML5 sẽ có thông báo cho người dùng.

Dưới đây là một số thuộc tính khác của thẻ <video>

width/height: Tương tự như thuộc tính <audio> thuộc tính này cũng xác định chiều rộng và chiều cao của thẻ <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://drupal.edu.vn/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://drupal.edu.vn/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: Trường hợp video của chúng ta không chạy được, thay vì hiển thị 1 màn hình đen cùng với lỗi thì chúng ta có thể sử dụng 1 hình ảnh như 1 poster 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://drupal.edu.vn/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://drupal.edu.vn /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.