Để nhúng video vào trang HTML, hãy 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. Video chúng tôi sẽ nhúng ví dụ của chúng tôi sẽ là YouTube
Để lấy liên kết nhúng, hãy truy cập Video YouTube và nhấp vào nhúng như hình bên dưới. Bạn sẽ nhận được một liên kết từ nhúng ở đây -
Bạn có thể thử chạy đoạn mã sau để tìm hiểu cách nhúng video bằng mã HTML. Sao chép liên kết nhúng như hình trên và thêm nó vào tài liệu HTML
Phần tử HTML
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5 nhúng trình phát đa 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
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5 cho nội dung âm thanh nhưng phần tử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg7 có thể mang lại 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ử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5. Theo cách tương tự vớ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];
};
1, 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 const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
2; Nội dung bên trong các thẻ mở và đóng
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
3 đượ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
Giống như tất cả các phần tử HTML khác, phần tử này hỗ trợ các thuộc tính toàn cục
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
4Một thuộc tính Boolean;
Ghi chú. Các trang web tự động phát âm thanh [hoặc video có bản âm thanh] có thể gây khó chịu cho người dùng, vì vậy nên tránh khi có thể. Nếu bạn phải cung cấp chức năng tự động phát, bạn nên chọn tham gia [yêu cầu người dùng bật cụ thể chức năng này]. Tuy nhiên, điều này có thể hữu ích khi tạo các phần tử phương tiện có nguồn sẽ được đặt sau, dưới sự kiểm soát của người dùng. Xem hướng dẫn tự động phát của chúng tôi để biết thêm thông tin về cách sử dụng tự động phát đúng cách
Để tắt tự động phát video,
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
5 sẽ không hoạt động; . Để xóa tự động phát, thuộc tính cần được xóa hoàn toànTrong một số trình duyệt [e. g. Chrome 70. 0] tự động phát 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];
};
7const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
8 Thử nghiệmThuộc tính Boolean nếu
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
9 chỉ ra rằng phần tử sẽ tự động chuyển đổi chế độ hình trong hình khi người dùng chuyển đổi qua lại giữa tài liệu này và tài liệu hoặc ứng dụng khácAddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg0
Nếu có thuộc tính này, 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 quá trình 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/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg1 Thử nghiệm Phi chuẩn
Thuộc tính
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg1, khi được chỉ định, sẽ giúp trình duyệt chọn điều khiển nào sẽ hiển thị cho phần tử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg3 bất cứ khi nào trình duyệt hiển thị bộ điều khiển của chính nó [nghĩa là khi thuộc tính
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg0 được chỉ định]
Các giá trị được phép là
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5,
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg6 và
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg7
Sử dụng thuộc tính
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg8 nếu bạn muốn tắt chế độ Picture-In-Picture [và điều khiển]
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg9
Thuộc tính 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. Các tài nguyên hỗ trợ CORS có thể được sử dụng lại trong phần tử
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
80 mà không bị nhiễm độc. Các giá trị được phép làconst elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
81Gửi yêu cầu nguồn gốc chéo mà không cần thông tin xác thực. Nói cách khác, nó gửi tiêu đề HTTP
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
82 mà không có cookie, X. 509 hoặc thực hiện xác thực HTTP Basic. Nếu máy chủ không cung cấp thông tin xác thực cho trang gốc [bằng cách không đặt tiêu đề HTTP const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
83], tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chếconst elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
84Gửi yêu cầu 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
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
82 với cookie, chứng chỉ hoặc thực hiện xác thực HTTP Basic. Nếu máy chủ không cung cấp thông tin xác thực cho trang gốc [thông qua tiêu đề HTTP const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
86], tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chếKhi không có mặt, tài nguyên được tìm nạp mà không có yêu cầu CORS [i. e. mà không gửi tiêu đề HTTP
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
82], ngăn chặn việc sử dụng không bị nhiễm độc của nó trong các phần tử const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
80. Nếu không hợp lệ, nó được xử lý như thể từ khóa liệt kê const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
81 đã được sử dụng. Xem thuộc tính cài đặt CORS để biết thêm thông tinAddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg8 Thử nghiệm
Ngăn trình duyệt đề xuất menu ngữ cảnh Picture-in-Picture hoặc tự động yêu cầu Picture-in-Picture trong một số trường hợp
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
91 Thử nghiệmThuộc tính Boolean được sử dụng để tắt khả năng phát lại từ xa trong các thiết bị được kết nối bằng dây [HDMI, DVI, v.v. ] và công nghệ không dây [Miracast, Chromecast, DLNA, AirPlay, v.v. ]
Trong Safari, bạn 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];
};
92 làm phương án dự phòngconst elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
93Chiều cao của khu vực hiển thị của video, tính bằng pixel CSS [chỉ giá trị tuyệt đối; không có tỷ lệ phần trăm]
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
94Một thuộc tính Boolean;
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
7Thuộc tính Boolean cho biết cài đặt mặc định của âm thanh có trong video. Nếu được đặt, ban đầu âm thanh sẽ bị tắt tiếng. Giá trị mặc định của nó là
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
96, nghĩa là âm thanh sẽ được phát khi phát videoconst elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
97Thuộ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 việc không có thuộc tính này không có nghĩa là video sẽ luôn được phát ở chế độ toàn màn hình
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
98URL cho 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 khả dụng, thì khung đầu tiên được hiển thị dưới dạng khung áp phích
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
99Thuộc tính liệt kê này nhằm cung cấp gợi ý cho trình duyệt về những gì tác giả cho rằng sẽ mang lại trải nghiệm tốt nhất cho người dùng về nội dung nào được tải trước khi phát video. Nó có thể có một trong các giá trị sau
80. Cho biết rằng video không nên được tải trướcconst elem = document.querySelector["video"]; elem.audioTracks.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTracks.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
81. Cho biết rằng chỉ siêu dữ liệu video [e. g. chiều dài] được tìm nạpconst elem = document.querySelector["video"]; elem.audioTracks.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTracks.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
82. Cho biết có thể tải xuống toàn bộ tệp video, ngay cả khi người dùng không muốn sử dụng nóconst elem = document.querySelector["video"]; elem.audioTracks.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTracks.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
- chuỗi rỗng. Từ đồng nghĩa của giá trị
82const elem = document.querySelector["video"]; elem.audioTracks.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTracks.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
Giá trị mặc định khác nhau đối với mỗi trình duyệt. Thông số kỹ thuật khuyên nó nên được đặt thành
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
81Ghi chú
- Thuộc tính
4 được ưu tiên hơnconst elem = document.querySelector["video"]; elem.audioTracks.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTracks.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
99. Nếuconst elem = document.querySelector["video"]; elem.audioTracks.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTracks.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
4 được chỉ định, trình duyệt rõ ràng sẽ cần bắt đầu tải xuống video để phát lạiconst elem = document.querySelector["video"]; elem.audioTracks.onaddtrack = [event] => { trackEditor.addTrack[event.track]; }; elem.audioTracks.onremovetrack = [event] => { trackEditor.removeTrack[event.track]; };
- Đặc tả không buộc trình duyệt tuân theo giá trị của thuộc tính này;
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
2URL của video để nhúng. Đây là tùy chọn;
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
80Chiều rộng của vùng hiển thị của video, tính bằng pixel CSS [chỉ giá trị tuyệt đối; không có tỷ lệ phần trăm]
Sự kiện
Tên sự kiện được kích hoạt khi_______481 Không dùng nữa Bộ đệm đầu vào của
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
82 đã sẵn sàng để được xử lý. const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
83Trình duyệt có thể phát phương tiện, nhưng ước tính rằng không đủ dữ liệu đã được tải để phát phương tiện cho đến hết mà không phải dừng để tải thêm nội dung vào bộ đệm. const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
84Trình duyệt ước tính nó có thể phát phương tiện đến hết mà không dừng lại để lưu vào bộ đệm nội dung. const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
85Việc hiển thị của một const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
86 bị chấm dứt. const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
87Thuộc tính const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
88 đã được cập nhật. const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
89Các phương tiện đã trở nên trống rỗng; . AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg51Phát lại đã dừng vì đã đến cuối phương tiện.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg52Đã xảy ra lỗi khi tìm nạp dữ liệu phương tiện hoặc loại tài nguyên không phải là định dạng phương tiện được hỗ trợ.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg53Khung hình đầu tiên của phương tiện đã tải xong.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg54Siêu dữ liệu đã được tải.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg55Phát lại đã bị tạm dừng.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg56Phát lại đã bắt đầu.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg57Phát lại đã sẵn sàng bắt đầu sau khi bị tạm dừng hoặc trì hoãn do thiếu dữ liệu.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg58Được kích hoạt định kỳ khi trình duyệt tải tài nguyên.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg59Tốc độ phát lại đã thay đổi. Hoạt động tìm kiếm
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg50A đã hoàn thành.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg51A hoạt động tìm kiếm bắt đầu.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg52Tác nhân người dùng đang cố tìm nạp dữ liệu phương tiện, nhưng dữ liệu đột ngột không xuất hiện.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg53Tải dữ liệu phương tiện đã bị treo.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg54Thời gian được chỉ định bởi thuộc tính
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg55 đã được cập nhật.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg56Âm lượng đã thay đổi.
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg57Phát lại đã dừng do thiếu dữ liệu tạm thời.
ghi chú sử dụng
Không phải tất cả các trình duyệt đều hỗ trợ các định dạng video giống nhau;
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
9Chúng tôi cung cấp hướng dẫn cơ bản và kỹ lưỡng về các loại tệp phương tiện và hướng dẫn về codec được hỗ trợ cho video. Cũng có sẵn hướng dẫn về codec âm thanh có thể được sử dụng cùng với chúng
Ghi chú sử dụng khác
- Nếu bạn không chỉ định thuộc tính
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
0, video sẽ không bao gồm các điều khiển mặc định của trình duyệt; . Xem Tạo trình phát video trên nhiều trình duyệt để 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,
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
70 kích hoạt 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 tải xuống và phát lại phương tiện, cũng như trạng thái và vị trí phát lại - Bạn có thể sử dụng thuộc tính
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
72 để điều chỉnh vị trí của video trong khung của phần tử và thuộc tínhAddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
73 để kiểm soát cách điều chỉnh kích thước của video để vừa 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ử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
74 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ử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
5. Điều này có thể hữu ích nếu, ví dụ: bạn cần thực hiện âm thanh bằng bản ghi WebVTT, vì phần tửAddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
7 không cho phép phụ đề sử dụng WebVTT - Để kiểm tra nội dung dự phòng trên các trình duyệt hỗ trợ phần tử này, bạn có thể thay thế
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
5 bằng một phần tử không tồn tại nhưAddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg
78
Một nguồn thông tin chung tốt về cách sử dụng HTML
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5 là Hướng dẫn dành cho người mới bắt đầu sử dụng nội dung âm thanh và video
Tạo kiểu với CSS
Phần tử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5 là phần tử được thay thế — giá trị
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
01 của nó là const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
02 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úngKhông có sự cân nhắc đặc biệt nào đối với kiểu dáng
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5; . , sau đó cung cấp thông tin về kiểu dáng và bố cục theo yêu cầu. Khái niệm cơ bản về tạo kiểu trình phát video cung cấp một số kỹ thuật tạo kiểu hữu ích
Phát hiện thêm và xóa bản nhạc
Bạn có thể phát hiện thời điểm các bản nhạc được thêm vào và xóa khỏi phần tử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5 bằng cách sử dụng các sự kiện
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
07 và const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
08. 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ử AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5. Thay vào đó, chúng được gửi đến đối tượng danh sách bản nhạc trong phần tử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg70 của phần tử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5 tương ứng với loại bản nhạc đã đượ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];
};
12Một
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
13 chứa tất cả các rãnh âm thanh của phần tử phương tiện. Bạn có thể thêm một người nghe cho const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
07 vào đối tượng này để được thông báo khi các bản â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];
};
15Thêm một trình nghe
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
07 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];
};
17 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];
};
18Thêm trình xử lý sự kiện
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
07 vào const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
20 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 bản âm thanh được thêm vào hoặc xóa khỏi phần tử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5, 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 âm thanh được thêm vào và xóa khỏi phần tử và gọi một chức năng giả định trên trình chỉnh sửa bản nhạc để đă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 chỉnh sửa
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];
};
22 để lắng nghe các sự kiện const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
07 và const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
08Hỗ 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 dấu X [nếu JavaScript được bật]
Nếu bạn sử dụng Máy chủ web Apache để phân phát video Ogg Theora, bạn có thể khắc phục sự cố này bằng cách thêm phần mở rộng loại tệp video vào loại MIME "video/ogg". Phần mở rộng loại tệp video phổ biến nhất là ". ừm", ". ogv" hoặc ". ogg". Để thực hiện việc này, hãy chỉnh sửa "mime. loại" 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];
};
25 trong const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
26________số 8Nếu bạn cung cấp 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 phần mở rộng được các tệp video của bạn sử dụng [". webm" là loại phổ biến nhất] sang loại MIME "video/webm" thông qua "mime. loại" 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];
};
26const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
8Máy chủ lưu trữ web của bạn có thể cung cấp một giao diện dễ dàng để thay đổi cấu hình kiểu MIME cho các công nghệ mới cho đến khi có bản cập nhật toàn cầu một cách tự nhiên
ví dụ
nguồn đơn
Ví dụ này phá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 để điều khiển phát lại
HTML
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
9Kết quả
Cho đến khi video bắt đầu phát, hình ảnh được cung cấp trong 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];
};
98 đượ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ẽ hiển thịNhiều nguồn
Ví dụ này dựa trên ví dụ cuối cùng, cung cấp ba nguồn khác nhau cho phương tiện truyền thông;
HTML
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
8Kết quả
Ogg đầu tiên được thử. Nếu không chơi được thì thử AVI. 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 được hỗ trợ nếu tất cả các nguồn đều không thành công
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 cách sử dụng tham số
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
29 như một phần của chuỗi loại 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];
};
30, cho biết tệp này là video WebM sử dụng VP8 cho video và Vorbis cho âm thanhMối quan tâm về khả năng tiếp cận
Video phải cung cấp cả chú thích và bản chép lời mô tả chính xác nội dung của video [xem Thêm chú thích và phụ đề vào video HTML để biết thêm thông tin về cách triển khai những chú thích này]. Phụ đề cho phép những người bị mất thính lực hiểu được nội dung âm thanh của video khi video đang được phát, trong khi bản chép lời cho phép những người cần thêm thời gian có thể xem lại nội dung âm thanh ở tốc độ và định dạng phù hợp với họ
Cần lưu ý rằng mặc dù bạn có thể tạo phụ đề cho phương tiện chỉ có âm thanh, nhưng bạn chỉ có thể làm như vậy khi phát âm thanh trong phần tử
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5, vì vùng video của phần tử được sử dụng để hiển thị phụ đề. Đây là một trong những tình huống đặc biệt hữu ích khi phát âm thanh trong phần tử video
Nếu dịch vụ phụ đề tự động được sử dụng, điều quan trọng là phải xem lại nội dung được tạo để đảm bảo nội dung đó thể hiện chính xác video nguồn
Ngoài hộp thoại được nói, phụ đề và bản chép lời cũng phải xác định 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
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
8Chú thích không được 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];
};
32 VTT- Định dạng bản nhạc văn bản video trên web [WebVTT]
- WebAIM. Chú thích, Bản chép lời và Mô tả âm thanh
- MDN Hiểu về WCAG, Hướng dẫn 1. 2 lời 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
Danh mục nội dung Nội dung luồng, nội dung cụm từ, nội dung được nhúng. Nếu nó có thuộc tính
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg0. nội dung tương tác và nội dung sờ thấy được. nội dung được phép
Nếu phần tử 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];
};
2. không hoặc nhiều phần tử AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg74, theo sau là nội dung trong suốt không chứa phần tử phương tiện nào–không phải là
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg7 hoặc
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5
Khác. không hoặc nhiều phần tử
const elem = document.querySelector["video"];
elem.audioTracks.onaddtrack = [event] => {
trackEditor.addTrack[event.track];
};
elem.audioTracks.onremovetrack = [event] => {
trackEditor.removeTrack[event.track];
};
89, tiếp theo là không hoặc nhiều phần tử AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg74, tiếp theo là nội dung trong suốt không chứa phần tử phương tiện nào–đó không phải là
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg7 hoặc
AddType video/ogg .ogm AddType video/ogg .ogv AddType video/ogg .ogg5