视频流播放

1、视频流播放 -- video

原生
<video width="100%" height="680" controls="controls" 
    controlslist="nodownload" preload="auto" style="margin-top: 10px;">
   <source :src="videoPath" type="video/mp4">
 </video>


 let videoPath = 'http://xxx.xx.com/base/videoFileDetails/getVideos?id=40288238b'

2、视频流播放 -- vue-video-player

1、npm install vue-video-player --save
2、当前组件引入，也可以在main.js里面引入

import { videoPlayer } from 'vue-video-player'
// import 'video.js/dist/video-js.css'
require('video.js/dist/video-js.css')
import 'vue-video-player/src/custom-theme.css'

3、页面应用 -- vue-video-player

<video-player  class="video-player vjs-custom-skin"
               ref="videoPlayer"
               :playsinline="true"
               :options="playerOptions"
></video-player>

playerOptions : {
  playbackRates: [0.5, 1.0, 1.5, 2.0], //播放速度
  autoplay: false, //如果true,浏览器准备好时开始回放。
  muted: false, // 默认情况下将会消除任何音频。
  loop: false, // 导致视频一结束就重新开始。
  preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
  language: 'zh-CN',
  aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
  fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
  sources: [{
    src: '',  // 路径
    type: 'video/mp4'  // 类型
  }],
  // poster: "../../static/images/test.jpg", //你的封面地址
  // width: document.documentElement.clientWidth,
  notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
  controlBar: {
    timeDivider : true,//当前时间和持续时间的分隔符
    durationDisplay : true,//显示持续时间
    remainingTimeDisplay : true,//是否显示剩余时间功能
    fullscreenToggle: true,  //全屏按钮
    // currentTimeDisplay: false, // 当前时间
    // volumeControl: false, // 声音控制键
    // playToggle: true, // 暂停和播放键
    // progressControl: true, // 进度条
  }
},
videoPath:process.env.VUE_APP_API_BASE_URL+'/base/videoFileDetails/getVideos?id='

this.playerOptions.sources[0].src = this.videoPath+id;

# 特别提醒：video src不能直接在标签上写地址，需要用变量赋值（原因暂时没研究明白）