html5中video的使用心得

未经他人苦，莫劝他人善

初次接触视频相关的内容，查阅文档之后基本满足项目简单需求。

罗列一下实现的功能

• video在一个弹窗里进行展示
• 打开弹窗，自动播放视频
• 关闭弹窗，停止播放视频并将播放时间重置

使用技术

vue 、 video标签

遇到的问题

首次打开该视频，就自动播放。但是当关掉弹窗，再次打开时就不会自动播放了。

页面效果：

功能逻辑：
点击图片，打开弹窗，自动播放

实现效果的代码

<template>
  <div class="item_container">
    <div class="img_wrapepr">
      <img :src="videoItem.src" alt="img load error" @click="centerDialogVisible = true" />
    </div>
    <p>{{videoItem.desc}}</p>
    <el-dialog
      class="dialog_wrapper"
      :visible.sync="centerDialogVisible"
      width="70%"
      :before-close="closeDialog"
    >
      <video
        ref="mediaVideo"
        :style="{width:'100%'}"
        :src="videoItem.url"
        controls="controls"
      >您的浏览器不支持 video 标签。</video>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "item",
  props: {
    videoItem: {
      type: Object
    }
  },
  data() {
    return {
      // 弹窗显示状态
      centerDialogVisible: false
    };
  },
  watch: {
  // 监听弹窗显示状态
  // 当状态为真时，获取video元素，进行播放操作
  // 并不需要设置首次监听   immediate:true 因为弹窗状态默认为false
    centerDialogVisible: {
      handler() {
        const that = this;
        if (!this.centerDialogVisible) return;
        this.$nextTick(() => {
          that.$refs.mediaVideo.play();
        });
      }
    }
  },
  methods: {
    // 关闭弹窗
    // 当关闭弹窗时，需要将播放时间重置并关闭，如果不重置，再次打开时依旧在当前进度
    closeDialog() {
      this.centerDialogVisible = false;
      let Media = this.$refs.mediaVideo;
      Media.currentTime = 0;
      Media.pause();
    }
  }
};
</script>

---

---

---

video标签可配置的基本属性

• autoplay：如果出现该属性，则视频加载就绪会自动播放。
• controls: 显示空间，如：播放按钮
• height width: 设置视频播放器的高度以及宽度
• loop: 是否循环播放
• muted: 是否静音播放
• poster:视频下载时显示的图像，或者在用户点击播放按钮前显示的图像
• preload:如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
• src:播放的视频的 URL

常用属性：

Media.play(); //播放
Media.pause(); //暂停
Media.paused = bool; //是否暂停           bool为Boolean值  
Media.ended = bool; //是否结束            bool为Boolean值
Media.autoPlay = bool; //是否自动播放     bool为Boolean值
Media.loop = bool; //是否循环播放         bool为Boolean值
Media.controls;//是否有默认控制条         bool为Boolean值
Media.currentTime = value;  //当前播放的位置，赋值可改变位置  value单位为s
Media.volume = value; //音量   
Media.muted = bool; //静音              bool为Boolean值

js可操作的video相关事件

首先要获取元素：

 <video 
 		ref="mediaVideo" 
 		:style="{width:'100%'}" 
 		:src="videoItem.url" 
 		controls="controls">
 		
	 	您的浏览器不支持 video 标签。
	 	
 </video>
<script>
export default {
   methods:{
   		operationDom(){
   			const Media = this.$refs.mediaVideo
   	}
   }

}
</script>

Media获取方式如上⬆️
可操作事件如下⬇️

Media.error; //null:正常
Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效
//网络状态
- Media.currentSrc; //返回当前资源的URL
- Media.src = value; //返回或设置当前资源的URL
- Media.canPlayType(type); //是否能播放某种格式的资源
- Media.networkState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源
- Media.load(); //重新加载src指定的资源
- Media.buffered; //返回已缓冲区域，TimeRanges
- Media.preload; //none:不预载 metadata:预载资源信息 auto:准备状态
- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA 3.HAVE_CURRENT_DATA 4.HAVE_FUTURE_DATA 5.HAVE_ENOUGH_DATA

- Media.seeking; //是否正在seeking
//回放状态
Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.defaultPlaybackRate = value;//默认的回放速度，可以设置
Media.playbackRate = value;//当前播放速度，设置后马上改变
Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文
Media.seekable; //返回可以seek的区域 TimeRanges
Media.ended; //是否结束
Media.autoPlay; //是否自动播放
Media.loop; //是否循环播放
Media.play(); //播放
Media.pause(); //暂停
//视频控制
Media.controls;//是否有默认控制条
Media.volume = value; //音量
Media.muted = value; //静音
TimeRanges(区域)对象
TimeRanges.length; //区域段数
TimeRanges.start(index) //第index段区域的开始位置
TimeRanges.end(index) //第index段区域的结束位置

//相关事件
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起）
eventTester("loadstart"); //客户端开始请求数据
eventTester("progress"); //客户端正在请求数据
eventTester("suspend"); //延迟下载
eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("stalled"); //网速失速
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("loadedmetadata"); //成功获取资源长度
eventTester("loadeddata"); //
eventTester("waiting"); //等待数据，并非错误
eventTester("playing"); //开始回放
eventTester("canplay"); //可以播放，但中途可能因为加载而暂停
eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕
eventTester("seeking"); //寻找中
eventTester("seeked"); //寻找完毕
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("durationchange"); //资源长度改变
eventTester("volumechange"); //音量改变