Công ty thiết kế website
ADC Việt Nam

Xử lý audio và video trong html5

Như các bạn đã biết thì trong html5 có không ít các thẻ mới và cũng khá nhiều người đau đầu khi phải làm quen các thẻ này.

Hai trong những thẻ mới và đáng chú ý nhất của html5 là thẻ dùng để nhúng audio&video rất tiện lợi trong thiết kế website,thay vì phải sử dụng một ngôn ngữ khác để nhúng như trước đây.Trong bài này chúng ta sẽ tìm hiểu thêm về 2 thẻ trên.

Xử lý audio và video trong html5

1. Thẻ < audio >< /audio >

Html5 hỗ trợ thẻ <audio></audio> giúp người thiết kế nhúng nội dung âm thanh trong html hay xhtml với cấu trúc:

Hiện tại thì html5 chưa xác định rõ được các định dạng audio được hỗ trợ trong các trình duyệt khác nhau trong thẻ audio.Nhưng hiện tại chúng thường được sử dụng các định dạng: ogg ,mp3 ,wva.

Để nhúng 1 tệp tin định dạng audio cho trước bạn có thể sử dụng thẻ <source>.Và bạn được quyền nhúng một hay nhiều tệp âm thanh vào cùng một <audio></audio>,ví dụ:

<!DOCTYPE HTML>
<html>
<body>
   <audio controls autoplay>
       <source src="/html5/audio.ogg" type="audio/ogg" />
       <source src="/html5/audio.wav" type="audio/wav" />
       Your browser does not support the <audio> element.
   </audio>
</body>
</html>

Thuộc tính của thẻ audio:

Thẻ audio hỗ trợ một số thuộc tính để kiểm soát giao diện và chức năng khác nhau

Thuộc tính

Description(mô tả)

autoplay

Thuộc tính boolean,âm thanh sẽ tự động chạy mà không cần chờ tải hết dữ liệu

Autobuffer

Nếu thuộc tính này được thiết lập thì âm thanh sẽ tự động đệm ngay cả khi không thiết lập autoplay

Controls

Nếu thuộc tính này được thiết lập thì sẽ cho phép người sử dụng điều khiển playback,volume,tìm kiếm và pause/resume.

Loop

Nếu thuộc tính này được thiết lập nó cho phép âm thanh tự động chạy lại liên tục không ngừng

Preload

Đưa ra một số gợi ý cho trình duyệt mà người thiết kế web cho rằng sẽ cung cấp người dùng sự trải nghiệm tốt nhất.Các giá trị:none,auto,metadata.

src

Như đã giải thích bên trên.

2.Thẻ < video >< /video >

Ví dụ cơ bản giúp người thiết kế nhúng video vào trong một trang html5

< video src="foo.mp4"  width="300" height="200" controls >
    Your browser does not support the <video> element.   
< /video >

Hiện tại thì html5 chưa xác định rõ được các định dạng video được hỗ trợ trong các trình duyệt khác nhau trong thẻ audio.Nhưng hiện tại chúng thường được sử dụng các định dạng:ogg,mp4,WebM.

Trình duyệt

MP4

WebM

Ogg

IE

Yes

No

No

Chrome

Yes

Yes

Yes

Firefox

Firefox 21 chạy trên Windows 7, Windows 8, Windows Vista, và Android bây giờ đã hỗ trợ MP4

Yes

Yes

Opera

No

Yes

yes

Các thuộc tính của thẻ video:

Thuộc tính

Giá trị

Description(mô tả)

Autoplay

Autoplay

Tự động chạy ngay hay không

Controls

controls

Cho phép người sử dụng điều khiển playback,volume,tìm kiếm và pause/resume.

Height

pixel

Chiều cao cho video

Width

pixel

Chiều rộng cho video

Loop

Loop

cho phép âm thanh tự động chạy lại liên tục không ngừng

Muted

muted

Tắt bật âm thanh đầu ra

Src

URL

Địa chỉ video

Preload

auto
metadata
none

Đưa ra một số gợi ý cho trình duyệt mà người thiết kế web cho rằng sẽ cung cấp người dùng sự trải nghiệm tốt nhất

Poster

URL

Hình ảnh hiển thị trên video khi chưa chạy

Sự kiện trong media:

Âm thanh và video trong html5 có một số thuộc tính để điều khiển các chức năng khác nhau sử dụng Javascript:

Sự kiện

Description ( Mô tả )

Canplay

Sự kiện tạo ra khi dữ liệu đủ để phát

Ended

Sự kiện được tạo ra khi phát xong

Erorr

Sự kiện được tạo ra lúc xuất hiện lỗi

Loadeddata

Sự kiện được tạo ra khi frame đầu tiên load xong

Loadstart

Sự kiện được tạo ra khi load bắt đầu

Pause

Sự kiện được tạo ra khi dừng tệp đang phát

Play

Sự kiện được tạo ra bắt đầu phát hoặc tiếp tục phát

Progress

Sự kiện định kỳ thông báo tiến độ tải media

Ratechange

Sự kiện được tạo ra khi thay đổi tốc độ phát

Seeked

Sự kiện được tạo ra khi tìm kiếm hoàn tất

Seeking

Sự kiện được tạo ra khi tìm kiếm bắt đầu

Volumechange

Sự kiện được tạo ra khi âm lượng thay đổi

Waiting

Sự kiện được tạo ra khi bị trì hoãn

Ví dụ:

< !DOCTYPE HTML >
< head >
< script type="text/javascript" >
function PlayVideo(){
   var v = document.getElementsByTagName("video")[0];  
   v.play(); 
}

Ngoài kỹ thuật lập trình,để có thể thành công bạn nên định hướng chiến lược trước cho việc thiết kế website của mình.

Chúc bạn thành công!

>>> Giới thiệu và ứng dụng cơ bản về html5 trong thiết kế website

Bài viết " Xử lý audio và video trong html5 "
Công ty thiết kế website chuyên nghiệp ADC Việt Nam

Chia sẻ