视频 <video>

素材准备

点击下载素材宽屏、竖屏或自行准备

视频素材推荐：潮点视频

简介 Introduction

行盒 inline；可替换元素 - replaced element，同 <img>；可以设置大小
播放视频，常见格式有：mp4、avi 等
桌面端单击视频窗口可以触发播放或暂停；移动端不能，只能使用控制栏
默认情况下，没有播放控件，需要通过 JavaScript 控制
更多信息，请访问 MDN - <video>、HTML5 向网页嵌入视频和音频

<video src=""></video>

使用播放控件属性 controls 可视化控制

<video src="" controls></video>

标签属性 video attributes

标签属性 Attribute
item	desc
src	视频的URL，推荐使用 mp4 格式
autoplay	自动播放
controls	播放控制条
loop	重复播放
muted	静音播放
preload	预加载；如果使用 autoplay，则忽略该属性
poster	视频封面图像；可以使用 gif；大小应该和视频保持一致

CSS

初始化样式 Initialization

<video> 的 object-fit 默认是 contain，所以通常情况下无须特别设计；如果需要铺满，则应该设置为 cover
默认情况下，视频采用 16*9 的比例，最小尺寸是 640*360；其容器应该满足视频宽高比；调整容器时，应保证比例不变
指定封面时，应保证封面 cover 覆盖
以下各例均采用初始化样式 - 使用 MDN - aspect-ratio、aspect-ratio

.container{
  width: xxx;
  aspect-ratio: 16/9;
}

video {
    display: block;
    width: 100%;
    height: 100%;
}

早期容器样式 - 16:9 宽高比

.container {
  position: relative;
  padding-bottom: 56.25%; 
  height: 0;
  overflow: hidden;
}     
 
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

You can use the object-position property to adjust the positioning of the video within the element's frame, and the object-fit property to control how the video's size is adjusted to fit within the frame.

There are no special considerations for styling <video>; a common strategy is to give it a display value of block to make it easier to position, size, etc., and then provide styling and layout information as required.

[] 视频的可视化使用

添加 controls 属性方便可视化控制
添加 preload 属性可以预加载视频，避免卡顿
添加封面 poster 可以避免视频剪辑过程中头部的黑场/空白帧

<video src="../utils/video/alizee.mp4" controls preload poster="../imgs/alizee.jpg">您的浏览器不支持video标签</video>

JavaScript

媒体属性

用于 JavaScript 控制
大多和 HTML 标签属性一一对应
更多信息，请访问 video events

item	desc
autoplay	设置或返回是否在就绪（加载完成）后随即播放音频
currentTime	设置或返回音频中的当前播放位置；以秒计）
ended	返回音频的播放是否已结束
muted	设置或返回是否关闭声音
paused	设置或返回音频是否暂停
played	播放状态；返回表示音频已播放部分的 TimeRanges 对象
src	设置或返回音频的 src 属性的值
volume	设置或返回音频的音量： 0.0（静音）- 1.0（最大声）

媒体事件

利用事件对视频流进行控制

video.addEventListener('loadstart', () => {
    console.log('1.loadstart');
    console.log('duration', video.duration);
})
video.addEventListener('durationchange', () => {
    console.log('2.durationchange');
    console.log('duration', video.duration);
})
video.addEventListener('loadedmetadata', () => {
    console.log('3.loadedmetadata');
    console.log('duration', video.duration);
})
video.addEventListener('loadeddata', () => {
    console.log('4.loadeddata');
})
video.addEventListener('progress', () => {
    console.log('progress');
})
video.addEventListener('canplay', () => {
    console.log('5.canplay');
})
video.addEventListener('play', () => {
    console.log('play');
})
video.addEventListener('playing', () => {
    console.log('playing');
})
video.addEventListener('pause', () => {
    console.log('pause');
})
video.addEventListener('seeking', () => {
    console.log('seeking');
})
video.addEventListener('seeked', () => {
    console.log('seeked');
})
video.addEventListener('ended', () => {
    console.log('ended');
})
video.addEventListener('error', () => {
    console.log('error');
})
video.addEventListener('timeupdate', () => {
    let current = video.currentTime;
    console.log('timeupdate', current);
})

快进快退

function adjustVideo(val) {
  myVideo.currentTime += val
}
pre.addEventListener('click', () => {
  adjustVideo(-5);
})
next.addEventListener('click', () => {
  adjustVideo(5);
})

音量增减 - 开始是0.5；如何越界检测

function adjustVol(val) {
  if(myVideo.volume < 1){
    myVideo.volume += val
  }
}
va.addEventListener('click', () => {
  if(myVideo.volume < 1){
    adjustVol(0.1);
  }
})
vs.addEventListener('click', () => {
  if(myVideo.volume > 0){
    adjustVol(-0.1);
  }
})

案例 Cases

[] 首页全屏背景视频

视频全覆盖 cover
其它元素通过定位 position，显示在视频上方

video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

[] 视频播放

方案1：引导用户互动打开播放

方案2：先静音播放，再根据播放状态，如是否能自动播放，取消静音

[] 微课

使用 <figure> 实现
可以定制更多信息

[] 视频预览和播放

鼠标移入 mouseover 循环播放视频，同时显示播放控件，方便用户进一步操作
鼠标移出 mouseout 暂停播放，取消播放控件

let pre = document.querySelector("#pre");
pre.loop = true;
pre.addEventListener('mouseover', () => {
    pre.controls = true;
    pre.play();
})
pre.addEventListener('mouseout', () => {
    pre.controls = false;
    pre.pause();
})

[] 使用字幕

准备视频

<video src="/utils/video/flag.mp4" controls muted autoplay loop>
</video>

准备字幕 - 手动或下载
- 后缀名是.vtt，如 demo.vtt
- 必须以 WEBVTT 开始；建议全部大写
- 可以使用定位指令指定字幕出现的位置 line 和对齐 align；默认是底部、居中对齐
```
WEBVTT

00:00:01.000 --> 00:00:04.000
这是第一段字幕

00:00:05.000 --> 00:00:08.000 line:100%
这是第二段字幕

00:00:09.000 --> 00:00:12.000 line:90% align:left
这是第三段字幕
```
引入字幕 - 使用 <track>，指定 src 等属性；default 默认开启字幕

<video src="/utils/video/flag.mp4" controls muted autoplay loop>
  <track kind="captions" src="./demo.vtt" default />
</video>

设置字幕样式 - 使用伪元素 ::cue；默认是白底黑字

::cue {
  background-color: transparent;
  font-size: 20px;
  color: #fff;
}

优化字幕 - 提高多语言支持；需要多个语言字幕

<video src="/utils/video/flag.mp4" controls muted autoplay loop>
  <track kind="subtitles" src="./demo_en.vtt" default label="English" srclang="en" />
  <track kind="subtitles" src="./demo_zh.vtt" default label="Chinese" srclang="zh" />
</video>

视频