Thẻ video html hoạt động như thế nào?

Đặc tả HTML5 đã giới thiệu phần tử video với mục đích phát video, thay thế một phần phần tử đối tượng. Video HTML5 được những người tạo ra nó dự định trở thành cách tiêu chuẩn mới để hiển thị video trên web, thay vì tiêu chuẩn thực tế trước đây là sử dụng plugin Adobe Flash độc quyền, mặc dù việc áp dụng sớm bị cản trở do thiếu thỏa thuận về định dạng mã hóa video. . Kể từ năm 2020, video HTML5 là công nghệ phát lại video duy nhất được hỗ trợ rộng rãi trong các trình duyệt hiện đại, với plugin Flash đã bị loại bỏ dần

Lịch sử của nguyên tố[sửa]

Yếu tố bắt đầu được thảo luận bởi WHATWG vào tháng 10 năm 2006. Phần tử được đề xuất bởi Opera Software vào tháng 2 năm 2007. Opera cũng đã phát hành bản dựng xem trước được giới thiệu cùng ngày và một bản tuyên ngôn kêu gọi video trở thành công dân hạng nhất của web.

ví dụ phần tử [ chỉnh sửa ]

Đoạn mã HTML5 sau sẽ nhúng một video WebM vào một trang web

	This is fallback content to display for user agents that do not support the video tag.

Thuộc tính "điều khiển" cho phép giao diện người dùng của chính trình duyệt kiểm soát phát lại. Ngoài ra, có thể điều khiển phát lại bằng JavaScript mà nhà thiết kế web có thể sử dụng để tạo giao diện người dùng tùy chỉnh. Thuộc tính "áp phích" tùy chọn chỉ định một hình ảnh sẽ hiển thị ở vị trí của video trước khi bắt đầu phát lại. Mục đích của nó là đại diện cho video

Nhiều nguồn[sửa]

Hỗ trợ định dạng video khác nhau giữa các trình duyệt (xem bên dưới), vì vậy một trang web có thể cung cấp video ở nhiều định dạng. Đối với các tính năng khác, đôi khi trình duyệt đánh hơi được sử dụng, điều này có thể dễ bị lỗi. kiến thức về trình duyệt của bất kỳ nhà phát triển web nào chắc chắn sẽ không đầy đủ hoặc không cập nhật. Trình duyệt được đề cập "biết rõ nhất" những định dạng mà nó có thể sử dụng. Phần tử "video" hỗ trợ dự phòng thông qua đặc tả của nhiều nguồn. Sử dụng bất kỳ số lượng

như hình bên dưới, trình duyệt sẽ tự động chọn file tải về. Ngoài ra, có thể sử dụng hàm JavaScript canPlayType() để đạt được điều tương tự. Thuộc tính "type" chỉ định loại MIME và có thể là danh sách các codec, giúp trình duyệt xác định xem nó có thể giải mã tệp mà không bắt đầu tải xuống hay không. Loại MIME biểu thị định dạng vùng chứa của tệp và định dạng vùng chứa xác định việc diễn giải chuỗi codec. [7]

	
	
	
	
	

This is fallback content to display for user agents that do not support the video tag.

Các định dạng video và âm thanh được hỗ trợ[sửa | sửa mã nguồn]

Đặc tả HTML5 không chỉ định trình duyệt định dạng video và âm thanh nào sẽ hỗ trợ. Tác nhân người dùng được tự do hỗ trợ bất kỳ định dạng video nào mà họ cảm thấy phù hợp, nhưng tác giả nội dung không thể giả định rằng tất cả các tác nhân người dùng tuân thủ đều có thể truy cập bất kỳ video nào, vì tác nhân người dùng không có bộ định dạng video và âm thanh tối thiểu để hỗ trợ

Nhóm làm việc HTML5 cho rằng nên chỉ định ít nhất một định dạng video mà tất cả các tác nhân người dùng (trình duyệt) nên hỗ trợ. Định dạng lý tưởng trong vấn đề này sẽ

  • Có khả năng nén tốt, chất lượng hình ảnh tốt và sử dụng bộ xử lý giải mã thấp
  • Miễn phí bản quyền
  • Ngoài bộ giải mã phần mềm, nên tồn tại bộ giải mã video phần cứng cho định dạng này vì nhiều bộ xử lý nhúng không có hiệu suất để giải mã video

