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 để 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"  width="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  width="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ínhMiêu tả
autoplayThuộ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.
autobufferThuộ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.
controlsNế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.
heightThuộ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.
loopThuộ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.
preloadThuộ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.
srcURL 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.
widthThuộ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, mp3wav.

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ínhMiêu tả
autoplayThuộ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.
autobufferThuộ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.
controlsNế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.
loopThuộ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.
preloadThuộ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.
srcURL 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ệnMiêu tả
abortSự kiện này được tạo khi playback bị bở dở.
canplaySự 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.
endedSự kiện này được tạo khi playback hoàn thành.
errorSự kiện này được tạo khi một lỗi xảy ra
loadeddataSự kiện này được tạo khi Frame đầu tiên của media đã hoàn thành tải.
loadstartSự kiện này được tạo khi quá trình tải của media bắt đầu.
pauseSự kiện này được tạo khi playback bị dừng.
playSự kiện này được tạo khi playback bắt đầu hoặc khôi phục.
progressSự kiện này được tạo định kỳ để thông báo tiến trình của việc tải media.
ratechangeSự kiện này được tạo khi tốc độ playback thay đổi.
seekedSự kiện này được tạo khi một hoạt động seek hoàn thành.
seekingSự kiện này được tạo khi một hoạt động seek bắt đầu.
suspendSự kiện này được tạo khi việc tải media bị hoãn.
volumechangeSự kiện này được tạo khi âm lượng audio thay đổi
waitingSự 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  width="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 https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để 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.