Audio và video cách xử lý trong html5

Đăng bởi: mynhan , 18/07/2020 15:06

HTML5 có không ít các thẻ mới và cũng khá nhiều người lúng túng khi phải làm việc 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.

Audio và video cách xử lý trong html5

1. Thẻ < audio >< /audio >

HTML5 hỗ trợ thẻ 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ẻ .

Và bạn được quyền nhúng một hay nhiều tệp âm thanh vào cùng một ,ví dụ:

         

                     

                     

                     Your browser does not support the

         

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 >

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 Windows10, 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 đổ
iWaiting 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!

Có thể bạn quan tâm

Apache Là Gì? Tổng Hợp Các Kiến Thức Cần Biết Về Apache

Ngày đăng: 05/12/2020

HTML5 có không ít các thẻ mới và cũng khá nhiều người lúng túng khi phải làm việc 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, ...

Tại sao khi thiết kế giao diện website cần tối ưu hóa trên di động?

Ngày đăng: 05/12/2020

HTML5 có không ít các thẻ mới và cũng khá nhiều người lúng túng khi phải làm việc 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, ...

Những lưu ý quan trọng để xây dựng blog doanh nghiệp hiệu quả

Ngày đăng: 05/12/2020

HTML5 có không ít các thẻ mới và cũng khá nhiều người lúng túng khi phải làm việc 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, ...

Tạo Blog, Một Trong Những Cách Tăng Traffic Tự Nhiên

Ngày đăng: 05/12/2020

HTML5 có không ít các thẻ mới và cũng khá nhiều người lúng túng khi phải làm việc 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, ...

10 cách tăng tốc độ trang web hiệu quả. NHANH – GỌN – ĐƠN GIẢN

Ngày đăng: 05/12/2020

HTML5 có không ít các thẻ mới và cũng khá nhiều người lúng túng khi phải làm việc 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, ...

BForum - The world's leading Blockchain Forum mywebsite.vn
Mua web ngay