关于vue-video-player的使用心得

1.安装使用
直播流安装 vue-video-player与videojs-flash

npm install vue-video-player --save-dev
npm install videojs-flash --save-dev
其中videojs-flash 只能用npm安装，否则报错
The "flash" tech is undefined. Skipped browser support check for that tech”

2.安装后引入

main.js中引入
import VueVideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css' 
import 'vue-video-player/src/custom-theme.css' 
import 'videojs-flash'
import 'videojs-contrib-hls'  //.m3u8格式引入，可以直接引入，必须放到videojs-flash之后两个才都可以用，否则，flash报错
Vue.use(VueVideoPlayer)

3.sources两种引入格式

sources: [{
//rtmp流
  // type: 'rtmp/flv',
  // src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
//.m3u8部分
  type: "application/x-mpegURL",
  src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
//mp4格式
  //   type: "video/mp4",  // MP4
  //   src: "https://images.nnyun.net/lvEh8zLaKkJla-zndPHaHB1KMBUC"
}],

4.页面

<template>
<div class="all">
  <div class="header">header</div>
  <div class="content">
    <div class="left">left</div>
    <div class="right">
      <!-- <div class="videoName">视频播放名称</div> -->
      <div class="videoPlay">
        <video-player style="object-fit:fill"  class="vjs-custom-skin videoOut"
          ref="videoPlayer" 
          :events="events"  //（1）重点 启用部分视频按钮事件
          @fullscreenchange="onPlayerFullScreenchanges($event)"  //（3）调用事件
          :playsinline="true" 
          :options="playerOptions"
        ></video-player>
      </div>
    </div>
  </div>
  <div class="footer">footer</div>
</div>
</template>

<script>
import 'video.js/dist/video-js.css'
import {videoPlayer} from 'vue-video-player'
// import 'videojs-flash'
import 'videojs-contrib-hls'
export default {
  name: 'HelloWorld',
  data () {
    return {
      ls:'./assets/lgoin_bg.jpg',
      events: ['fullscreenchange'],  //（2）启用全屏切换事件，通过添加名称启用，否则没有效果
      playerOptions : {
        live: false,
        // height: '360',
        controls: true,
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: true, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '40:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        // techOrder: ['flash',] // 兼容顺序
        flash: {hls: {withCredentials: false}},
        // poster: './assets/lgoin_bg.jpg',
        sources: [{
          // type: 'rtmp/flv',
          // src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
          type: "application/x-mpegURL",
          src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
        }],
        poster: "", //未加载前的封面图片地址，网上地址http...这种，否则可能加载不出来（不知原因）
        // width: , //播放器宽度
        notSupportedMessage: '请选择视频播放文件', //允许覆盖Video.js无法播放媒体源时显示的默认信息。

        controlBar: {
          // timeDivider: true,
          // durationDisplay: true,
          remainingTimeDisplay: false,
          // currentTimeDisplay: true, // 当前时间
          // volumeControl: false, // 声音控制键
          playToggle: true, // 暂停和播放键
          // progressControl: true, // 进度条
          fullscreenToggle: "true" ,// 全屏按钮
        }
      },
    }
  },
  mounted(){
    console.log(document.documentElement.clientHeight)
  }
  methods（）{
  	onPlayerFullScreenchanges(e){
		//(4)
	}
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.all {
  width: 100%;
  height: 100%;
}
.header {
  width: 100%;
  height: 10%;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.content {
  height: 80%;
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
  position: relative;
}
.left {
  width: 200px;
  height: 100%;
  background-color: blue;
  position: absolute;
  left: 0;
  top: 0;
}
.right {
  margin-left: 200px;
  border: 1px solid #0ec;
  height: 100%;
  width: 100%;
  position: relative;
}
.videoName{
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  background-color: #000;
  color: #fff;
  position: absolute;
  left: 0;
  top: 0;
}
.videoPlay{
  /* padding-top: 40px; */
  box-sizing: border-box;
  position: absolute !important;
  height: 100%;
  width: 100%;
  border: 1px solid #aaa;
}
.videoOut{
  background-color: blue;
  display: block;
  /* height: 100%; */
  /* width: 100%; */
}
/*重要 配合aspectRatio视频比例可以让视频适应盒子大小-------start*/
.vjs-custom-skin {
    height: 100% !important;
}
.vjs-custom-skin /deep/ .video-js {
    width: 100% !important;
    height: 100%;
}
/*重要 配合aspectRatio视频比例可以让视频适应盒子大小-------end*/

.footer{
  height: 10%;
  width: 100%;
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
</style>