Hướng dẫn which tag is used to embed video html? - thẻ nào được sử dụng để nhúng html video?

Question

Phần tử HTML được sử dụng để hiển thị video trên trang web.

Nội dung chính Show

Phần tử HTML
Làm thế nào nó hoạt động
HTML Autoplay
Làm thế nào nó hoạt động
Văn bản giữa các thẻ
Trình duyệt Chrome
Video HTML - Các loại phương tiện
Mã HTML nào là tốt nhất để nhúng video?
Sự kiện
Ghi chú sử dụng
Kiểu dáng với CSS
Phát hiện bổ sung và loại bỏ theo dõi
Hỗ trợ máy chủ cho video
Nguồn đơn
Nhiều nguồn
Ví dụ này được xây dựng trên cái cuối cùng, cung cấp ba nguồn khác nhau cho các phương tiện truyền thông; Điều này cho phép video được xem bất kể các codec video nào được hỗ trợ bởi trình duyệt.
MDN Hiểu WCAG, Hướng dẫn 1.2 Giải thích
Hiểu tiêu chí thành công 1.2.1 | W3C Hiểu WCAG 2.0
Thông số kỹ thuật
Tiêu chuẩn HTML # phần tử-video
Làm thế nào để bạn nhúng một video trong HTML?
Thẻ nhúng trong HTML là gì?
Thẻ video có trong thẻ HTML5 không?
Mã HTML nào là tốt nhất để nhúng video?

Phần tử HTML

Để hiển thị video trong HTML, hãy sử dụng phần tử :

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.

Your browser does not support the video tag.

Hãy tự mình thử »

Làm thế nào nó hoạt động

Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.

Đó là một ý tưởng tốt để luôn bao gồm các thuộc tính

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

0 và

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

1. Nếu chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy trong khi video tải.

Phần tử

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

2 cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.

Văn bản giữa các thẻ và

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

4 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử .

HTML Autoplay

Để tự động bắt đầu video, hãy sử dụng thuộc tính

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

6:

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.

Your browser does not support the video tag.

Hãy tự mình thử »

Làm thế nào nó hoạt động Chromium browsers do not allow autoplay in most cases. However, muted autoplay is always allowed.

Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.

Thí dụ

& nbsp; & nbsp; Trình duyệt của bạn không hỗ trợ thẻ video.

Your browser does not support the video tag.

Hãy tự mình thử »

Làm thế nào nó hoạt động

Thuộc tính controls thêm các điều khiển video, như chơi, tạm dừng và âm lượng.

Đó là một ý tưởng tốt để luôn bao gồm các thuộc tính

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

0 và

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

1. Nếu chiều cao và chiều rộng không được đặt, trang có thể nhấp nháy trong khi video tải.

Phần tử

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

2 cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.

4.0

9.0

3.5

4.0

10.5

Văn bản giữa các thẻ

HTML Autoplay

Để tự động bắt đầu video, hãy sử dụng thuộc tính `const elem = document.querySelector("video"); elem.audioTracks.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTracks.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };` 6:	MP4	Lưu ý: Trình duyệt crom không cho phép tự động phát trong hầu hết các trường hợp. Tuy nhiên, autoplay bị tắt tiếng luôn được phép.	Thêm `const elem = document.querySelector("video"); elem.audioTracks.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTracks.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };` 7 sau `const elem = document.querySelector("video"); elem.audioTracks.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTracks.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };` 8 để cho video của bạn bắt đầu phát tự động (nhưng bị tắt tiếng):
Hỗ trợ trình duyệt	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .
Yếu tố	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .
Yếu tố	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .
Yếu tố	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Yếu tố
Opera	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .	Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử .

Yếu tố

File Format	Định dạng video HTML
Có ba định dạng video được hỗ trợ: MP4, WebM và OGG. Hỗ trợ trình duyệt cho các định dạng khác nhau là:	Trình duyệt
Webm	OGG
Bờ rìa	VÂNG

Trình duyệt Chrome

Firefox

Cuộc đi săn

KHÔNG

Opera

Video HTML - Các loại phương tiện

