HTML5 có hỗ trợ thẻ âm thanh không?

Có rất nhiều cách để thêm và phát video trong trang web, cách đây vài năm, cách duy nhất là sử dụng các plugin bên ngoài như Flash, cuối cùng HTML5 đã giới thiệu thẻ để giúp công việc của nhà phát triển trở nên dễ dàng và có cách tiêu chuẩn để nhúng video vào tệp HTML

Thẻ hoạt động tương tự như thẻ, một hoặc nhiều nguồn có thể được đặt giữa mở và đóng thẻ để bao quát khả năng tương thích trình duyệt rộng hơn

Có 3 định dạng video được hỗ trợ. MP4, WebM và Ogg. MP4 được hỗ trợ trong tất cả các trình duyệt hiện đại trong khi định dạng WebM và Ogg vẫn còn một số vấn đề không tương thích với các phiên bản Safari và Internet Explorer cũ hơn

Các thuộc tính của thẻ rất giống với thuộc tính trong thẻ âm thanh

- điều khiển hiển thị bảng điều khiển với nút phát/tạm dừng, nút toàn màn hình và âm lượng
- tự động phát chỉ định cho trình duyệt phát video ngay khi được tải
- chiều rộng và chiều cao được sử dụng để đặt kích thước của video tính bằng pixel
- vòng lặp được sử dụng khi chúng tôi muốn bắt đầu lại video ngay sau khi kết thúc
- tắt tiếng phát video ở chế độ tắt tiếng như mặc định, người dùng có thể bật âm thanh thông qua bảng điều khiển
- tải trước xác định thời điểm tải video sẽ được thực hiện thông qua các giá trị tự động, không có và siêu dữ liệu
- áp phích xác định hình ảnh sẽ được hiển thị trong khi video đang tải, một URL cần được đặt làm giá trị của thuộc tính

Điều quan trọng cần hiểu là trình duyệt không thể phát bất kỳ tệp video nào trừ khi máy tính cài đặt codec video thích hợp, may mắn là trong thời đại Netflix này, tất cả các máy tính đều đã cài đặt codec âm thanh/video hiện đại nhất

HTML5 đã cải thiện việc nhúng âm thanh và video bằng cách cung cấp hỗ trợ riêng cho nhiều loại tệp khác nhau. Trong hướng dẫn này, chúng tôi sẽ đề cập đến nhiều cách khác nhau để nhúng âm thanh và video, bao gồm khả năng tương thích của trình duyệt và các khung để hợp lý hóa khả năng tương thích giữa nhiều trình duyệt

Phát âm thanh

HTML5 đã giới thiệu thẻ , cũng như API JavaScript, cho phép trình duyệt phát âm thanh mà không cần plugin bên ngoài. Các codec được hỗ trợ nhiều nhất để phát âm thanh trong HTML5 là Ogg Vorbis, MP3 và Wav. Hiện tại không có codec nào phát trên tất cả các trình duyệt. Để tránh khả năng không tương thích với codec, HTML5 cho phép bạn chỉ định nhiều tệp nguồn. Trình duyệt tìm loại mime đầu tiên mà nó biết nó có thể hỗ trợ

Một triển khai đơn giản chỉ với một nguồn trông như thế này

Việc triển khai với nhiều nguồn trông như thế này

    
    
    Sorry, but your browser doesn't support audio.

Nếu trình duyệt không hỗ trợ phần tử âm thanh thì nó sẽ hiển thị thông báo “Xin lỗi, nhưng trình duyệt của bạn không hỗ trợ âm thanh. ”

Thư viện hữu ích

Thật không may, mặc dù đã bao gồm thẻ HTML5 , nhưng vẫn có một số khó khăn trong việc nhúng âm thanh và để âm thanh đó hoạt động trơn tru trên tất cả các trình duyệt và thiết bị

Xử lý nhiều thiết bị và trình duyệt được thực hiện dễ dàng hơn bằng cách sử dụng thư viện như Trình quản lý âm thanh 2 hoặc Buzz

Các thư viện này xử lý hầu hết các mâu thuẫn xung quanh việc nhúng âm thanh và cho phép bạn tập trung vào việc tạo các ứng dụng web tuyệt vời. Cả hai đều cung cấp sự xuống cấp nhẹ nhàng để xử lý các trình duyệt không phải HTML5

API Javascript

HTML5 Audio Javascript API cho phép kiểm soát tải và phát các tệp âm thanh theo chương trình. API rất đơn giản và cung cấp một cách mạnh mẽ để kiểm soát âm thanh được nhúng

