- 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ộ
Trang 1Audio 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:
Trang 2Thuộ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
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:
Trang 3<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
Trang 4preload 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
Trang 5ratechange 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>
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