vue videojs插件中对于失败的回调

vue 写法

代码片段

<template>
  <div class="video">
    <video ref="myVideo"
      class="video-js"
      playsinline webkit-playsinline x5-playsinline
      :poster="videoInfo.cover"
    >
      <source :src="videoInfo.url" type="video/mp4"/>
    </video>
    <img v-show="isShowCover" class="cover" :src="videoInfo.cover">
    <div v-show="isShowCover" class="cover-mask"></div>
  </div>
</template>

<script>
import videojs from 'video.js'
import 'video.js/dist/video-js.css'
export default {
  mounted () {
    this.player = videojs(this.$refs.myVideo, this.options, function onPlayerReady () {
      this.on('error', function () {
        // 报错信息
        var mediaError = this.error()
        console.log('mediaError', mediaError)
      })
    })
  },
  beforeDestroy () {
    if (this.player) {
      this.player.dispose()
    }
  },
  props: {
    videoInfo: Object,
    isShowCover: Boolean
  },
  data () {
    return {
      player: null,
      options: {
        controls: true,
        preload: 'none'
      }
    }
  }
}
</script>
<style>
  .video .video-js{
    width: 100% ;
    height: 100% ;
  }
  .video .video-js .vjs-big-play-button {
    width:0.8rem;
    height:0.8rem;
    background: url('../../assets/img/icon/icon_task_video_play@2x.png') no-repeat center / 100%;
    border-radius: 50%;
    border: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
  }
  .video .video-js .vjs-big-play-button .vjs-icon-placeholder::before{
    content: '';
  }
</style>
<style scoped>
  .video {
    width: 100%;
    height: 3.62rem;
    margin-bottom: 0.28rem;
    position: relative;
  }
  .video video{
    width: 100%;
    background: #000;
  }
  .video video::-webkit-media-controls-fullscreen-button {
    display: none;
  }
  .video .cover{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
  }
  .video .cover-mask{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    cursor: pointer;
  }
</style>