Thứ Hai, 23 tháng 12, 2013
HTML5 video
Nhiều trang web hiện đại hiển thị video. HTML5 cung cấp một tiêu chuẩn cho cho họ.
Kiểm tra nếu trình duyệt của bạn hỗ trợ video HTML5
Video trên web
Cho đến nay, chưa có một tiêu chuẩn cho hiển thị một video / phim trên một trang web.
Hôm nay, hầu hết các video được hiển thị thông qua một plug-in (như đèn flash). Tuy nhiên, các trình duyệt khác nhau có thể có các plug-in khác nhau.
HTML5 xác định một nguyên tố mới trong đó quy định một cách tiêu chuẩn để nhúng một đoạn video / phim trên một trang web: các yếu tố <video>.
Hỗ trợ trình duyệt
Internet Explorer 9 +, Firefox, Opera, Chrome, và Safari hỗ trợ các yếu tố <video>.
Lưu ý: Internet Explorer 8 và các phiên bản trước đó, không hỗ trợ các yếu tố <video>.
HTML5 Video - Chương trình hoạt động
Để hiển thị một đoạn video trong HTML5, đây là tất cả các bạn cần:
Ví dụ
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Thử nó cho mình »
Thuộc tính kiểm soát thêm điều khiển video, như chơi, tạm dừng, và khối lượng.
Nó cũng là một ý tưởng tốt để luôn luôn bao gồm chiều rộng và chiều cao thuộc tính. Nếu chiều cao và chiều rộng được thiết lập, không gian cần thiết cho video được dành riêng khi trang web được tải. Tuy nhiên, nếu không có những thuộc tính, trình duyệt không biết kích thước của video, và không thể bảo lưu không gian phù hợp với nó. Hiệu quả sẽ được rằng cách bố trí trang sẽ thay đổi trong quá trình tải (trong khi tải video).
Bạn cũng nên chèn nội dung văn bản giữa các <video> và </ video> cho các trình duyệt không hỗ trợ các yếu tố <video>.
Các yếu tố <video> cho phép nhiều yếu tố <source>. yếu tố <source> thể liên kết đến các file video khác nhau. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.
Các định dạng video và hỗ trợ trình duyệt
Hiện nay, có 3 định dạng video được hỗ trợ cho các phần tử <video>: MP4, WebM và Ogg:
| Browser | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | NO Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4 | YES | YES |
| Safari | YES | NO | NO |
| Opera | NO | YES | YES |
- MP4 = MPEG 4 file với codec video H264 và định dạng âm thanh AAC
- WebM WebM = file với codec video VP8 và Vorbis audio codec
- Ogg = Ogg tập tin với bộ giải mã video Theora và Vorbis audio codec
Các loại MIME cho định dạng video
| Format | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 <video> - Phương pháp và tính DOM
HTML5 có các phương thức DOM, tài sản, và các sự kiện cho <video> và các yếu tố <audio>.
Những phương pháp, tài sản, và các sự kiện cho phép bạn thao tác <video> và các yếu tố <audio> sử dụng JavaScript.
Có nhiều phương pháp để chơi, tạm dừng, và tải, ví dụ và có tài sản (như thời gian và khối lượng). Ngoài ra còn có các sự kiện DOM có thể thông báo cho bạn khi các yếu tố <video> bắt đầu để chơi, tạm dừng, chấm dứt, vv
Ví dụ dưới đây minh họa, một cách đơn giản, làm thế nào để giải quyết một phần tử <video>, đọc và thiết lập các thuộc tính, và gọi các phương thức.
Ví dụ 1
Tạo ra chơi đơn giản / tạm dừng + thay đổi kích thước điều khiển cho một video:
Ví dụ trên gọi hai phương pháp: chơi () và tạm dừng (). Nó cũng sử dụng hai tính chất: bị tạm dừng và chiều rộng.
Thử nó cho mình »
Đăng ký:
Đăng Nhận xét (Atom)
Không có nhận xét nào:
Đăng nhận xét