Audio và Video trong HTML5
Các đặc trưng HTML5, bao gồm sự hỗ trợ audio và video tự nhiên mà không cần Flash. Thẻ HTML5 <audio> và <video> làm nó đơn giản để thêm đa phương tiện tới một Website. Bạn cần thiết lập thuộc tính src để nhận diện nguồn phương tiện và bao gồm một thuộc tính control để ...
Các đặc trưng HTML5, bao gồm sự hỗ trợ audio và video tự nhiên mà không cần Flash.
Thẻ HTML5 <audio> và <video> làm nó đơn giản để thêm đa phương tiện tới một Website. Bạn cần thiết lập thuộc tính src để nhận diện nguồn phương tiện và bao gồm một thuộc tính control để người sử dụng có thể chơi và dừng đa phương tiện.
Nhúng video
Dưới đây là mẫu đơn giản nhất để nhúng một video file trong trang web của bạn:
<video src="foo.mp4" awidth="300" height="200" controls>
Your browser does not support the <video> element.
</video>
Chi tiết kỹ thuật bản phác thảo của HTML5 hiện tại không xác định định dạng video nào mà các trình duyệt nên hỗ trợ trong thẻ video. Nhưng định dạng video được sử dụng phổ biến nhất là:
Ogg: Ogg file với Thedora video và Vorbis video.
mpeg4: MPEG4 file với H.264 video và AAC audio.
Bạn có thể sử dụng thẻ <source> để xác định đa phương tiện cùng với kiểu đa phương tiện và nhiều thuộc tính khác. Một phần tử video cho phép nhiều phần tử source và trình duyệt sẽ sử dụng định dạng được nhận ra đầu tiên:
<!DOCTYPE HTML>
<html>
<body>
<video awidth="300" height="200" controls autoplay>
<source src="http://www.vietjack.com/html5/foo.mp4" type="video/ogg" />
<source src="http://www.vietjack.com/html5/foo.mp4" type="video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>
-Ví dụ trên sẽ cho kết quả:
Thuộc tính của thẻ video
Thẻ HTML5 video có thể có một số thuộc tính để điều khiển sự nhìn và cảm nhận và các tính năng đa dạng của sự điều khiển:
| Thuộc tính | Miêu tả |
|---|---|
| autoplay | Thuộc tính logic này nếu được xác định trước, video sẽ tự động bắt đầu chơi lại (playback) ngay sau khi nó có thể thực hiện mà không dừng lại để hoàn thành việc tải dữ liệu. |
| autobuffer | Thuộc tính logic này nếu được định cấu hình, video sẽ tự động bắt đầu đệm ngay cả khi nó không được thiết lập để tự động chơi. |
| controls | Nếu thuộc tính này có mặt, nó sẽ cho phép người sử dụng để điều khiển video phát lại sau, bao gồm âm lượng, chơi lại từ đầu và dừng/khôi phục lại sự phát lại. |
| height | Thuộc tính này xác định chiều cao khu vực hiển thị của video, bằng đơn vị CSS pixel. |
| loop | Thuộc tính logic này nếu được xác định, sẽ cho phép video tự động playback từ đầu sau khi kết thúc. |
| preload | Thuộc tính này xác định video sẽ được tải tại trang tải, và sẵn sàng chạy. Bị bỏ qua nếu autoplay có mặt. |
| poster | Đây là một URL của một hình ảnh để hiển thị cho tới khi người sử dụng chơi hoặc chơi lại từ đầu. |
| src | URL của video được nhúng. Nó là tùy ý; bạn có thể thay thế cho sử dụng phần tử <source> trong khối video để xác định video để nhúng. |
| awidth | Thuộc tính này xác định độ rộng khu vực hiển thị của video, bằng đơn vị CSS pixel. |
Nhúng Audio
HTML5 hỗ trợ thẻ <audio> mà được sử dụng để nhúng nội dung âm thanh trong một tài liệu HTML hoặc XHTML như sau:
<audio src="foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>
Chi tiết kỹ thuật bản phác thảo HTML5 hiện tại không xác định định dạng audio nào mà trình duyệt nên hỗ trợ trong thẻ audio. Nhưng các định dạng audio được sử dụng phổ biến nhất là ogg, mp3 và wav.
Bạn có thể sử dụng thẻ <source> để xác định đa phương tiện cùng với kiểu media và nhiều thuộc tính khác. Một phần tử audio cho phép nhiều phần tử source và trình duyệt sẽ sử dụng định dạng mà nó nhận ra đầu tiên:
<!DOCTYPE HTML>
<html>
<body>
<audio controls autoplay>
<source src="http://www.vietjack.com/html5/audio.ogg" type="audio/ogg" />
<source src="http://www.vietjack.com/html5/audio.wav" type="audio/wav" />
Your browser does not support the <audio> element.
</audio>
</body>
</html>
Ví dụ trên sẽ cho kết quả:
Các thuộc tính của Audio
Thẻ HTML5 audio có thể có một số thuộc tính để điều khiển sự nhìn và cảm nhận và các tính năng đa dạng khác của điều khiển:
| Thuộc tính | Miêu tả |
|---|---|
| autoplay | Thuộc tính logic này nếu được xác định trước, audio sẽ tự động bắt đầu playback ngay sau khi nó có thể thực hiện mà không dừng lại để hoàn thành việc tải dữ liệu. |
| autobuffer | Thuộc tính logic này nếu được định cấu hình, audio sẽ tự động bắt đầu đệm ngay cả khi nó không được thiết lập để tự động chơi. |
| controls | Nếu thuộc tính này có mặt, nó sẽ cho phép người sử dụng để điều khiển audio phát lại sau, bao gồm âm lượng, chơi lại từ đầu và dừng/khôi phục lại sự phát lại. |
| loop | Thuộc tính logic này nếu được xác định, sẽ cho phép audio tự động chơi lại từ đầu sau khi kết thúc. |
| preload | Thuộc tính này xác định audio sẽ được tải tại trang tải, và sẵn sàng chạy. Bị bỏ qua nếu autoplay có mặt. |
| src | URL của audio được nhúng. Nó là tùy ý; bạn có thể thay thế cho sử dụng phần tử <source> trong khối video để xác định video để nhúng. |
Xử lý các sự kiện của Media
Các thẻ HTML5 audio và video có thể có một số thuộc tính để điều khiển các tính năng đa dạng bơi sử dụng Javascript:
| Sự kiện | Miêu tả |
|---|---|
| abort | Sự kiện này được tạo khi playback bị bở dở. |
| canplay | Sự kiện này được tạo khi đủ dữ liệu có sẵn mà đa phương tiện có thể được chơi. |
| ended | Sự kiện này được tạo khi playback hoàn thành. |
| error | Sự kiện này được tạo khi một lỗi xảy ra |
| loadeddata | Sự kiện này được tạo khi Frame đầu tiên của media đã hoàn thành tải. |
| loadstart | Sự kiện này được tạo khi quá trình tải của media bắt đầu. |
| pause | Sự kiện này được tạo khi playback bị dừng. |
| play | Sự kiện này được tạo khi playback bắt đầu hoặc khôi phục. |
| progress | Sự kiện này được tạo định kỳ để thông báo tiến trình của việc tải media. |
| ratechange | Sự kiện này được tạo khi tốc độ playback thay đổi. |
| seeked | Sự kiện này được tạo khi một hoạt động seek hoàn thành. |
| seeking | Sự kiện này được tạo khi một hoạt động seek bắt đầu. |
| suspend | Sự kiện này được tạo khi việc tải media bị hoãn. |
| volumechange | Sự kiện này được tạo khi âm lượng audio thay đổi |
| waiting | Sự kiện này được tạo khi hoạt động được yêu cầu (ví dụ như playback) bị trì hoãn để đợi hoạt động khác kết thúc (ví dụ như hoạt động seek). |
Sau đây là ví dụ mà cho phép play một video đã cho:
<!DOCTYPE HTML>
<head>
<script type="text/javascript">
function PlayVideo(){
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<html>
<body>
<form>
<video awidth="300" height="200" src="http://www.vietjack.com/html5/foo.mp4">
Your browser does not support the <video> element.
</video>
<input type="button" onclick="PlayVideo();" value="Play"/>
</form>
</body>
</html>
Ví dụ trên sẽ cho kết quả:
Định cấu hình Server cho kiểu media
Theo mặc định thì hầu hết Server không phục vụ kiểu phương tiện Ogg hoặc mp4 với các kiểu MIME chính xác, vì thế bạn cần bổ sung định cấu hình chính xác cho chúng:
AddType audio/ogg .oga AddType audio/wav .wav AddType video/ogg .ogv .ogg AddType video/mp4 .mp4
Loạt bài hướng dẫn học lập trình HTML5 cơ bản và nâng cao của chúng tôi dựa trên nguồn tài liệu của: Tutorialspoint.com
Follow fanpage của team hoặc facebook cá nhân Nguyễn Thanh Tuyền để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.
Bài học HTML5 phổ biến khác tại vietjack.com:
