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 Show 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 Đ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 thanhHTML5 đã giới thiệu thẻ 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
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 íchThật không may, mặc dù đã bao gồm thẻ HTML5 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 JavascriptHTML5 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 đó
Truy xuất tên tệp và thời lượng
Đọ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 videoTương tự như âm thanh, thẻ 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 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òngNê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
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ẻ Chúng tôi có thể phát các tệp âm thanh trong HTML5 không?The HTML Thẻ âm thanh HTML5 là gì?Thẻ dùng để nhúng nội dung âm thanh vào tài liệu, chẳng hạn như nhạc hoặc các luồng âm thanh khác . Thẻ
HTML5 có thể phát các tệp WAV không?Các định dạng âm thanh sau đây được hỗ trợ bởi các tiêu chuẩn HTML. MP3. WAV
Loại tệp âm thanh nào không được HTML hỗ trợ?định dạng âm thanh aLaw không được thẻ âm thanh HTML5 hỗ trợ. |