Định dạng tệp Loại phương tiện truyền thông

Phần tử

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

2 cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.

Văn bản giữa các thẻ và

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

4 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử .

Phần tử

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

2 cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.

Văn bản giữa các thẻ và

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

4 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử .

Phần tử

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

2 cho phép bạn chỉ định các tệp video thay thế mà trình duyệt có thể chọn. Trình duyệt sẽ sử dụng định dạng được công nhận đầu tiên.

Văn bản giữa các thẻ và

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

4 sẽ chỉ được hiển thị trong các trình duyệt không hỗ trợ phần tử .

Giống như tất cả các thẻ HTML khác, thẻ hỗ trợ các thuộc tính toàn cầu trong HTML5. HTML element embeds a media player which supports video playback into the document. You can use for audio content as well, but the

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

3 element may provide a more appropriate user experience.

Mã HTML nào là tốt nhất để nhúng video?

Phần tử HTML được sử dụng để nhúng video vào các tài liệu web. Nó có thể chứa một hoặc nhiều nguồn video, được biểu thị bằng thuộc tính SRC hoặc phần tử nguồn. Các yếu tố được hỗ trợ bởi tất cả các trình duyệt hiện đại.

Phần tử HTML nhúng một trình phát phương tiện hỗ trợ phát lại video vào tài liệu. Bạn cũng có thể sử dụng cho nội dung âm thanh, nhưng phần tử

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

3 có thể cung cấp trải nghiệm người dùng phù hợp hơn.

Thử nó

Ví dụ trên cho thấy cách sử dụng đơn giản của phần tử . Theo cách tương tự như phần tử

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

5, chúng tôi bao gồm một đường dẫn đến phương tiện mà chúng tôi muốn hiển thị bên trong thuộc tính

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

6; Chúng tôi có thể bao gồm các thuộc tính khác để chỉ định thông tin như chiều rộng và chiều cao video, cho dù chúng tôi muốn nó tự động phát và lặp, cho dù chúng tôi muốn hiển thị các điều khiển video mặc định của trình duyệt, v.v.

const elem = document.querySelector("video"); elem.audioTracks.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTracks.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };
6

Nội dung bên trong các thẻ mở và đóng

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

7 được hiển thị dưới dạng dự phòng trong các trình duyệt không hỗ trợ phần tử.

Thuộc tính Sites that automatically play audio (or videos with an audio track) can be an unpleasant experience for users, so should be avoided when possible. If you must offer autoplay functionality, you should make it opt-in (requiring a user to specifically enable it). However, this can be useful when creating media elements whose source will be set at a later time, under user control. See our autoplay guide for additional information about how to properly use autoplay.

Để vô hiệu hóa video Autoplay,

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

9 sẽ không hoạt động; Video sẽ tự động phát nếu thuộc tính có trong thẻ . Để loại bỏ autoplay, thuộc tính cần phải được loại bỏ hoàn toàn.

Trong một số trình duyệt (ví dụ: Chrome 70.0) Autoplay không hoạt động nếu không có thuộc tính

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

7.

AddType video/webm .webm
2Experimental Experimental

Một thuộc tính boolean mà nếu

AddType video/webm .webm

3 chỉ ra rằng phần tử sẽ tự động chuyển đổi chế độ hình ảnh trong ảnh khi người dùng chuyển qua lại giữa tài liệu này và một tài liệu hoặc ứng dụng khác.

controls

Nếu thuộc tính này có mặt, trình duyệt sẽ cung cấp các điều khiển để cho phép người dùng điều khiển phát lại video, bao gồm âm lượng, tìm kiếm và tạm dừng/tiếp tục phát lại.

AddType video/webm .webm
5ExperimentalNon-standard Experimental Non-standard

Thuộc tính

AddType video/webm .webm

5, khi được chỉ định, giúp trình duyệt chọn những điều khiển nào để hiển thị cho phần tử

AddType video/webm .webm

7 bất cứ khi nào trình duyệt hiển thị bộ điều khiển của riêng mình (nghĩa là khi thuộc tính controls được chỉ định).

