Menu
GIỚI THIỆU
  • HTML5 đã tấn công sâu 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. Trong những tính năng tuyệt vời này là các thẻ và

Sử dụng thẻ audio và video HTML5 đơn giản

HTML5 đã tấn công sâu 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. Trong những tính năng tuyệt vời này là các thẻ <audio><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ì :

Audio và Video với HTML5
Audio và Video với HTML5

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>
 
Audio và Video với HTML5
Audio và Video với HTML5

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 preloadauto, 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>
 
Sử dụng thẻ audio và video HTML5 đơn giản
Sử dụng thẻ audio và video HTML5 đơn giản

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="Đường dẫn tới video" /><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="Đường dẫn tới video/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>
 

Audio và Video với HTML5

Ở 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="Đường dẫn tới video " /><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="Đường dẫn tới video" 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="Đường dẫn " /><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="Đường dẫn " 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>
 
Cách sử dụng Audio và Video với HTML5
Cách sử dụng Audio và Video với HTML5

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.

Chúc các bạn thành công !

Ghi nguồn hoicode.com khi đăng tải lại bài viết này.
Link: Sử dụng thẻ audio và video HTML5 đơn giản
Tags: css border css tutorial html5 tips multilanguage tự học html5 thủ thuật html5
Category: HTML
Mạnh xã hội: Follow fanpage của team https://www.facebook.com/hoicode/ để tiếp tục theo dõi các loạt bài mới nhất về HTML,Java,C,C++,Javascript,HTML,PHP,Python,Database,Mobile.... mới nhất của chúng tôi.

Chia sẻ liên kết

ĐĂNG BÌNH LUẬN: Đăng câu hỏi trên Facebook để được hỗ trợ nhanh nhất.

    Email của bạn sẽ được sử dụng với mục đích thông báo tin tuyển dụng mới hoặc các bài viết mới.

    captcha