HTML5: Cách sử dụng AUDIO và VIDEO
Giải phóng thời gian, khai phóng năng lực
HTML5 giới thiệu tính năng hỗ trợ các thiết bị media thông qua các phần tử <audio> và <video>, các phần tử này có thể dễ dàng nhúng các media vào các trang web.
Nhúng media
Việc nhúng media vào các trang web của bạn giờ đây đã trở nên quá dễ dàng, bạn chỉ cần làm như sau:
Ví dụ trên phát một video mẫu từ website Theora, trong đó có hiển thị thêm thanh điều khiển cho phép bạn phát lại video.
Còn đây là ví dụ nhúng audio vào trang web của bạn:
, trong đó, thuộc tính src có thể là một URL file audio hoặc đường dẫn tới file audio trên máy tính của bạn.
Ví dụ trên thể hiện thêm các thuộc tính của phần tử <audio>, trong đó:
· controls : Hiển thị thanh điều khiển chuẩn dành cho audio trên trang web.
· autoplay : Thực hiện việc phát audio tự động.
· loop : Thực hiện việc lặp lại audio một cách tự động.
Thuộc tính preload dùng để cho phép đệm những file có kích thước lớn. Nó gồm 3 giá trị sau đây:
· "none" : không đệm file
· "auto" : đệm file media
· "metadata" : chỉ đệm file metadata
Trong trường hợp có nhiều file nguồn audio ta có thể sử dụng các phần tử <source> để cung cấp video hoặc audio được mã hoá với các định dạng khác khau nhằm mục đích áp dụng cho các trình duyệt khác nhau. Ví dụ:
<source src="foo.ogg" type="video/ogg">
<source src="foo.mp4" type="video/mp4">
</video>
Ví dụ trên sẽ hiển thị file Ogg trong trình duyệt hỗ trợ định dạng Ogg. Nếu trình duyệt không hỗ trợ định dạng Ogg thì trình duyệt có thể sử dụng file MPEG-4 thông qua thẻ <source> ở dưới.
Bạn cũng có thể chỉ định dạng mã hóa của file media được yêu cầu bằng cách sử dụng thuộc tính codecs, điều này sẽ giúp trình duyệt đưa ra được những quyết định thông minh hơn khi chọn file media. Ví dụ:
<source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
</video>
Ví dụ trên đưa ra hai dạng mã hóa của video là Dirac và Speex. Nếu trình duyệt có hỗ trợ Ogg (file .ogg được chỉ định ở phần tử <source>) nhưng không phải là dạng mã hóa quy định thì video cũng sẽ không được nạp.
Trong trường hợp bạn không sử dụng thuộc tính type cho phần tử <source> thì kiểu của media sẽ được lấy từ server và trình duyệt sẽ kiểm tra xem có thể xử lý được nó hay không, nếu không xử lý được thì sẽ chuyển sang phần tử <source> tiếp theo để kiểm tra. Nếu không thể sử dụng được dữ liệu ở bất kỳ phần tử <source> nào thì sự kiện error sẽ được gửi tới phần tử <video>.
Còn trong trường hợp có sử dụng thuộc tính type thì nó sẽ được so sánh với các kiểu MIME mà trình duyệt có thể phát, và nếu nó không được nhận dạng thì server thậm chí còn không được truy vấn mà thay vào đó phần tử <source> tiếp theo được kiểm tra.
Điều khiển việc phát lại media
Mỗi khi bạn nhúng media vào trang web sử dụng các phần tử mới, bạn có thể lập trình để điều khiển chúng bằng code JavaScript. Ví dụ, để tiến hành phát lại media bạn có thể lập trình như sau:
Dòng đầu tiên sẽ có nhiệm vụ lấy video đầu tiên trong trang web, dòng thứ 2 sẽ gọi phương thức play() của phần tử.
Việc điều khiển một thiết bị nghe nhạc có thể phát, tạm ngưng, tăng/giảm âm lượng sử dụng JavaScript giờ đây đã trở nên đơn giản hơn nhiều. Bạn có thể xem ví dụ dưới đây:
<div>
<button onclick="document.getElementById('demo').play()">Play the Audio</button>
<button onclick="document.getElementById('demo').pause()">Pause the Audio</button>
<button onclick="document.getElementById('demo').volume+=0.1">Increase Volume</button>
<button onclick="document.getElementById('demo').volume-=0.1">Decrease Volume</button>
</div>
Dừng download media
Bạn có thể tiến hành lập trình tạm dừng việc phát lại media đơn giản chỉ bằng phương thức pause(), tuy nhiên trình duyệt vẫn download media cho tới khi phần tử media được huỷ bởi bộ dọn rác (garbage collection).
Dưới đây là đoạn code cho phép bạn tiến hành dừng việc download đồng thời với việc thực hiện hàm pause():
mediaElement.pause();
mediaElement.src='';
//Hoặc:
mediaElement.removeAttribute("src");
Bằng cách huỷ thuộc tính src hoặc thiết lập về trạng thái rỗng (chuỗi rỗng) bạn có thể huỷ bộ giải mã bên trong phần tử dẫn đến việc dừng download.
Tìm kiếm qua media
Các phần tử media cung cấp việc hỗ trợ di chuyển vị trí phát lại hiện tại tới các điểm xác định trong nội dung của media. Điều này được thực hiện bằng cách thiết lập giá trị cho thuộc tính currentTime (đơn vị là giây-second) của phần tử media.
Bạn có thể sử dụng thuộc tính seekable của phần tử để xác định dải tìm kiếm, khi đó chương trình sẽ trả về một đối tượng TimeRanges trong đó liệt kê các dải thời gian mà bạn có thể tìm kiếm. Ví dụ:
mediaElement.seekable.start(); // Trả về thời gian bắt đầu (trong vài giây)
mediaElement.seekable.end(); // Trả về thời gian kết thúc (trong vài giây)
mediaElement.currentTime = 122; // Tìm trong 122 giáy
mediaElement.played.end(); // Trả lại khoảng thời gian mà trình duyệt đã phát
Quy định phạm vi phát lại
Khi xác định URI của media cho một phần tử <audio> hay <video> thì bạn có thể tùy chọn bổ sung thêm thông tin nhằm xác định cho được phần media để để tiến hành phát. Bạn có thể thực hiện điều này bằng cách đặt thêm dải thời gian vào sau URI của file media. Dải thời gian được tạo theo cú pháp sau đây:
, trong đó, thời gian có thể là một số thực hoặc tuân theo định dạng hh:mm:ss. Ví dụ:
http://v1study.com/video.ogg#t=10,20 : Có nghĩa rằng video sẽ được phát ở giây thứ 10 và kết thúc ở giây thứ 20.
#t=,10.5 : Có nghĩa rằng video sẽ được phát trong khoảng từ 0 đến 10.5 giây.
#t=,02:00:00 : Có nghĩa rằng video sẽ được phát trong khoảng từ 0 đến 2 giờ.
#t=60 : Có nghĩa rằng video sẽ được phát ở giây thứ 60 cho đến khi kết thúc.
Các tùy chọn dự phòng
Bạn có thể đặt vào giữa thẻ mở và thẻ đóng của các phần tử media những tuỳ chọn dự phòng nhằm mục đích thay thế cho chính các phần tử media trong trường hợp trình duyệt không hỗ trợ các phần tử media đó.
Phần này sẽ cung cấp một số tuỳ chọn dự phòng cho phần tử <video>. Trong mỗi trường hợp nếu trình duyệt không hỗ trợ phần tử <video> thì tuỳ chọn dự phòng sẽ được sử dụng.
Sử dụng Flash
Bạn có thể sử dụng Flash để phát những đoạn video có định dạng flash (.swf, .flv, ...) bằng cách như thể hiện ở ví dụ dưới đây:
<object data="flvplayer.swf" type="application/x-shockwave-flash">
<param value="flvplayer.swf" name="movie"/>
</object>
</video>
Lưu ý rằng bạn không nên tích hợp classid trong thẻ <object> nhằm mục đích tạo tương thích với các trình duyệt khác ngoài trình duyệt Internet Explorer.
Phát các video Ogg sử dụng Java Applet
Bạn có thể sử dụng Java Applet Cortado làm dự phòng để phát các video OGG trong các trình duyệt có hỗ trợ Java nhưng không hỗ trợ phần tử <video>. Ví dụ:
<object type="application/x-java-applet" width="320" height="240">
<param name="archive" value="cortado.jar">
<param name="code" value="com.fluendo.player.Cortado.class">
<param name="url" value="my_ogg_video.ogg">
<p>You need to install Java to play this file.</p>
</object>
</video>
Nếu video không được phát thì phần thông báo trong thẻ <p> (nằm trong phần tử <object>) sẽ được hiển thị, thông báo này giúp người dùng hiểu được lý do tại sao video không được phát để tiến hành khắc phục cho đúng.
Xử lý lỗi
Bắt đầu từ bản Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1), việc xử lý lỗi đã được sửa lại để phù hợp với phiên bản HTML5 mới nhất. Theo đó, thay vì phần tử media gửi sự kiện error tới chính nó thì giờ đây sự kiện error được gửi tới phần tử <source> phát sinh lỗi, từ đó phát hiện ra nguồn media nào không được nạp. Xét ví dụ sau:
<source id="mp4_src" src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'></source>
<source id="3gp_src" src="video.3gp" type='video/3gpp; codecs="mp4v.20.8, samr"'></source>
<source id="ogg_src" src="video.ogv" type='video/ogg; codecs="theora, vorbis"'></source>
</video>
Vì Firefox không hỗ trợ MP4 và 3GP (do liên quan đến bản quyền), nên các phần tử <source> với các ID là "mp4_src" và "3gp_src" sẽ nhận được các sự kiện error trước khi tài nguyên Ogg được nạp. Các phần tử <source> sẽ lần lượt được lấy nguồn media theo thứ tự xuất hiện, nếu một nguồn media nào đó được lấy thì các phần tử <source> còn lại sẽ lập tức được cho dừng hoạt động lấy nguồn media.
Phát hiện khi không có nguồn nào được nạp
Để phát hiện điều này thì cần phải kiểm tra giá trị của thuộc tính networkState của phần tử media, nếu giá trị là NETWORK_NO_SOURCE thì chắc chắn rằng không có nguồn nào được nạp cả.
Nếu lúc đó ta thêm một nguồn media khác bằng cách thêm một phần tử <source> nữa thì trình duyệt sẽ cố gắng nạp nguồn media này.
Hiển thị nội dung dự phòng khi không có nguồn nào được giải mã
Có một cách khác để hiển thị nội dung dự phòng của video khi không nguồn nào được giải mã trong trình duyệt hiện thời, đó là thêm bộ xử lý lỗi vào phần tử <source> cuối cùng. Ví dụ:
<source src="dynamicsearch.mp4" type="video/mp4"></source>
<a href="dynamicsearch.mp4">
<img src="nguồn_ảnh" alt="Tìm kiếm ứng dụng động trong Firefox OS">
</a>
<p>Nhấp vào ảnh để mở video demo về tìm kiếm ứng dụng động.</p>
</video>
<script>
var v = document.querySelector('video'),
sources = v.querySelectorAll('source'),
lastsource = sources[sources.length-1];
lastsource.addEventListener('error', function(ev) {
var d = document.createElement('div');
d.innerHTML = v.innerHTML;
v.parentNode.replaceChild(d, v);
}, false);
Giải phóng thời gian, khai phóng năng lực