Làm cách nào để nhúng âm thanh và video vào html?

Trước đây, việc chèn âm thanh vào một trang web không hề dễ dàng vì các trình duyệt web không có tiêu chuẩn thống nhất để xác định các tệp phương tiện được nhúng như âm thanh

Trong chương này, chúng tôi sẽ trình bày một số cách để nhúng âm thanh vào trang web của bạn, từ việc sử dụng một liên kết đơn giản đến việc sử dụng phần tử HTML5 mới nhất

Sử dụng Phần tử âm thanh HTML5

Phần tử HTML5 mới được giới thiệu cung cấp một cách tiêu chuẩn để nhúng âm thanh vào các trang web. Tuy nhiên, yếu tố âm thanh tương đối mới nhưng nó hoạt động trong hầu hết các trình duyệt web hiện đại

Ví dụ sau chỉ cần chèn âm thanh vào tài liệu HTML5, sử dụng bộ điều khiển mặc định của trình duyệt, với một nguồn được xác định bởi thuộc tính

    
    
    Your browser does not support the HTML5 Audio element.

    Your browser does not support the HTML5 Audio element.

Âm thanh, sử dụng bộ điều khiển mặc định của trình duyệt, với các nguồn thay thế

    
    
    Your browser does not support the HTML5 Audio element.

Bản nhạc 'ogg' trong ví dụ trên hoạt động trong Firefox, Opera và Chrome, trong khi bản nhạc tương tự ở định dạng 'mp3' được thêm vào để làm cho âm thanh hoạt động trong Internet Explorer và Safari

Âm thanh và video có thể giúp thêm nội dung tương tác vào trang web của bạn. Phần tốt là HTML5 cung cấp cách dễ dàng để nhúng các tệp âm thanh và video. Nó có trình phát mặc định và hầu hết các trình duyệt hiện đại đều hỗ trợ trình phát HTML. Trong bài viết này, chúng tôi sẽ giải thích cách nhúng các tệp âm thanh và video bằng HTML5

Nghe âm thanh của bạn

The

<. DOCTYPE> được sử dụng để xác định phiên bản HTML

• <. DOCTYPE html> được sử dụng cho HTML5
• Đối với HTML4, định nghĩa loại tài liệu phải là

“-//W3C//DTD HTML 4. 01 Chuyển tiếp//EN”

“http. //www. w3. org/TR/html4/loose. dtd”>

Rất nên xác định loại tài liệu trong tài liệu HTML để trình duyệt có thể theo phiên bản và hiển thị chính xác

• Để đảm bảo hỗ trợ trong tất cả các trình duyệt web, bạn nên sử dụng cùng một tệp âm thanh với. mp3 và. định dạng ogg sử dụng thuộc tính “nguồn”
• Thuộc tính “điều khiển” hiển thị điều khiển trình phát âm thanh
• Thuộc tính “autoplay” bắt đầu tự động phát nhạc khi trình phát được tải
• Thuộc tính “loop” được sử dụng để lặp liên tục tệp âm thanh

Trình phát âm thanh sẽ như bên dưới trên trình duyệt Google Chrome

Không nên sử dụng thuộc tính “autoplay” trừ khi bạn cần, nếu không, việc tự động phát âm thanh có thể làm phiền trải nghiệm người dùng. Tốt hơn là cung cấp quyền kiểm soát cho người dùng

Cũng xem video của bạn…

HTML5 cũng cho phép bạn nhúng video vào trang của mình bằng phần tử. Tương tự như audio, phần tử video cũng có các thuộc tính để kiểm soát việc hiển thị của trình phát trên trình duyệt. Nếu trình duyệt không hỗ trợ phần tử video HTML5 thì thông báo văn bản xuất hiện giữa các thẻ … sẽ được hiển thị trên trình duyệt. Vì vậy, nên thêm một số văn bản hữu ích vào thẻ video

Trước đó, các công nghệ web gốc như HTML không cho phép nhúng video và âm thanh trên Web. Các công nghệ dựa trên plugin đã trở nên phổ biến để xử lý những nội dung như vậy, nhưng chúng có nhiều vấn đề, bao gồm cả việc không hoạt động tốt với các tính năng HTML/CSS, các vấn đề về bảo mật và khả năng truy cập. Sau đó, đặc tả HTML5 đã giới thiệu các tính năng như vậy với các phần tử và

Phần tử được sử dụng để nhúng tệp âm thanh vào trang web và phần tử được sử dụng để nhúng video

Cách thêm âm thanh trên trang web

