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, mp3wav.

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