Ban đầu, Ogg Theora là định dạng video tiêu chuẩn được đề xuất trong HTML5, vì nó không bị ảnh hưởng bởi bất kỳ bằng sáng chế nào đã biết. Nhưng vào ngày 10 tháng 12 năm 2007, đặc tả HTML5 đã được cập nhật, thay thế tham chiếu đến các định dạng cụ thể

Tác nhân người dùng phải hỗ trợ video Theora và âm thanh Vorbis, cũng như định dạng vùng chứa Ogg

với một trình giữ chỗ

Sẽ rất hữu ích cho khả năng tương tác nếu tất cả các trình duyệt có thể hỗ trợ cùng một codec. Tuy nhiên, không có codec nào đáp ứng tất cả những người chơi hiện tại. chúng tôi cần một codec được biết là không yêu cầu cấp phép cho mỗi đơn vị hoặc mỗi nhà phân phối, tương thích với mô hình phát triển nguồn mở, có đủ chất lượng để có thể sử dụng được và đó không phải là rủi ro bổ sung bằng sáng chế tàu ngầm đối với quy mô lớn . Đây là sự cố đang diễn ra và phần này sẽ được cập nhật khi có thêm thông tin

Kết quả là sự phân cực của video HTML5 giữa các định dạng theo tiêu chuẩn ngành, được ISO xác định nhưng có nhiều bằng sáng chế và các định dạng mở. Định dạng AV1 mới của Alliance for Open Media nhằm mục đích trở thành cả tiêu chuẩn ngành, miễn phí bản quyền, mở và được hỗ trợ rộng rãi trong ngành

Định dạng miễn phí[sửa]

Mặc dù Theora không bị ảnh hưởng bởi các bằng sáng chế không tự do đã biết, nhưng Apple đã bày tỏ lo ngại về các bằng sáng chế không xác định có thể ảnh hưởng đến nó, chủ sở hữu của chúng có thể đang đợi một công ty có nguồn tài chính dồi dào sử dụng định dạng này trước khi khởi kiện. Các định dạng như H. Về nguyên tắc, 264 cũng có thể là đối tượng của các bằng sáng chế không xác định, nhưng chúng đã được triển khai rộng rãi hơn nhiều và do đó, người ta cho rằng bất kỳ chủ sở hữu bằng sáng chế nào cũng đã được biết đến. Apple cũng đã phản đối việc yêu cầu hỗ trợ định dạng Ogg trong tiêu chuẩn HTML (thậm chí là yêu cầu "nên") với lý do một số thiết bị có thể hỗ trợ các định dạng khác dễ dàng hơn nhiều và HTML trước đây không yêu cầu các định dạng cụ thể cho bất kỳ thứ gì

Một số nhà phát triển web đã chỉ trích việc loại bỏ các định dạng Ogg khỏi đặc điểm kỹ thuật. Một cuộc thảo luận tiếp theo cũng diễn ra trên blog câu hỏi và câu trả lời của W3C

Mozilla và Opera chỉ hỗ trợ các định dạng mở của Theora và WebM. Google tuyên bố ý định loại bỏ hỗ trợ cho H. 264 vào năm 2011, đặc biệt cho thẻ video HTML5. Mặc dù nó đã bị xóa khỏi Chromium nhưng kể từ tháng 1 năm 2021, nó vẫn chưa bị xóa khỏi Google Chrome mười năm sau

Hỗ trợ MPEG-DASH thông qua Tiện ích mở rộng nguồn phương tiện HTML5 (MSE)[sửa | sửa mã nguồn]

Tiêu chuẩn phát trực tuyến tốc độ bit thích ứng MPEG-DASH có thể được sử dụng trong các trình duyệt Web thông qua Tiện ích mở rộng nguồn phương tiện HTML5 (MSE) và trình phát DASH dựa trên JavaScript. Những người chơi như vậy là, e. g. , dấu gạch ngang của dự án mã nguồn mở. js của Diễn đàn Công nghiệp DASH, nhưng cũng có các sản phẩm như Trình phát video HTML5 của Bitmovin (sử dụng HTML5 với JavaScript, nhưng cũng có trình phát DASH dựa trên Flash dành cho các trình duyệt Web cũ không hỗ trợ HTML5 MSE)

