vue中使用video-player 播放rtmp格式的视频，播放前有一小段黑屏

本文链接：https://blog.csdn.net/qq_42842709/article/details/84787591
问题：
在vue项目中使用video-player 播放rtsp格式的视频的时候，
若视频渲染比较慢的时候，会导致初始画面是黑屏的状态。
解决思路：监听播放状态，等数据加载完，页面可以渲染的时候再显示画面，在这之前做一个加载的动画
<template>
  <div class="videoBox" :style="{width:videoWidth,height:videoHeight}">
    <div v-if="isPause">
      <video-player class="vjs-custom-skin"
                    id="video-div"
                    ref="videoPlayer"
                    :options="playerOptions"
                    @ready="onPlayerReadied"
                    @play="onPlayerPlay($event)"
                    @pause="onPlayerPause($event)"

                    @loadeddata="onPlayerLoadeddata($event)"
                    @waiting="onPlayerWaiting($event)"
                    @playing="onPlayerPlaying($event)"
                    @timeupdate="onPlayerTimeupdate($event)"
                    @canplay="onPlayerCanplay($event)"
                    @canplaythrough="onPlayerCanplaythrough($event)"
                    @statechanged="playerStateChanged($event)">
      </video-player>
    </div>
    <div v-else>
      <video-player class="vjs-custom-skin"
                    ref="videoPlayer"
                    :options="playerOptions"
                    @ready="onPlayerReadied">
      </video-player>
    </div>

    <div class="bottomControlBar">
      <div class="fullWrap" >
        <img @click="fullScreenHandle" class="fullScreen_icon" src="../../../static/img/fullscreen.png" alt="">
      </div>
    </div>

    <div class="video-tip" v-show="showTip"><span class="video-tip-text">视频播放异常，请查看相机状态</span></div>
    <div class="loading" v-if="showLoading"></div>
  </div>
</template>
<script>
  export default {
    name: 'RtmpVideo',
    props: {
      playUrl: String,
      videoWidth: String,
      videoHeight: String,
      isPause:Boolean
    },
    data() {
      return {
        showTip:false,
        playerOptions: {
          autoplay: true,//自动播放
          preload:'auto',
          LoadingSpinner:true,
          // controls:false,  //控制条
          notSupportedMessage: '此视频暂无法播放，检查相机状态是否正常或请查看是否安装flash',//无法播放时显示的信息
          flash: {
            swf: '../../../static/VideoJS.swf'
          },
          techOrder: ['flash', 'html5'],// 兼容顺序
          sources: [                     // 流配置，数组形式，会根据兼容顺序自动切换
            {
              type: 'rtmp/mp4',
//               src: 'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov',
//               src: sessionStorage.getItem('videoUrl') || 'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov',
              src: sessionStorage.getItem('videoUrl')
            },
          ],
        },
        showLoading:false   //显示加载中
      }
    },
    mounted () {
      //监测浏览器是否安装了flash播放器
      this.isflashFn();
    },
    methods: {
      onPlayerReadied(player) {
        if(sessionStorage.getItem('videoUrl')== 'null'){
          this.showTip= true;
          return;
        }else {
          this.showTip= false;
        }

        this.$refs.videoPlayer.player.width_ = 640;
      },
      onPlayerPlay(event){    //播放
      },
      onPlayerPause(event){  //暂停

      },

      onPlayerLoadeddata(player) {
        const _this = this;
        player.on('loadedmetadata',function(){
          //加载到元数据后开始播放视频
          this.width=640;
          this.height=360;
          _this.showLoading = false;
        })
      },
      onPlayerWaiting(player) {
//         console.log('player Waiting!', player)
      },
      onPlayerPlaying(player) {
//         console.log('player Playing!', player)
      },
      onPlayerTimeupdate(player) {
//         console.log('player Timeupdate!',player)
      },
      onPlayerCanplay(player) {
//         console.log('player Canplay!', player)
      },

      //canplaythrough表示可是流畅播放了
      onPlayerCanplaythrough(player) {
        this.showLoading = true;
      },
      // or listen state event
      playerStateChanged(playerCurrentState) {
//         console.log('player current update state', playerCurrentState)
      },

      //---全屏
      fullScreenHandle(){   //全屏
        if(!this.player.isFullscreen()){
          this.player.requestFullscreen();
          this.player.isFullscreen(true);
        }else{
          this.player.exitFullscreen();
          this.player.isFullscreen(false);
        }
      },
      //--截图
      clipImg(){
        var domdiv = this.$refs.videoPlayer;
        html2canvas(document.getElementById("vjs_video_3_Flash_api")).then(function(canvas) {
          document.body.appendChild(canvas);
          var dataUrl = canvas.toDataURL();
          console.log(dataUrl);
        });
      }
    },
    computed:{
      player() {
        return this.$refs.videoPlayer.player
      }
    }
  }