Các giá trị được phép là

AddType video/webm .webm

9,




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

0 và




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

1.

Sử dụng thuộc tính




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

2 nếu bạn muốn vô hiệu hóa chế độ hình ảnh trong ảnh (và điều khiển).

<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" width="620"> Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download ita> and watch it with your favorite video player! video>
3

Thuộc tính được liệt kê này cho biết có nên sử dụng CORS để tìm nạp video liên quan hay không. Tài nguyên hỗ trợ CORS có thể được sử dụng lại trong phần tử




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

4 mà không bị nhiễm độc. Các giá trị được phép là:




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

5

Gửi một yêu cầu có nguồn gốc chéo mà không cần chứng chỉ. Nói cách khác, nó gửi tiêu đề HTTP




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

6 mà không cần cookie, chứng chỉ X.509 hoặc thực hiện xác thực cơ bản HTTP. Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc (bằng cách không đặt tiêu đề




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

7 HTTP), tài nguyên sẽ bị ô nhiễm và việc sử dụng nó bị hạn chế.




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

8

Gửi một yêu cầu có nguồn gốc chéo với thông tin xác thực. Nói cách khác, nó gửi tiêu đề HTTP




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

6 với cookie, chứng chỉ hoặc thực hiện xác thực cơ bản HTTP. Nếu máy chủ không cung cấp thông tin đăng nhập cho trang web gốc (thông qua tiêu đề




<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

0 HTTP), tài nguyên sẽ bị nhiễm độc và việc sử dụng của nó bị hạn chế.

Khi không có, tài nguyên được tìm nạp mà không có yêu cầu CORS (tức là mà không gửi tiêu đề




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

6 HTTP), ngăn chặn việc sử dụng không bị lỗi trong các yếu tố




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

4. Nếu không hợp lệ, nó được xử lý như thể từ khóa được liệt kê




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

5 được sử dụng. Xem các thuộc tính CASS Cài đặt để biết thêm thông tin.

<video controls src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4" poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" width="620"> Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://archive.org/details/BigBuckBunny_124">download ita> and watch it with your favorite video player! video>
2Experimental Experimental

Ngăn chặn trình duyệt đề xuất menu ngữ cảnh hình ảnh trong ảnh hoặc tự động yêu cầu hình ảnh trong ảnh trong một số trường hợp.

<video width="620" controls poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg"> <source src="https://archive.org/download/ElephantsDream/ed_hd.ogv" type="video/ogg" /> <source src="https://archive.org/download/ElephantsDream/ed_hd.avi" type="video/avi" /> <source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" type="video/mp4" /> Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"> download the MP4 a> and watch it with your favorite video player! video>
5Experimental Experimental

Một thuộc tính boolean được sử dụng để vô hiệu hóa khả năng phát lại từ xa trong các thiết bị được gắn bằng dây có dây (HDMI, DVI, v.v.) và các công nghệ không dây (Miracast, Chromecast, DLNA, AirPlay, v.v.).

Trong Safari, bạn có thể sử dụng




<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

6 như một dự phòng.

const elem = document.querySelector("video"); elem.audioTracks.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTracks.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };
1

Chiều cao của khu vực hiển thị của video, trong các pixel CSS (chỉ có giá trị tuyệt đối; không có tỷ lệ phần trăm).

<video width="620" controls poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg"> <source src="https://archive.org/download/ElephantsDream/ed_hd.ogv" type="video/ogg" /> <source src="https://archive.org/download/ElephantsDream/ed_hd.avi" type="video/avi" /> <source src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4" type="video/mp4" /> Sorry, your browser doesn't support embedded videos, but don't worry, you can <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"> download the MP4 a> and watch it with your favorite video player! video>
8

Một thuộc tính boolean; Nếu được chỉ định, trình duyệt sẽ tự động tìm kiếm trở lại bắt đầu khi đến cuối video.

const elem = document.querySelector("video"); elem.audioTracks.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTracks.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };
7

Một thuộc tính Boolean cho biết cài đặt mặc định của âm thanh có trong video. Nếu được thiết lập, âm thanh ban đầu sẽ bị im lặng. Giá trị mặc định của nó là

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