Trước HTML5, các tệp âm thanh đã được thêm vào trang bằng cách tích hợp âm thanh nền với sự trợ giúp của thẻ. Tệp đã được phát trong khi trang được xem và người dùng không thể tắt âm thanh. Trong HTML5, chúng tôi có thể nhúng các tệp âm thanh bằng thẻ và không cần kết nối các plugin của bên thứ ba. Phần tử âm thanh có thể được kiểm soát bằng HTML hoặc Javascript và được tạo kiểu bằng CSS

Trong mã, thuộc tính src đề cập đến URL của tệp âm thanh và thuộc tính controls thêm bảng điều khiển (nút khởi chạy, thanh cuộn, bộ điều chỉnh âm lượng)

Vì không phải tất cả các trình duyệt đều hỗ trợ tất cả các định dạng âm thanh, tệp âm thanh được mã hóa/giải mã bằng codec âm thanh (thiết bị điện tử kỹ thuật số hoặc ứng dụng phần mềm dựa trên máy tính hỗ trợ nén và giải nén dữ liệu âm thanh kỹ thuật số). Tất cả các định dạng của tệp âm thanh được thêm đồng thời thông qua phần tử có thuộc tính src

Khi xác định các định dạng tệp khác nhau, chúng tôi khuyên bạn nên xác định loại MIME cho từng tệp để cho phép trình duyệt bản địa hóa tệp được hỗ trợ. Loại MIME được xác định bởi sự trợ giúp của thuộc tính type

 
   Title of the document
 
 
   
     
     
   
   
Click the play button
 

Các định dạng âm thanh phổ biến nhất là những định dạng sau

MP3 – định dạng âm thanh phổ biến nhất, sử dụng nén mất dữ liệu và cho phép giảm kích thước tệp. Bất chấp sự phổ biến của người dùng, các công ty truyền hình và đài phát thanh sử dụng các codec ISO-MPEG hiện đại hơn, như AAC hoặc MPEG-H

AAC (Advanced Audio Codec) — codec đóng, tương tự MP3, nhưng so với loại sau, nó cung cấp chất lượng cao hơn với cùng mức độ nén hoặc mạnh hơn

Ogg Vorbis— định dạng miễn phí với mã mở, được hỗ trợ trong Firefox, Opera và Chrome. Cung cấp âm thanh chất lượng tốt, nhưng không được người chơi thiết bị hỗ trợ đầy đủ

Trong phiên bản HTML trước, video được nhúng vào trang thông qua plugin của bên thứ ba, chẳng hạn như QuickTime, RealPlayer hoặc Flash. HTML5 có một thẻ mới, dùng để chèn video vào trang web

Trong một mã, nó trông như thế này

Thuộc tính src cho biết URL của tệp và thuộc tính controls được sử dụng để hiển thị các phần tử điều khiển

Mỗi trình duyệt hỗ trợ codec cụ thể, đó là lý do tại sao, để cung cấp khả năng phát lại video trong tất cả các trình duyệt, tệp video phải được đặt ở một số định dạng. Giống như trong trường hợp tệp âm thanh, tất cả các định dạng của tệp video đều được bao gồm trong

Để đảm bảo rằng trình duyệt có thể xử lý các tệp video, hãy tạo một tệp. htaccess trong thư mục chứa trang web xác định các loại MIME cho video

  
    Title of the document
    
  
  
    
      
      
    
    
Some information about video
  

Ngày nay có 3 định dạng video cơ bản. MP4/MPEG-4, OGG và WebM +. Để nén dữ liệu video và phát lại chúng, chúng tôi sử dụng codec

Đối với tệp video có định dạng MPEG-4, Н. 264 codec video và codec âm thanh ААС được sử dụng. Nếu bạn muốn sử dụng codec, bạn phải có giấy phép

Đối với tệp video Ogg, hãy sử dụng codec video Theora và codec âm thanh Vorbis với mã mở

Đối với các tệp video ở định dạng WebM +, hãy sử dụng codec video VP8 và codec âm thanh Vorbis. Trong trường hợp này, không cần giấy phép

Hầu hết các máy chủ không cung cấp phương tiện Ogg hoặc mp4 với các loại MIME chính xác. Đối với điều này, bạn có thể cần phải thêm cấu hình thích hợp

AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4

Phụ đề và tiêu đề được thêm vào tệp âm thanh và video thông qua phần tử, được sử dụng làm phần tử con củavà

________số 8

Để căn chỉnh trình phát video trên trang, hãy đặt phần tử vào

vùng chứa, gán cho nó một lớp, sau đó xác định chiều rộng và chiều cao cho nó, tương ứng với kích thước video của bạn

Chúng tôi có thể phát cả âm thanh và video trong HTML không?

Làm cách nào để nhúng thẻ âm thanh và video vào HTML5?

Làm cách nào để chèn âm thanh và video vào HTML bằng notepad?

Mã HTML nào phù hợp để nhúng âm thanh và video trong trang web?