TextTrackList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Giao diện TextTrackList được dùng để đại diện cho danh sách các text track được định nghĩa cho phần tử video hoặc audio liên quan, mỗi track được đại diện bởi một đối tượng TextTrack riêng biệt trong danh sách.
Các text track có thể được thêm vào một phần tử media một cách khai báo bằng phần tử <track> hoặc theo chương trình bằng phương thức HTMLMediaElement.addTextTrack().
Một phiên bản của đối tượng này có thể được truy xuất bằng thuộc tính textTracks của một đối tượng HTMLMediaElement.
Đối với một đối tượng HTMLMediaElement media cụ thể, các track riêng lẻ có thể được truy cập bằng:
media.TextTracks[n], để lấy track văn bản thứ n từ danh sách text track của đối tượng- phương thức
media.textTracks.getTrackById()
Thuộc tính phiên bản
Giao diện này cũng kế thừa các thuộc tính từ giao diện cha, EventTarget.
lengthRead only-
Số lượng track trong danh sách.
Phương thức phiên bản
Giao diện này cũng kế thừa các phương thức từ giao diện cha, EventTarget.
getTrackById()-
Trả về
TextTrackđược tìm thấy trongTextTrackListcóidkhớp với chuỗi được chỉ định. Nếu không tìm thấy kết quả phù hợp,nullđược trả về.
Sự kiện
addtrack-
Được kích hoạt khi một text track mới được thêm vào phần tử media. Cũng có thể truy cập qua thuộc tính
onaddtrack. change-
Được kích hoạt khi một text track được kích hoạt hoặc vô hiệu hóa. Cũng có thể truy cập qua thuộc tính
onchange. removetrack-
Được kích hoạt khi một text track mới bị xóa khỏi phần tử media. Cũng có thể truy cập qua thuộc tính
onremovetrack.
Ghi chú sử dụng
Ngoài việc có thể truy cập trực tiếp các text track có trên phần tử media, TextTrackList cho phép bạn thiết lập trình xử lý sự kiện cho các sự kiện addtrack và removetrack, để bạn có thể phát hiện khi track được thêm vào hoặc xóa khỏi luồng của phần tử media.
Ví dụ
Lấy danh sách text track của phần tử video
Để lấy TextTrackList của một phần tử media, hãy sử dụng thuộc tính textTracks của nó.
const textTracks = document.querySelector("video").textTracks;
Theo dõi thay đổi số lượng track
Trong ví dụ này, chúng ta có một ứng dụng hiển thị thông tin về số lượng kênh có sẵn. Để cập nhật liên tục, các trình xử lý sự kiện addtrack và removetrack được thiết lập.
textTracks.onaddtrack = updateTrackCount;
textTracks.onremovetrack = updateTrackCount;
function updateTrackCount(event) {
trackCount = textTracks.length;
drawTrackCountIndicator(trackCount);
}
Thông số kỹ thuật
| Specification |
|---|
| HTML # text-track-api |