Đây là một ví dụ đơn giản. Trong ví dụ này, chúng tôi sẽ thêm một bài hát, chuyển đến 30 giây trong bài hát và phát bài hát đó

var audioElem = document.createElement('audio');
audioElem.setAttribute('src', 'Crystal Castles - Untrust Us.ogg');
audioElem.currentTime = 30;
audioElem.play();

Truy xuất tên tệp và thời lượng

audioElement.src;
audioElement.duration;

Đọc thêm

Để có hướng dẫn tuyệt vời với mã mẫu giải thích cách làm việc với âm thanh trong trình duyệt, hãy xem hướng dẫn về âm thanh ThinkVitamin. Ngoài ra, Sân chơi của HTML5Rocks phải giúp bạn bắt đầu

Đang phát video

Tương tự như âm thanh, thẻ đã được giới thiệu trong thông số kỹ thuật HTML5, cho phép các nhà phát triển web khai thác khả năng phát video mà không cần phụ thuộc vào plugin của bên thứ ba. Hỗ trợ cho nhiều codec video/âm thanh khác nhau giữa các trình duyệt, vì vậy bạn bắt buộc phải lập kế hoạch cho tất cả các trình duyệt và thiết bị tiềm năng khi tạo ứng dụng web của mình

Thông tin tương thích trình duyệt cho , , và có thể được tìm thấy tại

Apple đã ra mắt một trang web giới thiệu các khả năng của Video HTML5. Nhiều bản trình diễn có sẵn tại html5video. tổ chức

Ở dạng đơn giản nhất, nhúng video HTML5 trông giống như ví dụ âm thanh ở trên. Đây là cách thêm video vào ứng dụng web của bạn

Vì không có tổ hợp codec và vùng chứa duy nhất nào được hỗ trợ trên tất cả các trình duyệt, nên bạn sẽ cần chỉ định nhiều nguồn. Trình duyệt sẽ bắt đầu ở luồng đầu tiên được liệt kê và duyệt qua tất cả chúng cho đến khi có thể phát thành công một luồng. Điều quan trọng là chỉ định trường

    
    
    Sorry, but your browser doesn't support audio.

0 khi nhúng video. Điều này cho trình duyệt biết loại vùng chứa cùng với thông tin về codec video và âm thanh. Nếu bạn không chỉ định trường loại, trình duyệt phải tải xuống một phần của từng video cho đến khi tìm thấy video có thể phát thành công

Một cuộc thảo luận sâu hơn về các loại và cú pháp có sẵn tại

Flash dự phòng

Nên bao gồm dự phòng cho Flash vì nó cho phép bạn nhúng video trên các trình duyệt có thể không hỗ trợ các loại nguồn video của bạn. Việc thêm hỗ trợ vào dự phòng cho Flash rất đơn giản. Sử dụng ví dụ trên, chúng tôi có thể thêm hỗ trợ cho Flash bằng cách thêm nó làm tùy chọn cuối cùng

tính tương thích của trình duyệt web

Để có khả năng tương thích tối đa, nên bao gồm

• Nguồn video sử dụng H. 264 video cơ bản và âm thanh AAC “độ phức tạp thấp” trong bộ chứa MP4
• Nguồn video sử dụng WebM (VP8 + Vorbis)
• Nguồn video sử dụng video Theora và âm thanh Vorbis trong vùng chứa Ogg
• Dự phòng cho trình phát video dựa trên Flash

Hầu hết các nhà phát triển muốn tận dụng sức mạnh của video HTML5 sẽ không chỉ xem xét sự khác biệt của trình duyệt mà còn cả khả năng tương thích ngược đối với các trình duyệt không hỗ trợ thông số kỹ thuật HTML5

May mắn thay, các thư viện như VideoJS và MediaElement. js đơn giản hóa và hợp lý hóa quy trình nhúng video trên web

Đọc thêm

Để biết hướng dẫn về cách hoạt động của thẻ và cách bạn có thể bắt đầu, hãy xemdivingohtml5. Nếu bạn muốn tham gia ngay, Sân chơi của HTML5Rocks rất tuyệt

Chúng tôi có thể phát các tệp âm thanh trong HTML5 không?

Thẻ âm thanh HTML5 là gì?

HTML5 có thể phát các tệp WAV không?

Loại tệp âm thanh nào không được HTML hỗ trợ?