0, có nghĩa là âm thanh sẽ được phát khi video được phát.

14 00:03:14 --> 00:03:18 [Dramatic rock music] 15 00:03:19 --> 00:03:21 [whispering] What's that off in the distance? 16 00:03:22 --> 00:03:24 It's… it's a… 16 00:03:25 --> 00:03:32 [Loud thumping] [Dishes clattering]
1

Một thuộc tính Boolean chỉ ra rằng video sẽ được phát "nội tuyến", nằm trong khu vực phát lại của phần tử. Lưu ý rằng sự vắng mặt của thuộc tính này không ngụ ý rằng video sẽ luôn được phát trên toàn màn hình.

14 00:03:14 --> 00:03:18 [Dramatic rock music] 15 00:03:19 --> 00:03:21 [whispering] What's that off in the distance? 16 00:03:22 --> 00:03:24 It's… it's a… 16 00:03:25 --> 00:03:32 [Loud thumping] [Dishes clattering]
2

Một URL cho một hình ảnh được hiển thị trong khi video đang tải xuống. Nếu thuộc tính này không được chỉ định, không có gì được hiển thị cho đến khi khung đầu tiên có sẵn, thì khung đầu tiên được hiển thị dưới dạng khung áp phích.

14 00:03:14 --> 00:03:18 [Dramatic rock music] 15 00:03:19 --> 00:03:21 [whispering] What's that off in the distance? 16 00:03:22 --> 00:03:24 It's… it's a… 16 00:03:25 --> 00:03:32 [Loud thumping] [Dishes clattering]
3

Thuộc tính được liệt kê này nhằm cung cấp một gợi ý cho trình duyệt về những gì tác giả nghĩ sẽ dẫn đến trải nghiệm người dùng tốt nhất liên quan đến nội dung nào được tải trước khi video được phát. Nó có thể có một trong các giá trị sau:

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

4: Cho biết rằng video không nên được tải sẵn.

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

5: Chỉ ra rằng chỉ có siêu dữ liệu video (ví dụ: độ dài) được tìm nạp.

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

6: Cho biết rằng toàn bộ tệp video có thể được tải xuống, ngay cả khi người dùng không dự kiến sẽ sử dụng nó.

Chuỗi trống: Từ đồng nghĩa của giá trị

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

6.

Giá trị mặc định là khác nhau cho mỗi trình duyệt. Thông số kỹ thuật khuyên nó sẽ được đặt thành

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

5.

Note:

Thuộc tính

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

6 được ưu tiên hơn

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

3. Nếu

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

6 được chỉ định, trình duyệt rõ ràng sẽ cần bắt đầu tải xuống video để phát lại.

Thông số kỹ thuật không buộc trình duyệt phải tuân theo giá trị của thuộc tính này; Nó chỉ là một gợi ý.

AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
6

URL của video để nhúng. Đây là tùy chọn; Thay vào đó, bạn có thể sử dụng phần tử

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

2 trong khối video để chỉ định video để nhúng.

const elem = document.querySelector("video"); elem.audioTracks.onaddtrack = (event) => { trackEditor.addTrack(event.track); }; elem.audioTracks.onremovetrack = (event) => { trackEditor.removeTrack(event.track); };
0

Chiều rộng của vùng hiển thị của video, trong các pixel CSS (chỉ có giá trị tuyệt đối; không có tỷ lệ phần trăm).

Sự kiện

Ghi chú sử dụng

Các trình duyệt không hỗ trợ cùng một định dạng video; Bạn có thể cung cấp nhiều nguồn bên trong các yếu tố

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

2 lồng nhau và sau đó trình duyệt sẽ sử dụng nguồn đầu tiên mà nó hiểu.

<video controls>
  <source src="myVideo.webm" type="video/webm" />
  <source src="myVideo.mp4" type="video/mp4" />
  <p>
    Your browser doesn't support HTML video. Here is a
    <a href="myVideo.mp4">link to the videoa> instead.
  p>
video>

