H5视频

1 简单描述

1 <video src=""><video> 用来播放视频的元素标签

2 支持 MP4 WebM Ogg 视频格式

3 <video src=""> 文案 </video>   // 默认不显示, 不支持该标签的时候显示 -> 感觉没啥写的必要

4 通过 video 对象相关 API 可以实现, 自定义播放控件等功能

2 常用标签属性

  1 视频路径: 
    <video src="./xx/xxx.mp4"> </video>   // 直接一个标签就可以播放我们的一个视频了

  3 常用属性: 
    <video src="" controls> </video>   // controls = 播放控件
    <video src="" muted> </video>   // muted = 静音播放
    <video src="" autoplay> </video>   // autoplay = 自动播放
    <video src="" loop> </video>   // loop = 循环播放

  4 样式属性: 
    <video src="" width="600" height="450" > </video>
    

3 关于 video 对象

1 video对象属性
  autoplay    是否自动播放
  controls    是否显示播放控件
  loop    是否为循环播放
  muted    是否为静音
  playbackRate    当前播放速度
  preload    预加载情况
  duration    整个媒体文件的播放时长，以s为单位  // 制作播放控制条
  currentTime    当前播放时间，以s为单位   // 制作播放控制条
  paused    如果媒体文件当前被暂停，则返回true   // 控制条用到
  volume    返回当前播放视频的音量  // [0 - 1]
  error    错误，正常为null

2 video对象方法
  load ( ) 方法用于重新加载src指定的媒体文件
  pause ( ) 方法用于暂停正在播放中的媒体文件
  play ( ) 方法用于播放媒体文件

3 video对象事件
  loadstart----------开始请求数据时触发
  progress----------正在请求数据时触发
  error--------------请求数据时遇到错误时触发
  play---------------开始播放时触发
  pause-------------暂停时触发
  timeupdate-------播放时间改变时触发
  ended-------------播放结束时触发
  volumechange--- 音量改变时触发
  canplay-----------可以播放时触发（加载了部分视频）
  canplaythrough---可以播放时触发（全部加载了视频）

4 video API 的测试

let video = document.querySelector(".video")
let btn = document.querySelector(".btn")
btn.onclick = function() {
  console.log(video.autoplay)   // true / fasle -> 控制是否播放
}