vue中使用video标签

几年的前端工作中，竟然从来没用过video标签。实为惭愧。这次趁着做项目了解下video 标签的一些属性及方法。特此记录下，在vue项目中使用video 标签播放视频。

vue页面：

<template>
    <div class="device-wrap">
        <div class="frame">
          <p class="frame-name">摄像画面</p>
          <div class="frame-box">
            <video id="videoPlayer" width="100%" height="100%"
             object-fit='fill' autoplay="true" muted="muted" loop controls>
              <source src="../assets/images/video.mp4"  type="video/mp4">
            </video>
          </div>
            /* 下面img是将视频全屏的icon */
          <img class="frame-icon" src="../assets/images/full-screen.png"
           alt="" @click="fullScreen()">
        </div>
    </div>
</template>

HTML5 中的video标签：

一些方法：

methods: {
// 获取视频播放时长
    getVideoTime () {
      if (document.getElementById('videoPlayer')) {
        const videoPlayer = document.getElementById('videoPlayer');
        videoPlayer.addEventListener('timeupdate', () => {
          console.log(`当前的时间点是${videoPlayer.currentTime},视频长度是				  ${videoPlayer.duration}`);
        }, false);
      }
    },
    // 设置播放点，续播
    playBySeconds (num) {
      if (num && document.getElementById('videoPlayer')) {
        const myVideo = document.getElementById('videoPlayer');
        // myVideo.play();
        myVideo.currentTime = num;
      }
    },
    // 自定义全屏事件
    fullScreen() {
       const myVideo = document.getElementById('videoPlayer');
        if (myVideo.requestFullscreen) {
            myVideo.requestFullscreen()
        } else if (myVideo.mozRequestFullScreen) {
            myVideo.mozRequestFullScreen()
        } else if (myVideo.msRequestFullscreen) {
            myVideo.msRequestFullscreen()
        } else if (myVideo.webkitRequestFullscreen) {
            myVideo.webkitRequestFullScreen()
        }
    },
},
// 上述方法在mounted生命周期里调用
mounted () {
    this.getVideoTime();
    this.playBySeconds(30198 / 1000);
}

上面的方法是对一些特定需求做的。比如需求：后端向前端发送某时刻开始播放视频、当视频中的控件不显示，即controls = false时，需要自定义方法使视频全屏播放。

上面介绍是html5标签的video 标签，来载入视频播放功能的。一些特殊情景下，比如需要将web 页面放入ue 场景中，video 视频可能不播放。需要使用video.js 插件或者 vue-video-player组件。因地制宜吧！

CATALOG

FEATURED TAGS

FRIENDS