视频

<video>
素材准备
点击下载素材 宽屏、竖屏 或自行准备
视频素材推荐：潮点视频
概述
. 行盒 inline；可替换元素 - replaced element，同 <img>；可以设置大小
. 播放视频，常见格式有：mp4、avi 等
. 桌面端单击视频窗口可以触发播放或暂停；移动端不能，只能使用控制栏
. 默认情况下，没有播放控件，需要通过 JavaScript 控制
. 更多信息，请访问 MDN - <video>、HTML5 向网页嵌入视频和音频 
<video src=""></video>
. 使用播放控件属性 controls 可视化控制
<video src="" controls></video>
HTML属性
类别 说明
src 视频的URL，推荐使用 mp4 格式
autoplay 自动播放
controls 播放控制条
loop 重复播放
muted 静音播放
preload 预加载；如果使用 autoplay，则忽略该属性
poster 视频封面图像；可以使用 gif；大小应该和视频保持一致
初始化样式
. <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>
进阶使用 Advanced
媒体属性
. 用于 JavaScript 控制
. 大多和 HTML 标签属性一一对应
类别 说明
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);
  }
})
案例
[] 首页全屏背景视频
. 视频全覆盖 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();
})
总结与作业 Summary & Homework
总结 Summary
. 视频 <video>的使用
为了首页加载速度，通常不直接在主页放置视频；而是通过链接的方式转到单独的页面播放
如果坚持在首页展示，一般设置 mute和 preload，同时禁止 autoplay
JavaScript 控制时，不允许未经任何交互直接播放：play() failed because the user didn't interact with the document first.
作业 Homework
制作网站开场视频秀
制作个人视频素材库，扩充并完善到个人网站
如何使用字幕？