Chúng tôi cung cấp một hướng dẫn thực chất và kỹ lưỡng về các loại tệp phương tiện và hướng dẫn cho các codec được hỗ trợ cho video. Cũng có sẵn là một hướng dẫn cho các codec âm thanh có thể được sử dụng với chúng.

Ghi chú sử dụng khác:

Nếu bạn không chỉ định thuộc tính controls, video sẽ không bao gồm các điều khiển mặc định của trình duyệt; Bạn có thể tạo các điều khiển tùy chỉnh của riêng mình bằng JavaScript và API 7. Xem Tạo một trình phát video trình duyệt chéo để biết thêm chi tiết.
Để cho phép kiểm soát chính xác nội dung video (và âm thanh) của bạn, 7S bắn nhiều sự kiện khác nhau. Ngoài việc cung cấp khả năng kiểm soát, các sự kiện này cho phép bạn theo dõi tiến trình của cả tải xuống và phát lại phương tiện, cũng như trạng thái phát lại và vị trí.
Bạn có thể sử dụng thuộc tính 9 để điều chỉnh vị trí của video trong khung của phần tử và thuộc tính 0 để kiểm soát cách điều chỉnh kích thước của video để phù hợp với khung.
Để hiển thị phụ đề/chú thích cùng với video của bạn, bạn có thể sử dụng một số JavaScript cùng với phần tử 1 và định dạng WebVTT. Xem thêm chú thích và phụ đề vào video HTML để biết thêm thông tin.
Bạn có thể phát các tệp âm thanh bằng phần tử . Điều này có thể hữu ích nếu, ví dụ, bạn cần thực hiện âm thanh với bảng điểm WebVTT, vì phần tử
```
AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg
```
3 không cho phép các chú thích bằng WebVTT.
Để kiểm tra nội dung dự phòng trên các trình duyệt hỗ trợ phần tử, bạn có thể thay thế bằng một phần tử không tồn tại như 5.

Một nguồn thông tin chung tốt về việc sử dụng HTML là hướng dẫn của người mới bắt đầu nội dung video và âm thanh.

Kiểu dáng với CSS

Phần tử là một phần tử được thay thế - giá trị 8 của nó là 9 theo mặc định, nhưng chiều rộng và chiều cao mặc định của nó trong chế độ xem được xác định bởi video được nhúng.

Không có cân nhắc đặc biệt cho kiểu dáng ; Một chiến lược phổ biến là cung cấp cho nó giá trị 8 là controls2 để giúp định vị, kích thước, v.v., sau đó cung cấp thông tin kiểu dáng và bố cục theo yêu cầu. Khái niệm cơ bản về kiểu máy chơi video cung cấp một số kỹ thuật tạo kiểu hữu ích.

Phát hiện bổ sung và loại bỏ theo dõi

Bạn có thể phát hiện khi các bản nhạc được thêm vào và xóa khỏi phần tử bằng các sự kiện controls4 và controls5. Tuy nhiên, những sự kiện này không được gửi trực tiếp đến chính phần tử . Thay vào đó, họ được gửi đến đối tượng danh sách theo dõi trong phần tử 7 của tương ứng với loại bản nhạc được thêm vào phần tử:

controls9

Một

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

00 chứa tất cả các bản nhạc âm thanh của yếu tố phương tiện. Bạn có thể thêm trình nghe cho controls4 vào đối tượng này để được cảnh báo khi các bản nhạc âm thanh mới được thêm vào phần tử.

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

02

Thêm trình nghe controls4 vào đối tượng

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

04 này để được thông báo khi các bản nhạc video được thêm vào phần tử.

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

05

Thêm trình nghe sự kiện controls4 vào

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

07 này để được thông báo khi các bản nhạc văn bản mới được thêm vào phần tử.

Ví dụ: để phát hiện khi các rãnh âm thanh được thêm hoặc xóa khỏi phần tử , bạn có thể sử dụng mã như thế này:

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

Mã này theo dõi các bản nhạc âm thanh được thêm và xóa khỏi phần tử và gọi chức năng giả thuyết trên trình chỉnh sửa theo dõi để đăng ký và xóa bản nhạc khỏi danh sách các bản nhạc có sẵn của trình soạn thảo.

