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.
1
2
3
4
| </pre><audio width="300" height="32" src="audio-file.mp3"></audio><pre> |
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.
1
2
3
4
5
6
7
| </pre><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><pre> |
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 :
autoplay
Vớ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.
1
2
3
4
| </pre><audio width="300" height="32" src="audio-file.mp3" autoplay="autoplay"></audio><pre> |
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.
1
2
3
4
| </pre><audio width="300" height="32" src="audio-file.mp3" loop="loop"></audio><pre> |
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“.
Thuộc tính này có 3 giá trị : “auto“, “none“, “metadata“.
1
2
3
4
| </pre><audio width="300" height="32" src="audio-file.mp3" preload="auto"></audio><pre> |
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….
1
2
3
4
| </pre><audio width="300" height="32" src="audio-file.mp3" controls="controls"></audio><pre> |
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>
1
2
3
4
5
6
| </pre><audio width="300" height="32" controls="controls"><source src="audio-file.ogg" type="audio/ogg" /><source src="audio-file.mp3" type="audio/mpeg" /></audio><pre> |
2 <video>
Thẻ này có cách dùng và thuộc tính tương tự như thẻ <audio>
01
02
03
04
05
06
07
08
09
10
11
| </pre><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><pre> |
Ở 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>
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
1
2
3
4
5
6
7
8
9
| </pre><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><pre> |
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.
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.
1
2
3
4
5
6
7
8
9
| </pre><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><pre> |
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.
Blog Designer
Hãy cho đi rồi sẽ nhận lại nhiều hơn thế
Đã có nhiều lúc tôi không biết mình sẽ làm được gì ??? Nhưng hãy cứ tin vào chính bản thân mình, tin vào mọi người và đừng để con tim bạn lạc lối. Bạn và tôi sẽ tìm ra được đâu là đích đến để mình biết đường đi.Nếu bạn cần một người bạn, đừng ngại kết bạn với tôi.
Thư Viện Đồ Họa: www.izdesigner.com
Kết nối với tôi: