etiqueta de video (obtenga la duración total del video, la hora actual del video, el método de reproducción y pausa, la portada del video)

A continuación se muestra el contenido del HTML.

  		<video
            id="video"
            @canplay="getVidDur()"
            ref="vueMiniPlayer"
            :controls="controls"
            :src="video_obj.video_url"
            :poster="imgUrl"
          ></video>

1. El método @canplay significa que la función que se ejecuta después de cargar el video se puede escribir directamente en los métodos. Una vez que se carga el video, el método se ejecuta automáticamente y no necesita ejecutarse nuevamente en el ciclo de vida. Puede agregar inicie la reproducción, pause la reproducción y finalice la reproducción del video y otros eventos, todo a continuación, tómelo usted mismo. La duración total del video, la duración de reproducción actual del video

  //获取视频播放时间
     getVidDur() {
    
    
      let _this=this
      var elevideo = document.getElementById("video");
//   console.log(elevideo.duration); //获取视频时长
//   console.log(elevideo.currentTime); //获取视频当前播放时间
    	elevideo.addEventListener('play', function () {
    
     //播放
        // console.log("开始播放");
        _this.getsetInterval()
    });
    // elevideo.addEventListener('playing', function () { //播放中
    //    console.log("播放中");
       
    // });
    // elevideo.addEventListener('waiting', function () { //加载
    //     console.log("加载中");
    // });
    elevideo.addEventListener('pause', function () {
    
     //暂停
        // console.log("暂停");
        clearInterval(_this.videotime)
    });
     elevideo.addEventListener('ended', function () {
    
     //结束
        // console.log("播放结束");
        clearInterval(_this.videotime)
    }, false);
    },

2. Se debe agregar el atributo :controls; de lo contrario, lo que se muestra es solo una imagen sin un botón de reproducción

3. El atributo de póster establece la portada predeterminada y la etiqueta de video toma el primer cuadro como portada de manera predeterminada. Para algunos videos, este atributo es necesario si no se puede mostrar el primer cuadro del video. Existen los siguientes métodos.
(1) Este método toma el segundo del video

 //获取封面
 //url参数传入视频的线上地址
      getVideoBase64(url) {
    
    
        let dataURL = '';
        let video = document.createElement("video");
        video.setAttribute('crossOrigin', 'anonymous');//处理跨域
        video.setAttribute('src', url);
        video.setAttribute('width', 610);//图片宽
        video.setAttribute('height', 340);//图片高
        video.currentTime = 0.5;//截取视频的秒
        video.addEventListener('loadeddata', () => {
    
    
          let canvas = document.createElement("canvas");
            let width = video.width; //canvas的尺寸和图片一样
            let height = video.height;
          canvas.width = width;
          canvas.height = height;
          canvas.getContext("2d").drawImage(video, 1, 1, width, height); //绘制canvas
          dataURL = canvas.toDataURL('image/jpeg'); //转换为base64
          this.imgUrl = dataURL;
          // 使用箭头函数就没必要使用this.$refs
          // this.$refs.myimg.src = dataURL;
          // this.$refs.myvideo.poster = dataURL;
        });
      },

(2) Este método toma los primeros cuadros del video. Los últimos 3 significan tomar el tercer cuadro del video, que se puede escribir directamente en la etiqueta del video, donde item.url es la dirección del video.

:poster="item.url + '?vframe/jpg/offset/3'"