Google mua On2[sửa | sửa mã nguồn]

Việc mua lại On2 của Google vào năm 2010 dẫn đến việc mua lại định dạng video VP8. Google đã cung cấp giấy phép miễn phí bản quyền để sử dụng VP8. Google cũng bắt đầu WebM, kết hợp codec video VP8 mã nguồn mở được tiêu chuẩn hóa với âm thanh Vorbis trong vùng chứa dựa trên Matroska. Việc khai trương VP8 được hoan nghênh bởi Free Software Foundation

Khi Google thông báo vào tháng 1 năm 2011 rằng họ sẽ chấm dứt hỗ trợ riêng cho H. 264 trong Chrome, sự chỉ trích đến từ nhiều nơi bao gồm Peter Bright của Ars Technica và nhà truyền bá web của Microsoft, Tim Sneath, người đã so sánh động thái của Google với việc tuyên bố Esperanto là ngôn ngữ chính thức của Hoa Kỳ. Tuy nhiên, Haavard Moen của Opera Software đã chỉ trích mạnh mẽ bài báo của Ars Technica và Google đã đáp lại phản ứng đó bằng cách làm rõ ý định thúc đẩy WebM trong các sản phẩm của mình trên cơ sở tính mở

Sau khi ra mắt WebM, Mozilla và Opera đã kêu gọi đưa VP8 vào HTML

Vào ngày 7 tháng 3 năm 2013, Google Inc. và MPEG LA, LLC đã công bố các thỏa thuận bao gồm các kỹ thuật "có thể cần thiết" đối với VP8, với việc Google nhận được giấy phép từ MPEG LA và 11 chủ sở hữu bằng sáng chế và MPEG LA kết thúc nỗ lực hình thành nhóm bằng sáng chế VP8

Vào năm 2012, VP9 đã được Google phát hành với tư cách là người kế nhiệm của VP8, cũng mở và miễn phí bản quyền

Vào cuối năm 2017, định dạng AV1 mới do Liên minh Truyền thông Mở (AOMedia) phát triển khi sự phát triển của VP9 đã đạt đến trạng thái đóng băng tính năng và dự kiến ​​đóng băng dòng bit vào tháng 1 năm 2018. Các bản dựng hàng đêm của Firefox đã bao gồm hỗ trợ cho AV1

Định dạng không tự do[sửa]

H. 264/MPEG-4 AVC được sử dụng rộng rãi và có tốc độ, khả năng nén, bộ giải mã phần cứng và chất lượng video tốt, nhưng bị cản trở bởi bằng sáng chế. Người dùng H. 264 cần giấy phép từ các chủ sở hữu bằng sáng chế riêng lẻ hoặc từ MPEG LA, một nhóm các chủ sở hữu bằng sáng chế bao gồm Microsoft và Apple, ngoại trừ một số trường hợp sử dụng video phát trên Internet. h. 264 thường được sử dụng ở định dạng bộ chứa MP4, cùng với âm thanh Mã hóa âm thanh nâng cao (AAC). Bản thân AAC cũng được bảo vệ bởi các bằng sáng chế, vì vậy người dùng MP4 sẽ phải cấp phép cả H. 264 và AAC

Vào tháng 6 năm 2009, WHATWG đã kết luận rằng không có định dạng hiện tại nào phù hợp với yêu cầu cụ thể

Apple vẫn chỉ hỗ trợ H. 264, nhưng Microsoft hiện hỗ trợ VP9 và WebM và đã cam kết hỗ trợ cho AV1

Cisco tạo ra H được cấp phép. 264 mô-đun nhị phân có sẵn miễn phí[sửa | sửa mã nguồn]