</script>

<style scoped>
  .videoBox{
    position: relative;
  }
  #roomVideo{
    width: 640px;
    height: 360px;
  }
  .fullWrap{
    margin-right: 10px;
  }
  .bottomControlBar{
    width: 100%;
    height: 42px;
    line-height: 42px;
    background: rgba(0,0,0,0.4);
    position: absolute;
    text-align: right;
    bottom: 0px;
    color: white;
    font-size: 16px;
    opacity: 0;

    transition: 8s ;
  }
  .videoBox:hover .bottomControlBar{
    transition-property:none;
    opacity: 1;
  }
  .fullScreen_icon{
    width: 30px;
    height: 30px;
    cursor: pointer;
    vertical-align: middle;
  }
  .video-tip{
    position: absolute;
    width: 640px;
    height: 360px;
    top:0;
    left: 0;
    text-align: center;
    line-height: 120px;
    color: #F56C6C;
    background: url("../../../static/img/error/nodata.png") no-repeat;
    background-position: 50% 42%;
    z-index: 2;
  }
  .video-tip-text{
    position: absolute;
    top:263px;
    left: 200px;
  }
  .loading{
    width: 80px;
    height: 80px;
    background: url("../../../static/img/loading/sprite.png");
    background-repeat: no-repeat;
    position: absolute;
    top:33%;
    left: 44%;
    animation: loadingRun 3s steps(1,end) infinite;
  }
  /*-webkit-keyframes*/
  @keyframes loadingRun{
    0%{
      background-position: 0 0;
    }
    2%{
      background-position: 0 -80px;
    }
    4%{
      background-position: 0 -160px;
    }
    6%{
      background-position: 0 -240px;
    }
    8%{
      background-position: 0 -320px;
    }
    10%{
      background-position: 0 -400px;
    }
    12%{
      background-position: 0 -480px;
    }
    14%{
      background-position: 0 -560px;
    }
    16%{
      background-position: 0 -640px;
    }
    18%{
      background-position: 0 -720px;
    }
    20%{
      background-position: 0 -800px;
    }
    22%{
      background-position: 0 -880px;
    }
    24%{
      background-position: 0 -960px;
    }
    26%{
      background-position: 0 -1040px;
    }
    28%{
      background-position: 0 -1120px;
    }
    30%{
      background-position: 0 -1200px;
    }
    32%{
      background-position: 0px -1280px;
    }
    34%{
      background-position: 0px -1360px;
    }
    36%{
      background-position: 0px -1440px;
    }
    38%{
      background-position: 0px -1520px;
    }
    40%{
      background-position: 0px -1600px;
    }
    42%{
      background-position: 0px -1680px;
    }
    44%{
      background-position: 0px -1760px;
    }
    46%{
      background-position: 0px -1840px;
    }
    48%{
      background-position: 0px -1920px;
    }
    50%{
      background-position: 0px -2000px;
    }
    52%{
      background-position: 0px -2080px;
    }
    54%{
      background-position: 0px -2160px;
    }
    56%{
      background-position: 0px -2240px;
    }
    58%{
      background-position: 0px -2320px;
    }
    60%{
      background-position: 0px -2400px;
    }
    62%{
      background-position: 0px -2480px;
    }
    64%{
      background-position: 0px -2560px;
    }
    68%{
      background-position: 0px -2640px;
    }
    70%{
      background-position: 0px -2720px;
    }
    72%{
      background-position: 0px -2800px;
    }
    74.5%{
      background-position: 0px -2880px;
    }
    76.5%{
      background-position: 0px -2960px;
    }
    78.5%{
      background-position: 0px -3040px;
    }
    80.5%{
      background-position: 0px -3120px;
    }
    82.5%{
      background-position: 0px -3200px;
    }
    84.5%{
      background-position: 0px -3280px;
    }
    86.5%{
      background-position: 0px -3660px;
    }
    89%{
      background-position: 0px -3440px;
    }
    91.5%{
      background-position: 0px -3520px;
    }
    93.5%{
      background-position: 0px -3600px;
    }
    94%{
      background-position: 0px -3680px;
    }
    97.5%{
      background-position: 0px -3760px;
    }
    100%{
      background-position: 0px -3840px;
    }
  }
</style>