HTML5 - Âm thanh & Video
Các tính năng của HTML5 bao gồm hỗ trợ âm thanh và video gốc mà không cần Flash.
Các thẻ <audio> và <video> trong HTML5 giúp việc thêm phương tiện vào trang web trở nên đơn giản. Bạn cần đặtsrc để xác định nguồn phương tiện và bao gồm thuộc tính điều khiển để người dùng có thể phát và tạm dừng phương tiện.
Nhúng video
Đây là hình thức đơn giản nhất để nhúng tệp video vào trang web của bạn -
<video src = "foo.mp4" width = "300" height = "200" controls>
Your browser does not support the <video> element.
</video>Đặc tả bản nháp HTML5 hiện tại không chỉ định trình duyệt định dạng video nào sẽ hỗ trợ trong thẻ video. Nhưng hầu hết các định dạng video được sử dụng phổ biến là -
Ogg - Các tệp Ogg với codec video Thedora và codec âm thanh Vorbis.
mpeg4 - Các tệp MPEG4 với codec video H.264 và codec âm thanh AAC.
Bạn có thể sử dụng thẻ <source> để chỉ định phương tiện cùng với loại phương tiện và nhiều thuộc tính khác. Phần tử video cho phép nhiều phần tử nguồn và trình duyệt sẽ sử dụng định dạng được nhận dạng đầu tiên -
<!DOCTYPE HTML>
<html>
<body>
<video width = "300" height = "200" controls autoplay>
<source src = "/html5/foo.ogg" type ="video/ogg" />
<source src = "/html5/foo.mp4" type = "video/mp4" />
Your browser does not support the <video> element.
</video>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Đặc tả thuộc tính video
Thẻ video HTML5 có thể có một số thuộc tính để kiểm soát giao diện và các chức năng khác nhau của điều khiển -
| Sr.No. | Thuộc tính & Mô tả |
|---|---|
| 1 | autoplay Thuộc tính Boolean này nếu được chỉ định, video sẽ tự động bắt đầu phát lại ngay khi có thể làm như vậy mà không dừng lại để hoàn tất quá trình tải dữ liệu. |
| 2 | autobuffer Thuộc tính Boolean này nếu được chỉ định, video sẽ tự động bắt đầu lưu vào bộ đệm ngay cả khi nó không được đặt để tự động phát. |
| 3 | controls Nếu thuộc tính này có mặt, nó sẽ cho phép người dùng kiểm soát phát lại video, bao gồm âm lượng, tìm kiếm và tạm dừng / tiếp tục phát lại. |
| 4 | height Thuộc tính này chỉ định chiều cao của vùng hiển thị của video, tính bằng pixel CSS. |
| 5 | loop Thuộc tính Boolean này nếu được chỉ định, sẽ cho phép video tự động quay lại phần bắt đầu sau khi đến phần cuối. |
| 6 | preload Thuộc tính này chỉ định rằng video sẽ được tải khi tải trang và sẵn sàng chạy. Bỏ qua nếu tính năng tự động phát hiện có. |
| 7 | poster Đây là URL của hình ảnh để hiển thị cho đến khi người dùng phát hoặc tìm kiếm. |
| số 8 | src URL của video để nhúng. Đây là tùy chọn; thay vào đó, bạn có thể sử dụng phần tử <source> trong khối video để chỉ định video để nhúng. |
| 9 | width Thuộc tính này chỉ định chiều rộng của vùng hiển thị của video, tính bằng pixel CSS. |
Nhúng âm thanh
HTML5 hỗ trợ thẻ <audio> được sử dụng để nhúng nội dung âm thanh vào tài liệu HTML hoặc XHTML như sau.
<audio src = "foo.wav" controls autoplay>
Your browser does not support the <audio> element.
</audio>Đặc tả bản nháp HTML5 hiện tại không chỉ định trình duyệt định dạng âm thanh nào sẽ hỗ trợ trong thẻ âm thanh. Nhưng hầu hết các định dạng âm thanh thường được sử dụng làogg, mp3 và wav.
Bạn có thể sử dụng <source & ggt; để chỉ định phương tiện cùng với loại phương tiện và nhiều thuộc tính khác. Một phần tử âm thanh cho phép nhiều phần tử nguồn và trình duyệt sẽ sử dụng định dạng được nhận dạng đầu tiên -
<!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>Điều này sẽ tạo ra kết quả sau:
Đặc điểm thuộc tính âm thanh
Thẻ âm thanh HTML5 có thể có một số thuộc tính để kiểm soát giao diện và các chức năng khác nhau của điều khiển -
| Sr.No. | Thuộc tính & Mô tả |
|---|---|
| 1 | autoplay Thuộc tính Boolean này nếu được chỉ định, âm thanh sẽ tự động bắt đầu phát lại ngay khi nó có thể làm như vậy mà không cần dừng lại để hoàn tất quá trình tải dữ liệu. |
| 2 | autobuffer Thuộc tính Boolean này nếu được chỉ định, âm thanh sẽ tự động bắt đầu lưu vào bộ đệm ngay cả khi nó không được đặt để tự động phát. |
| 3 | controls Nếu thuộc tính này xuất hiện, nó sẽ cho phép người dùng điều khiển phát lại âm thanh, bao gồm âm lượng, tìm kiếm và tạm dừng / tiếp tục phát lại. |
| 4 | loop Thuộc tính Boolean này nếu được chỉ định, sẽ cho phép âm thanh tự động tìm kiếm trở lại phần đầu sau khi đến phần cuối. |
| 5 | preload Thuộc tính này chỉ định rằng âm thanh sẽ được tải khi tải trang và sẵn sàng chạy. Bỏ qua nếu tính năng tự động phát hiện có. |
| 6 | src URL của âm thanh để nhúng. Đây là tùy chọn; thay vào đó, bạn có thể sử dụng phần tử <source> trong khối video để chỉ định video để nhúng. |
Xử lý sự kiện truyền thông
Thẻ âm thanh và video HTML5 có thể có một số thuộc tính để kiểm soát các chức năng khác nhau của điều khiển bằng JavaScript -
| Không. | Sự kiện & Mô tả |
|---|---|
| 1 | abort Sự kiện này được tạo ra khi quá trình phát lại bị hủy bỏ. |
| 2 | canplay Sự kiện này được tạo khi có đủ dữ liệu để có thể phát phương tiện. |
| 3 | ended Sự kiện này được tạo khi phát lại hoàn tất. |
| 4 | error Sự kiện này được tạo ra khi xảy ra lỗi. |
| 5 | loadeddata Sự kiện này được tạo khi khung đầu tiên của phương tiện tải xong. |
| 6 | loadstart Sự kiện này được tạo ra khi quá trình tải phương tiện bắt đầu. |
| 7 | pause Sự kiện này được tạo ra khi quá trình phát bị tạm dừng. |
| số 8 | play Sự kiện này được tạo khi phát lại bắt đầu hoặc tiếp tục. |
| 9 | progress Sự kiện này được tạo định kỳ để thông báo tiến trình tải xuống phương tiện. |
| 10 | ratechange Sự kiện này được tạo ra khi tốc độ phát lại thay đổi. |
| 11 | seeked Sự kiện này được tạo khi hoạt động tìm kiếm hoàn tất. |
| 12 | seeking Sự kiện này được tạo ra khi hoạt động tìm kiếm bắt đầu. |
| 13 | suspend Sự kiện này được tạo ra khi quá trình tải phương tiện bị tạm dừng. |
| 14 | volumechange Sự kiện này được tạo khi âm lượng thay đổi. |
| 15 | waiting Sự kiện này được tạo ra khi thao tác được yêu cầu (chẳng hạn như phát lại) bị trì hoãn trong khi chờ hoàn thành một thao tác khác (chẳng hạn như tìm kiếm). |
Sau đây là ví dụ cho phép phát video đã cho:
<!DOCTYPE HTML>
<html>
<head>
<script type = "text/javascript">
function PlayVideo() {
var v = document.getElementsByTagName("video")[0];
v.play();
}
</script>
</head>
<body>
<form>
<video width = "300" height = "200" src = "/html5/foo.mp4">
Your browser does not support the video element.
</video>
<br />
<input type = "button" onclick = "PlayVideo();" value = "Play"/>
</form>
</body>
</html>Điều này sẽ tạo ra kết quả sau:
Định cấu hình máy chủ cho loại phương tiện
Theo mặc định, hầu hết các máy chủ không phân phát phương tiện Ogg hoặc mp4 với các loại MIME chính xác, vì vậy, bạn có thể cần thêm cấu hình thích hợp cho việc này.
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4