1. 跳帧
const videoDom = document.querySelector("#video")
// 加载资源间歇触发
videoDom.addEventListener("progress", () => {
console.log(111, `---------------->progress`)
})
// 跳帧开始
videoDom.addEventListener("seeked", () => {
console.log(111, `---------------->seeked`)
})
// 跳帧结束
videoDom.addEventListener("seeking", () => {
console.log(111, `---------------->seeking`)
})
2. poster
<body>
<figure>
<video src="https://media.w3.org/2010/05/sintel/trailer.mp4"
poster="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAOEiEo.img" controls></video>
<figcaption>哈哈哈</figcaption>
</figure>
</body>
3. fullscreen
<body>
<button id="full-screen">全屏</button>
<figure id="videoContainer">
<video src="https://media.w3.org/2010/05/sintel/trailer.mp4" muted autoplay></video>
</figure>
<script src="./index.js"></script>
</body>
const fullScreenBtn = document.querySelector("#full-screen")
const videoContainer = document.querySelector("#videoContainer")
fullScreenBtn.addEventListener("click", () => {
if (document.fullscreenElement !== null) {
// The document is in fullscreen mode
document.exitFullscreen()
} else {
// The document is not in fullscreen mode
videoContainer.requestFullscreen()
}
})
// 打开全屏 和 关闭全屏都会触发
document.addEventListener("fullscreenchange", (e) => {
console.log(e, `---------------->e`)
})
4. WebVTT
The MIME format of WebVTT is text/vtt. A WebVTT file always contain one or more lines time prompt(cue), as follows,
WEBVTT
00:01.000 --> 00:04.000
- Never drink liquid nitrogen.
00:05.000 --> 00:09.000
- It will perforate your stomach.
- You would die.
WebVTT 格式 文件 本质是 utf-8 编码的字符串，按照特殊格式编写
与http 报文 类似
第一行 WEBVTT 是必须的，类似头文件的识别功能
可以看出 [开始时间] ---> [结束时间] 然后换行 写字幕，然后两个换行写下个时间
时间格式是 mm:ss.ttt
4.1 annotation
- one line annotation
NOTE [write annotation here]
- multiple line annotation
NOTE [write annotation here]
[write annotation here]
NOTE
[write annotation here]
[write annotation here]
4.2 ::cue
.video::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
/* 可以通过::cue 伪类选择器，修改特定video的字幕信息 */
4.3 STYLE block
WEBVTT
STYLE
::cue {
background-image: linear-gradient(to bottom, dimgray, lightgray);
color: papayawhip;
}
/* Style blocks cannot use blank lines nor "dash dash greater than" */
NOTE comment blocks can be used between style blocks.
STYLE
::cue(b) {
color: peachpuff;
}
00:00:00.000 --> 00:00:10.000
- Hello <b>world</b>.
NOTE style blocks cannot appear after the first cue.
通过 STYLE 声明样式块
第二个样式块需要再次声明STYLE
NOTE 可以在两个样式块之间使用
样式块要在第一个字幕前出现
样式块不能使用空行还有破折号大于号
