视频常用属性及方法 - video

视频常用属性及方法

<video id="video" src="vue-mobile/media/sh.mp4" controls poster="vue-mobile/media/video-bg.jpg" x5-playsinline="true" webkit-playsinline="true" playsinline="true" />

1、常用属性

• poster：视频封面
• loop：是否循环播放
• muted：静音播放
• autoplay：自动播放

2、苹果微信默认视频打开会全屏播放，使用以下属性后可禁止。

 x5-playsinline="true" webkit-playsinline="true" playsinline="true"

 3、获取视频常用值

• 视频总时长：video.duration
• 视频当前播放位置：video.currentTime
• 视频是暂停还是播放：video.paused
• 视频的播放是否已结束：video.ended

4、使用事件监听捕捉事件

  var video = document.getElementById("video");
  // 视频可以播放时触发
  video.addEventListener("canplay", () => {
    console.log("视频可以播放了");
  })

  // 在视频的元数据加载后执行，视频的元数据包含: 时长，尺寸大小（视频），文本轨道
  video.addEventListener("loadedmetadata", () => {
    // 从指定时间开始播放
    this.currentTime = videoStartTime;
  })

  // 视频点击播放时触发
  video.addEventListener("play", () => {
    console.log("视频播放了")
  })

  // 视频播放位置改变时触发
  video.addEventListener("timeupdate", () => {
    console.log("播放位置改变");
  }, false)

  // 视频暂停时触发
  video.addEventListener("pause", () => {
    console.log('视频暂停了')
  })

  // 视频结束时触发
  video.addEventListener("ended", () => {
    console.log('视频结束了')
  })

 5、使用方法来获取

// html
<video ref="video" @canplay="onCanplay" @timeupdate="timeUpdate" src="vue-mobile/media/sh.mp4" />

// javascript
<script>
export default {
  methods: {
    // 视频就绪可以开始播放时触发
    onCanplay() {
      console.log(this.$refs.video.duration, '视频总时长');
    },
    // 播放位置改变时触发
    timeUpdate() {
      console.log(this.$refs.video.currentTime, '当前播放位置');
    }
  }
}
</script>