Vào ngày 30 tháng 10 năm 2013, Cisco đã thông báo rằng họ đang tạo ra một mã nhị phân H. 264 mô-đun có sẵn để tải xuống. Cisco sẽ thanh toán chi phí cấp phép bằng sáng chế cho các mô-đun nhị phân đó khi phần mềm đang sử dụng tải xuống trong khi phần mềm đang được cài đặt, khiến H. 264 miễn phí sử dụng trong trường hợp cụ thể đó

Trong thông báo, Cisco đã trích dẫn lý do mong muốn tiếp tục sử dụng dự án WebRTC, vì tính năng trò chuyện video của WebRTC sẽ được hưởng lợi từ việc hỗ trợ định dạng video trong tất cả các trình duyệt. các H. 264 sẽ có sẵn trên "tất cả các nền tảng phổ biến hoặc có thể hỗ trợ khả thi, có thể được tải vào bất kỳ ứng dụng nào"

Cisco cũng đang có kế hoạch xuất bản mã nguồn cho các mô-đun đó theo giấy phép BSD, nhưng không trả tiền bản quyền, vì vậy mã thực tế sẽ chỉ là phần mềm miễn phí ở các quốc gia không có H. 264 bằng sáng chế phần mềm, điều này đã đúng với các triển khai hiện có khác

Cũng vào ngày 30 tháng 10 năm 2013, Brendan Eich của Mozilla thông báo rằng Firefox sẽ tự động tải xuống H. 264 khi cần theo mặc định. Ông cũng lưu ý rằng mô-đun nhị phân không phải là một giải pháp hoàn hảo, vì người dùng không có toàn quyền phần mềm miễn phí để "sửa đổi, biên dịch lại và phân phối lại mà không có thỏa thuận cấp phép hoặc phí". Do đó, Xiph và Mozilla tiếp tục phát triển Daala

OpenH264 chỉ hỗ trợ cấu hình cơ bản của H. 264 và bản thân nó không giải quyết được nhu cầu về bộ giải mã AAC. Do đó, nó không được coi là đủ cho video web MP4 điển hình, thường ở cấu hình cao với âm thanh AAC. Tuy nhiên, để sử dụng trong WebRTC, việc loại bỏ AAC đã được chứng minh trong thông báo phát hành. "các cơ quan tiêu chuẩn đã căn chỉnh trên Opus và G. 711 làm codec âm thanh phổ biến cho WebRTC". Có nghi ngờ về việc liệu cấp phép AAC toàn cầu có giới hạn, như của Cisco cho H. 264, khả thi sau khi văn phòng cấp phép của AAC loại bỏ giới hạn giá ngay sau khi phát hành OpenH264

Hỗ trợ trình duyệt[sửa]

Bảng này cho biết định dạng video nào có thể được hỗ trợ bởi một tác nhân người dùng nhất định. Hầu hết các trình duyệt được liệt kê ở đây đều sử dụng khung đa phương tiện để giải mã và hiển thị video, thay vì kết hợp các thành phần phần mềm như vậy. Nói chung, không thể cho biết tập hợp các định dạng được khung đa phương tiện hỗ trợ mà không truy vấn nó, vì điều đó phụ thuộc vào hệ điều hành và codec của bên thứ ba. Trong những trường hợp này, hỗ trợ định dạng video là một thuộc tính của khung, không phải trình duyệt (hoặc công cụ bố cục của nó), giả sử trình duyệt truy vấn đúng khung đa phương tiện của nó trước khi từ chối các định dạng video không xác định. Trong một số trường hợp, hỗ trợ được liệt kê ở đây không phải là chức năng của một trong hai codec có sẵn trong khung phương tiện cơ bản của hệ điều hành hoặc của các chức năng codec được tích hợp trong trình duyệt, mà có thể là do một tiện ích bổ sung của trình duyệt, chẳng hạn như có thể bỏ qua

Lưu ý rằng tệp video thường chứa cả nội dung video và âm thanh, mỗi nội dung được mã hóa theo định dạng riêng. Trình duyệt phải hỗ trợ cả định dạng video và âm thanh. Xem HTML5 audio để biết bảng các định dạng âm thanh được mỗi trình duyệt hỗ trợ

Định dạng video có thể được chỉ định theo loại MIME trong HTML (xem ). Các loại MIME được sử dụng để truy vấn các khung đa phương tiện cho các định dạng được hỗ trợ

