::cue
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
* Some parts of this feature may have varying levels of support.
Phần tử giả CSS ::cue khớp với các cue WebVTT bên trong một phần tử được chọn.
Điều này có thể được dùng để tạo kiểu cho phụ đề và các cue khác trong media có VTT tracks.
Try it
video {
width: 100%;
}
video::cue {
font-size: 1rem;
color: yellow;
}
::cue(u) {
color: red;
}
<video controls src="/shared-assets/videos/friday.mp4">
<track
default
kind="captions"
srclang="vi"
src="/shared-assets/misc/friday.vtt" />
Sorry, your browser doesn't support embedded videos.
</video>
Các thuộc tính được áp dụng cho toàn bộ tập hợp cue như thể chúng là một đơn vị duy nhất. Ngoại lệ duy nhất là background và các thuộc tính viết dài của nó áp dụng cho từng cue riêng lẻ, để tránh tạo ra các hộp và che khuất các khu vực lớn bất ngờ của media.
Trong ví dụ trên, bộ chọn ::cue(u) chọn tất cả các phần tử <u> bên trong văn bản cue.
Cú pháp
::cue | ::cue(<selector>) {
/* ... */
}
Các thuộc tính được phép
Các quy tắc có bộ chọn bao gồm phần tử này chỉ có thể sử dụng các thuộc tính CSS sau:
backgroundbackground-attachmentbackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizecolorfontfont-familyfont-sizefont-stretchfont-stylefont-variantfont-weightline-heightopacityoutlineoutline-coloroutline-styleoutline-widthruby-positiontext-combine-uprighttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-decoration-thicknesstext-shadowvisibilitywhite-space
Ví dụ
Tạo kiểu cue WebVTT dạng chữ trắng trên nền đen
CSS sau đây đặt kiểu cue sao cho văn bản là màu trắng và nền là hộp đen trong suốt.
::cue {
color: white;
background-color: rgb(0 0 0 / 60%);
}
Tạo kiểu các đối tượng node nội bộ WebVTT
Văn bản cue có thể bao gồm các đối tượng node nội bộ dưới dạng các thẻ (tương tự các phần tử HTML) <c>, <i>, <b>, <u>, <ruby>, <rt>, <v>, và <lang>.
Bộ chọn ::cue() có thể được dùng để áp dụng các kiểu cho nội dung bên trong các thẻ này để tùy chỉnh cách hiển thị WebVTT track.
Hãy xem xét văn bản cue sau đây sử dụng thẻ <u> để gạch chân một số văn bản:
00:00:01.500 --> 00:00:02.999 line:80% Tell me, is the <u>lord of the universe</u> in?
CSS sau đây tùy chỉnh văn bản bên trong thẻ <u> với màu sắc và trang trí văn bản:
::cue(u) {
color: red;
text-decoration: wavy overline lime;
}
Đặc tả
| Thông số kỹ thuật |
|---|
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |