vue.js中使用video.js

页面代码

<template>
 <div id="app">
  <div class="video">
   <PlayVideo :videoUrl="videoUrl"></PlayVideo>
  </div>
 </div>
</template>

<script>
 import PlayVideo from '../components/PlayVideo.vue'
 export default {
  name: 'Detail',
 components: {

  PlayVideo,
  
  
   },
   data(){
   return{
    id:"myvideo",
    videoUrl:"https://cctvwbndks.v.kcdnvip.com/cctvwbnd/cctv1_2/index.m3u8",
   }
  },
  mounted() {
   
    //videoUrl="https://cctvwbndks.v.kcdnvip.com/cctvwbnd/cctv1_2/index.m3u8";
    //console.log(videoUrl);
  },
 }
 
 </script>
 
 <style style="scss">
 #app {
   font-family: 'Avenir', Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
   color: #2c3e50;
   margin-top: 60px;
 }
 </style>
</script>

<style>
</style>

组件

<template>
 <video id="myvideo" style="width: 100%;height: 100%;" class="video-js vjs-default-skin vjs-big-play-centered" >
  <!-- <source src="rtsp://8.140.174.140:8045/s1" type="application/x-mpegURL"> -->
  <source :src="videoUrl" type="application/x-mpegURL">

  <!-- 勿删 -->
  <!-- <source :src="url" :type="url.endsWith('m3u8')?'application/x-mpegURL':url.endsWith('mp4')?'video/mp4':''"> -->

  <!-- <source :src="url"> -->
 </video>
</template>
<script>
 import videojs from 'video.js'
 import "@videojs/http-streaming"
 import 'video.js/dist/video-js.css'
 export default {
  props: {
   videoUrl: {
    default: "",
    type: String
   }
  },
  data() {
   return {
    player: null,
   }
  },
  watch: {
   videoUrl() { // 监听url，动态修改video的src
    this.updateUrl()
   }
  },
  mounted() {
   setTimeout(() => {
    this.init();
   }, 200);
  },
  methods: {
   init() {
    // 播放器初始化
    console.log(this.videoUrl);
    this.player = videojs('myvideo', {
     title: "这是一个标题",
     width: '100%',
     //height: '100%',
     playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
     autoDisable: true,
     preload: 'none', //auto - 当页面加载后载入整个视频 meta - 当页面加载后只载入元数据 none - 当页面加载后不载入视频
     language: 'zh-CN',
     fluid: true, // 自适应宽高
     muted: false, //  是否静音
     aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
     controls: true, //是否拥有控制条 【默认true】,如果设为false ,那么只能通过api进行控制了。也就是说界面上不会出现任何控制按钮
     autoplay: false, //如果true,浏览器准备好时开始回放。 autoplay: "muted", // //自动播放属性,muted:静音播放
     loop: false, // 导致视频一结束就重新开始。 视频播放结束后，是否循环播放
     techOrder: ['html5', 'flash'], //播放顺序
     screenshot: true,


    }, function() {
     //this.play() // 自动播放
    })
   },
   //  修改video的src
   updateUrl() {
    console.log(this.videoUrl);
    this.player.src(this.videoUrl)
    this.player.play()
   },
  },

  // 离开页面销毁视频播放器
  beforeDestroy() {
   if (this.player != null) {
    this.player.dispose() // dispose()会直接删除Dom元素
   }
  }
 }
</script>
<style>
 .video-js .vjs-time-control {
  display: block !important;
 }

 .video-js .vjs-remaining-time {
  display: none !important;
 }

 .video-js .vjs-big-play-button {
  font-size: 2.5em !important;
  line-height: 2.3em !important;
  height: 2.5em !important;
  width: 2.5em !important;
  -webkit-border-radius: 2.5em !important;
  -moz-border-radius: 2.5em !important;
  border-radius: 2.5em !important;
  background-color: #73859f;
  background-color: rgba(115, 133, 159, 0.5) !important;
  border-width: 0.15em !important;
  margin-top: -1.25em !important;
  margin-left: -1.25em !important;
 }

 .vjs-big-play-button .vjs-icon-placeholder {
  font-size: 1.63em !important;
 }

 .vjs-paused .vjs-big-play-button,
 .vjs-paused.vjs-has-started .vjs-big-play-button {
  display: block !important;
 }
</style>