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> not support the <video> element. </video> Your browser does 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> - 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 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. width 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> <audio> element. </audio> Your browser does not support the 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> 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 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 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 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> Đị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