Làm cách nào tôi có thể phát âm thanh và video trong html?

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à

  
    Title of the document
    
  
  
    
      
    
    

      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    
  

Để 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

Làm cách nào tôi có thể thêm video và phát trong HTML?

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

Thẻ nào được sử dụng cho âm thanh và video?

Tôi có thể phát âm thanh trong HTML không?