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.
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 |
Đư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
Làm thế nào để vượt qua đối thủ cạnh tranh?
Bạn cần website để giới thiệu dịch vụ?
Cho đến lúc này, điều mà bạn đang quan tâm có lẽ là muốn tìm hiểu thêm về dịch vụ thiết kế website và Công ty chúng tôi?
SỞ HỮU NGAY WEB CHUYÊN NGHIỆP TẠI ADC VIỆT NAM ĐỂ VƯỢT QUA ĐỐI THỦ NGAY HÔM NAY!!!
Tổng đài tư vấn miễn phí
CÔNG TY CP GIẢI PHÁP VÀ PHÁT TRIỂN PHẦN MỀM ADC SOFTWARE
Số 1, LK 11A Làng Việt Kiều Châu Âu, KĐT Mỗ Lao, P Mỗ Lao, Hà Đông, HN
(024).3783.5639 - (024).3783.5640
Uy tín đã được khẳng định bởi trên 900 khách hàng và hơn 1000 dự án đã được hoàn thành. Với 70% dự án tại Việt Nam, 10% dự án tại Mỹ và 20% dự án tại thị trường Châu Âu. Hơn 95% khách hàng hài lòng với dịch vụ và mong muốn hợp tác tiếp và sử dụng các dịch vụ khác.
Đội ngũ nhân viên nhiệt tình chu đáo. Bảo hành sản phẩm 3 năm, sau 3 năm hỗ trợ nhiệt tình miễn phí.
Dự án chỉ kết thúc khi nào khách hàng cảm thấy hài lòng.
Đội ngũ kĩ sư có trình độ cao được đào tạo từ các trường đại học danh tiếng Việt Nam và nước ngoài. Đảm bảo cho dự án được tiến hành nhanh nhất, chất lượng nhất.
ĐĂNG KÝ TƯ VẤNMIỄN PHÍ
Tư vấn Thiết kế website 24/24
0983 773 986
Tư vấn Thiết kế website trong giờ hành chính
0904 134 445
Gửi yêu cầu tới ADC
info@adcvietnam.net
Đang tải...
![[Mẹo] Hướng dẫn chi tiết cách đăng kí Google Maps cho doanh nghiệp](/resize/280/anhtincongnghe/huong-dan-cach-dang-ki-google-maps-cho-doanh-nghiep-4x280x4.jpg)
![[Mẹo] Hướng dẫn cách lấy Google Maps API key mới nhất](/resize/280/anhtincongnghe/google-mapx280x4.jpg)
