vue-video-playe的使用并获取封面(视频第一帧)显示到播放器及上传到oss

先上代码：

<template>
  <div ref="faultTree">
    <video-player
      id="videoPlayer"
      class="video-player vjs-custom-skin"
      :playsinline="true"
      style="object-fit:fill"
      crossOrigin="Anonymous"
      :options="playerOptions"
      @loadeddata="findvideocover"
    ></video-player>
  </div>
</template>

<script>
import OSSUPLOAD from '../../../../utils/ossUpload';
import { SYSTERMNAME, MODULESNAME } from '../../../../utils/ossConst';
export default {
  props: {
    srcUrl: String,
    fileName: String,
  },
  watch: {
    // 更换视频地址
    srcUrl(val) {
      this.playerOptions.sources[0].src = val;
    }
  },
  data() {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            type: '', //这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
            src: this.srcUrl //url地址
          }
        ],
        poster: '', //你的封面地址（不传就有封面显示）
        // width: document.documentElement.clientWidth, //播放器宽度
        notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: false,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true //全屏按钮
        }
      }
    };
  },
  methods: {
    /** 获取图片的第一帧图
     * 通过这个方法传进来的player不能获取其poster对象，需要自己来获取，寻找内部子标签video，通过video获取第一帧图片获取。
     */
    findvideocover() {
      setTimeout(() => {
        const element = document.getElementById('videoPlayer');
        let video = element.firstChild.firstChild;
        //创建canvas对象
        const canvas = document.createElement('canvas');
        canvas.width = '448';
        canvas.height = '252';
        this.$nextTick(() => {
          // 利用canvas对象方法绘图
          canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
          // 转换成base64形式
          const dataURL = canvas.toDataURL('image/png'); // 这个就是图片的base64
          //上传到oss
          let bimBlob = this.dataURItoBlob(dataURL);
          OSSUPLOAD(
            this.$cookies.get('projectId'),
            bimBlob,
            this.fileName + `${new Date().toLocaleString()}`,
            SYSTERMNAME.lprn,
            MODULESNAME.memberinformation
          ).then(res => {
            this.$emit('getFramePath', res.url);
          });
        });
      }, 2000);
    },

    /** 转化为Blob*/
    dataURItoBlob(dataURI) {
      var byteString = atob(dataURI.split(',')[1]);
      var mimeString = dataURI
        .split(',')[0]
        .split(':')[1]
        .split(';')[0];
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeString });
    }
  }
};
</script>

需求：在播放器加载完成之后显示视频第一帧到播放器上，并上传封面地址到后台。

实现：第一步，显示封面

起初对vue-video-player播放器不太熟悉，看到引入插件的playerOptions对象中可以更改poster来显示封面地址，故尝试获取封面地址来对poster赋值并进行显示。但是搜寻无果，只搜到h5的video标签获取视频第一帧的方法，不适用于此插件，所以放弃。又看了此插件的英文官方文档，也没有找到关于获取视频第一帧方法。偶然的一次代码测试中，给playerOptions对象poster赋值为空的时候，第一帧竟然可以正常显示出来了。

实现：第二步，上传封面地址到后台。

以为显示出封面地址，那么就能轻而易举的通过插件的loadeddata方法参数player对象来获取到封面地址，但是该对象poster的值却是空的，也没有在其他属性中找到关于封面地址的信息。因为之前找到的关于h5的video标签获取第一帧的方法，测试的时候canvas.getContext(‘2d’).drawImage方法的第一个参数需要传一个video标签才能往下进行，故想到vue-vodeo-player插件是否也是封装的video标签来实现的呢，故查看了下插件的dom树还真是用的video来实现的，故获取到video标签并实现了此功能。

vue-video-player遇到其他的一些问题

1.aspectRatio：播放比例，该此属性值可以控制视频里画面比例。
2.this.playerOptions.sources[0].src = val; 在watch中监听播放地址变化，更改视频源。注意sources是一个list
3.期间也使用html2canvas想通过截图来获取封面上传oss获取到视频地址，但是因为html2canvas截图无法截取到视频中的封面，猜测是因为html2canvas不支持该标签。