Trong số các trình duyệt này, chỉ Firefox và Opera sử dụng các thư viện để giải mã tích hợp. Trên thực tế, Internet Explorer và Safari cũng có thể đảm bảo hỗ trợ định dạng nhất định, bởi vì các nhà sản xuất của họ cũng tạo ra các khung đa phương tiện của họ. Ở đầu kia của thang đo, Konqueror có hỗ trợ định dạng giống hệt Internet Explorer khi chạy trên Windows và Safari khi chạy trên Mac, nhưng hỗ trợ được chọn ở đây cho Konqueror là hỗ trợ điển hình cho Linux, nơi Konqueror có hầu hết người dùng. Nói chung, hỗ trợ định dạng của các trình duyệt bị quyết định nhiều bởi xung đột lợi ích của các nhà cung cấp, cụ thể là Media Foundation và QuickTime hỗ trợ các tiêu chuẩn thương mại, trong khi GStreamer và Phonon không thể hỗ trợ hợp pháp ngoài các định dạng miễn phí theo mặc định trên các hệ điều hành miễn phí mà chúng dành cho

Chúng cho biết mức độ hỗ trợ cho mục nhất định trong mỗi động cơ. Theo mặc định, phiên bản mới nhất của công cụ được ngụ ý. Tuy nhiên, một số phiên bản cụ thể có thể được liệt kê;

Chú thíchGiá trịÝ nghĩaCóĐược hỗ trợ đầy đủKhôngChưa bao giờ được hỗ trợMột phầnChỉ một số giá trị được hỗ trợKhông chính xácKhông được triển khai chính xác trong mọi trường hợpThử nghiệmCó thể không đầy đủ hoặc có lỗiBản dựng hàng đêmHiện đang được phát triển;

  1. Vào ngày 11 tháng 1 năm 2011, việc loại bỏ hỗ trợ cho H. 264 đã được công bố trên Blog Chromium. Kể từ ngày 7 tháng 11 năm 2016, hỗ trợ thực tế không bị xóa cũng như thay đổi đối với kế hoạch này không được công bố
  2. Hỗ trợ VP9 trong 25, bị tắt theo mặc định. Được bật theo mặc định trong phiên bản 29
  3. Khả dụng nếu thiết bị có hỗ trợ phần cứng cho HEVC. Không hỗ trợ giải mã phần mềm vì "HEVC rất phức tạp về mặt tính toán, điều này sẽ mang lại trải nghiệm nhất quán hơn. "
  4. Bất kỳ định dạng nào được hỗ trợ bởi phụ trợ Phonon. Các phụ trợ Phonon có sẵn bao gồm DirectShow, QuickTime, GStreamer và xine;
  5. Kể từ phiên bản 20, được tắt trước theo mặc định. Được bật theo mặc định bắt đầu từ phiên bản 21
  6. Bị tắt theo mặc định cho đến phiên bản 26. Ngoài ra, phụ thuộc vào codec trên hệ thống
  7. Mọi định dạng được hỗ trợ bởi GStreamer trên Webkit/GTK+. Hỗ trợ cho Ogg Theora, WebM và h. 264 được bao gồm với các plugin cơ bản, tốt và xấu tương ứng

Video trong suốt[sửa]

Video trong suốt, đó là video có kênh alpha, có nhiều ưu điểm về thiết kế

  • Vì nó không có màu/mẫu/mô-típ nền bị cháy, bạn có thể thay đổi nền và/hoặc các đối tượng lân cận trong trang web bất kỳ lúc nào sau đó mà không cần phải tạo lại video để phù hợp với môi trường xung quanh.
  • Bạn có thể kết hợp rất linh hoạt các video trong suốt với các yếu tố khác (văn bản, đồ họa, video khác hoặc nội dung được hiển thị động như SVG hoặc canvas) để đạt được các hiệu ứng phân lớp rất năng động
  • Nó mở ra rất nhiều khả năng về mặt thiết kế web đáp ứng

Hỗ trợ trình duyệt web cho video có kênh alpha[sửa | sửa mã nguồn]

