vue videojs使用-附带demo

demo地址：链接: https://pan.baidu.com/s/1R7StOgvUaBDYglmUYh4-2g 提取码: cj93

文件一：VideoPlayer.vue

<template>
    <div class="">
      <el-row :gutter="10">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <div class="kkkk">
                <el-button  type="danger" class="clickSync-item" size="mini" style="margin-top:10px;">
                  初始化的url
                </el-button>
                {{options.sources}}
            </div>
            
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:10px;">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
            <div class="mcs">
                <el-button  type="danger" class="clickSync-item" size="mini" style="margin-top:10px;">
                  被替换的url
                </el-button>
                {{options.sources}}
            </div>
            
        </el-col>
      </el-row>
      <el-row :gutter="10" style="margin-top:10px;">
        <el-col :xs="24" :sm="24" :md="24" :lg="24">
             <video ref="videoPlayer" class="video-js vjs-big-play-centered vjs-fluid"></video>
        </el-col>
    </el-row>
          
       
    </div>
</template>

<script>
import videojs from 'video.js';
import 'video.js/dist/video-js.css'
export default {
    name: "VideoPlayer",
    props: {
        options: {
            type: Object,
            default() {
                return {};
            }
        }
    },
    data() {
        return {
            player: null
        }
    },
    watch: {
      options: {
        handler: function(val, oldV) {
          //设置播放器的src
          console.log(val)
          this.player.src(val.sources[0].src);
          //重新加载播放器
          this.player.load();
        },
        deep: true
      }
    },
    mounted() {
        this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() {
            console.log('onPlayerReady', this);
        })
    },
    beforeDestroy() {
        if (this.player) {
            this.player.dispose()
        }
    }
}
</script>
<style scoped>
.mcs{
     background-color: #8695da;
}
.kkkk{
     background-color: #44ca4f;
}
.video-js{
  width: 120%!important;
  height: 100%!important;
}
.video-js .vjs-big-play-button {
  font-size: 3em;
  line-height: 42px!important;
  height: 50px!important;
  width: 50px!important;
  display: block;
  position: absolute!important;
  left:50%!important;
  top:50%!important;
  margin-top:-25px!important;
  margin-left:-25px!important;
  padding: 0;
  cursor: pointer;
  opacity: 1;
  border: 0.06666em solid #fff;
  background-color: #2B333F;
  background-color: rgba(43, 51, 63, 0.7);
  border-radius: 50%!important;
  -webkit-transition: all 0.4s;
  transition: all 0.4s; 
}
.vjs-paused .vjs-big-play-button,
.vjs-paused.vjs-has-started .vjs-big-play-button {
    display: block!important;
}
.myVideo-dimensions {
  width: 100%!important;
  height: 100%!important;
  display: block!important;
}
.vjs-poster{
  background-size: 100% 100%!important;
}
</style>

文件二：VideoPlayer.vue

<template>
  <div class="home">
    <!-- <img alt="Vue logo" src="../assets/logo.png"> -->
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-button  type="danger" class="clickSync-item" size="mini" style="margin-top:10px;">
          我是video组件
        </el-button>
        <!-- video -->
        <div class="player" style="with:500px;height:400px;">
          <video-player :options="videoOptions"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-button  type="danger" class="clickSync-item" size="mini" style="margin-top:10px;">
          我是home组件
        </el-button>
        <div class="sss">{{videoOptions}}</div>
        <!-- 切换视频源 -->
        <button size="mini" type="primary" @click="doPlayerPlay()">切换视频url地址</button>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import HelloWorld from '@/components/HelloWorld.vue'
import VideoPlayer from '@/components/VideoPlayer.vue'
export default {
  name: 'Home',
  data() {
    return {
      videoOptions: {
        autoplay: 'muted',//自动播放
        controls: true,//用户可以与之交互的控件
        loop:false,//视频一结束就重新开始
        muted:false,//默认情况下将使所有音频静音
        aspectRatio:"16:9",//显示比率
        fullscreen: {
          options: {
            navigationUI: 'hide'
            }
          },
        sources: [
            {
              //src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4",
              src: "https://media.w3.org/2010/05/sintel/trailer.mp4",
              stype: "video/mp4"
            }
          ]
        }
    }
  },
  components: {
    HelloWorld,
    VideoPlayer
  },
  methods: {
    //播放操作=============================================================================================================================start
    doPlayerPlay(row) {
      console.log("播放录制列表===================start");
      this.$message({showClose: true,message: "开始播放",type: 'success'})
      console.log("===================1");
      console.log(this);
      //测试地址：http://192.168.1.254:1420/Records?getfile=/80100__2021-0804-1120490__1280x720x25.mp4&playvideo=1
      //将要切换成目标video-url地址
      //this.videoOptions.sources[0]['src']='https://media.w3.org/2010/05/sintel/trailer.mp4'
      console.log('修改前:'+this.videoOptions.sources[0]['src']);
      if(this.videoOptions.sources[0]['src']==='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'){//如果是这个视频源，就切换成别的视频源
        this.videoOptions.sources[0]['src']='https://media.w3.org/2010/05/sintel/trailer.mp4'
      }else{
        this.videoOptions.sources[0]['src']='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
      }
      
      console.log('修改后:'+this.videoOptions.sources[0]['src']);
      console.log("播放录制列表===================end");
    }
  }
}
</script>
<style>
.sss{
   background-color: #9a9eca;
}
</style>