Bạn cũng có thể sử dụng

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

09 để nghe các sự kiện controls4 và controls5.

Hỗ trợ máy chủ cho video

Nếu loại MIME cho video không được đặt chính xác trên máy chủ, video có thể không hiển thị hoặc hiển thị hộp màu xám có chứa X (nếu JavaScript được bật).

Nếu bạn sử dụng Apache Web Server để phục vụ video OGG Theora, bạn có thể khắc phục sự cố này bằng cách thêm các phần mở rộng loại tệp video vào loại MIME "Video/OGG". Các tiện ích mở rộng loại tệp video phổ biến nhất là ".Ogm", ".Ogv" hoặc ".Ogg". Để thực hiện việc này, hãy chỉnh sửa tệp "mime.types" trong "/etc/apache" hoặc sử dụng Chỉ thị cấu hình

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

12 trong

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

13.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

Nếu bạn phục vụ video của mình dưới dạng webm, bạn có thể khắc phục sự cố này cho máy chủ web Apache bằng cách thêm tiện ích mở rộng được sử dụng bởi các tệp video của bạn (".webm" là bản phổ biến nhất) vào loại "video/webm" thông qua "thông qua" thông qua "thông qua" thông qua "thông qua" mime.types "tệp trong"/etc/apache "hoặc thông qua Chỉ thị cấu hình" addType "trong

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

13.

AddType video/webm .webm

Máy chủ web của bạn có thể cung cấp một giao diện dễ dàng để thay đổi cấu hình loại MIME cho các công nghệ mới cho đến khi bản cập nhật toàn cầu xảy ra một cách tự nhiên.

Ví dụ

Nguồn đơn

Ví dụ này phát một video khi được kích hoạt, cung cấp cho người dùng các điều khiển video mặc định của trình duyệt để kiểm soát phát lại.

HTML




<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/details/BigBuckBunny_124">download ita>
  and watch it with your favorite video player!
video>

Kết quả

Cho đến khi video bắt đầu phát, hình ảnh được cung cấp trong thuộc tính

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

2 được hiển thị ở vị trí của nó. Nếu trình duyệt không hỗ trợ phát lại video, văn bản dự phòng sẽ được hiển thị.

Nhiều nguồn

Ví dụ này được xây dựng trên cái cuối cùng, cung cấp ba nguồn khác nhau cho các phương tiện truyền thông; Điều này cho phép video được xem bất kể các codec video nào được hỗ trợ bởi trình duyệt.

HTML




<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.ogv"
    type="video/ogg" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Sorry, your browser doesn't support embedded videos, but don't worry, you can
  <a href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4">
    download the MP4
  a>
  and watch it with your favorite video player!
video>

Kết quả

Cho đến khi video bắt đầu phát, hình ảnh được cung cấp trong thuộc tính

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

2 được hiển thị ở vị trí của nó. Nếu trình duyệt không hỗ trợ phát lại video, văn bản dự phòng sẽ được hiển thị.

Nhiều nguồn

Ví dụ này được xây dựng trên cái cuối cùng, cung cấp ba nguồn khác nhau cho các phương tiện truyền thông; Điều này cho phép video được xem bất kể các codec video nào được hỗ trợ bởi trình duyệt.

OGG đầu tiên được thử. Nếu điều đó không thể được chơi, thì Avi đã được thử. Cuối cùng, MP4 đã được thử. Thông báo dự phòng được hiển thị nếu phần tử video không được hỗ trợ, nhưng không phải nếu tất cả các nguồn đều thất bại.

Một số loại tệp phương tiện cho phép bạn cung cấp thông tin cụ thể hơn bằng tham số

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

16 như một phần của chuỗi loại của tệp. Một ví dụ tương đối đơn giản là

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

17, nói rằng tệp là video WebM sử dụng VP8 cho video và Vorbis cho âm thanh.

Mối quan tâm tiếp cận