Các giải pháp trước đó[sửa | sửa mã nguồn]

  • Trước kỷ nguyên HTML5, cách duy nhất để phát lại video trong suốt là nhờ sự trợ giúp của Adobe Flash Player và sử dụng cờ transparent trong mã nhúng của nó

HTML có hỗ trợ quản lý quyền kỹ thuật số (DRM, hạn chế cách sử dụng nội dung) thông qua Tiện ích mở rộng phương tiện được mã hóa HTML5 (EME). Việc bổ sung DRM gây tranh cãi vì nó cho phép hạn chế quyền tự do của người dùng trong việc sử dụng phương tiện bị hạn chế bởi DRM, ngay cả khi việc sử dụng hợp lý cho phép người dùng có quyền hợp pháp để làm như vậy. Một lập luận chính trong việc phê duyệt EME của W3C là nội dung video sẽ được phân phối trong các plugin và ứng dụng chứ không phải trong trình duyệt web

Vào năm 2013, Netflix đã thêm hỗ trợ cho video HTML5 bằng EME, bên cạnh phương thức phân phối cũ của họ bằng plugin Silverlight (cũng với DRM)

Vào năm 2010, sau khi Apple ra mắt iPad và sau khi Steve Jobs tuyên bố rằng các thiết bị di động của Apple sẽ không hỗ trợ Flash, một số trang web nổi tiếng đã bắt đầu cung cấp H. 264 video HTML5 thay vì Adobe Flash dành cho tác nhân người dùng được xác định là iPad. Video HTML5 không phổ biến như video Flash, mặc dù đã có những triển khai trình phát video dựa trên HTML5 thử nghiệm từ DailyMotion (sử dụng định dạng Ogg Theora và Vorbis), YouTube (sử dụng định dạng H. 264 và định dạng WebM) và Vimeo (sử dụng H. 264)

Hỗ trợ cho video HTML5 đã tăng đều đặn. Vào tháng 6 năm 2013, Netflix đã thêm hỗ trợ cho video HTML5. Tháng 1/2015, YouTube mặc định chuyển sang sử dụng video HTML5 thay vì Flash. Vào tháng 12 năm 2015, Facebook đã chuyển từ Flash sang HTML5 cho tất cả nội dung video

Kể từ năm 2016, Flash vẫn được cài đặt rộng rãi trên máy tính để bàn, trong khi nhìn chung không được hỗ trợ trên các thiết bị di động như điện thoại thông minh. Plugin Flash được cho là rộng rãi, bao gồm cả Adobe, sẽ bị loại bỏ dần, điều này sẽ khiến video HTML5 trở thành phương pháp được hỗ trợ rộng rãi duy nhất để phát video trên World Wide Web. Chrome, Firefox, Safari và Edge, có kế hoạch làm cho hầu hết nội dung flash nhấp để phát vào năm 2017. Trình duyệt chính duy nhất không công bố kế hoạch loại bỏ Flash là Internet Explorer. Adobe đã thông báo vào ngày 25 tháng 7 năm 2017 rằng họ sẽ chấm dứt vĩnh viễn việc phát triển Flash vào năm 2020

Thẻ HTML nào được sử dụng để hiển thị video?

The HTML

Thẻ âm thanh và video hoạt động như thế nào trong HTML?

Các thẻ HTML5 đặt thuộc tính src để 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 .

Tại sao thẻ video của tôi không hoạt động trong HTML?

Có 3 điều cần kiểm tra. đảm bảo các tệp video của bạn được mã hóa đúng cách để phân phối trên web . đảm bảo rằng máy chủ lưu trữ video được định cấu hình phù hợp để phân phối web. đảm bảo rằng các tập lệnh khác của bạn trên trang không cản trở quá trình phát lại video.

Làm cách nào để chèn video mp4 vào HTML?

Cách nhúng video và âm thanh vào HTML của bạn .
src Thuộc tính này là viết tắt của nguồn, rất giống với thuộc tính src được sử dụng trong phần tử hình ảnh. Chúng tôi sẽ thêm liên kết đến tệp video trong thuộc tính src
gõ Đây sẽ là video/mp4 bởi vì. mp4 là định dạng của video chúng tôi đang sử dụng