Video sẽ cung cấp cả chú thích và bảng điểm mô tả chính xác nội dung của nó (xem thêm chú thích và phụ đề vào video HTML để biết thêm thông tin về cách thực hiện các điều này). Chú thích cho phép những người đang bị mất thính lực để hiểu nội dung âm thanh của video khi video đang được phát, trong khi bảng điểm cho phép những người cần thêm thời gian để có thể xem lại nội dung âm thanh theo tốc độ và định dạng thoải mái cho họ.

14
00:03:14 --> 00:03:18
[Dramatic rock music]

15
00:03:19 --> 00:03:21
[whispering] What's that off in the distance?

16
00:03:22 --> 00:03:24
It's… it's a…

16 00:03:25 --> 00:03:32
[Loud thumping]
[Dishes clattering]

Điều đáng chú ý là trong khi bạn có thể chú thích phương tiện chỉ dành cho âm thanh, bạn chỉ có thể làm như vậy khi phát âm thanh trong phần tử , vì vùng video của phần tử được sử dụng để trình bày chú thích. Đây là một trong những kịch bản đặc biệt trong đó hữu ích khi phát âm thanh trong một yếu tố video.

Nếu các dịch vụ chú thích tự động được sử dụng, điều quan trọng là phải xem xét nội dung được tạo để đảm bảo nó đại diện chính xác cho video nguồn.
Ngoài hộp thoại nói, phụ đề và bảng điểm cũng nên xác định các hiệu ứng âm nhạc và âm thanh truyền đạt thông tin quan trọng. Điều này bao gồm cảm xúc và giai điệu:

Chú thích không nên cản trở chủ đề chính của video. Chúng có thể được định vị bằng cách sử dụng cài đặt cue

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

19.

Định dạng theo dõi văn bản video Web (WebVTT)
Webaim: chú thích, bảng điểm và mô tả âm thanh

MDN Hiểu WCAG, Hướng dẫn 1.2 Giải thích

Hiểu tiêu chí thành công 1.2.1 | W3C Hiểu WCAG 2.0

Hiểu tiêu chí thành công 1.2.2 \| W3C Hiểu WCAG 2.0
Tóm tắt kỹ thuật # the-video-element

Thông số kỹ thuật

Sự chỉ rõ

Tiêu chuẩn HTML # phần tử-video

Làm thế nào để bạn nhúng một video trong HTML?

Để nhúng video vào trang HTML, sử dụng phần tử.Thuộc tính nguồn bao gồm URL video.Đối với kích thước của trình phát video, hãy đặt chiều rộng và chiều cao của video một cách thích hợp.URL video là liên kết nhúng video.use the

programming html HTML video tag HTML5 video player HTML

Video tag HTML5 Autoplay video HTML Video HTML5 Embed video HTML

Bài Viết Liên Quan

Bong gòn trong cái gối là gì tiếng anh năm 2024

Hướng dẫn which tag is used to embed video html? - thẻ nào được sử dụng để nhúng html video?

Phần tử HTML

Thí dụ

Làm thế nào nó hoạt động

HTML Autoplay

Thí dụ

Thí dụ

Làm thế nào nó hoạt động

Yếu tố

Trình duyệt Chrome

Video HTML - Các loại phương tiện

Mã HTML nào là tốt nhất để nhúng video?

Thử nó

Sự kiện

Ghi chú sử dụng

Kiểu dáng với CSS

Phát hiện bổ sung và loại bỏ theo dõi

Hỗ trợ máy chủ cho video

Ví dụ

Nguồn đơn

HTML

Kết quả

Nhiều nguồn

HTML

Kết quả

Ví dụ này được xây dựng trên cái cuối cùng, cung cấp ba nguồn khác nhau cho các phương tiện truyền thông; Điều này cho phép video được xem bất kể các codec video nào được hỗ trợ bởi trình duyệt.

MDN Hiểu WCAG, Hướng dẫn 1.2 Giải thích

Hiểu tiêu chí thành công 1.2.1 | W3C Hiểu WCAG 2.0

Thông số kỹ thuật

Tiêu chuẩn HTML # phần tử-video

Làm thế nào để bạn nhúng một video trong HTML?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội