视频组件：vue-video-player

一、下载

cnpm install vue-video-player -S

二、main.js引用

import VideoPlayer from 'vue-video-player'
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
Vue.use(VideoPlayer) // 引入video视频

三、【html】里引入组件

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

四、在【data】 中进行组件配置

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

五、判断当前视频地址是否加载成功

/**
* 判断在售商品视频是否加载成功
* @param videoUrl {String} 商品条码拼接成的视频地址
* @param infoImg {String} 商品条码拼接成的主图地址
*/
isVideoShow() {
  let that = this;
  var video = document.createElement('video');
  video.onload = function() {
  }
 video.onerror = function() {
     that.isVideo = true;
     that.playerOptions.poster =  '';
     that.playerOptions['sources'][0]['src'] = '';
 }
 video.src = that.videoUrl;
    //不同浏览器情况不同，这里判断在该浏览器是否可以播放
   video.oncanplaythrough = function() {
      that.isVideo = false;
      that.playerOptions.poster = that.imgSrc;
      that.playerOptions['sources'][0]['src'] = that.videoUrl;
  };
},

六、判断当前视频地址能否加载成功 =》 全部方案

1. 跨域

var video = document.createElement('video');

video.onload = function() {
    alert('success, it exsist');
    // show video element
}

video.onerror = function() {
    alert('error, couldn\'t load');
    // don't show video element
}

video.src = 'http://www.example.com/video.mp4';
//不同浏览器情况不同，这里判断在该浏览器是否可以播放
video.oncanplaythrough = function() {
    alert("This file can be played in the current browser");
};

2. 不跨域

var http = new XMLHttpRequest();
http.open('HEAD', '/folder/video.mp4');

http.onreadystatechange = function() {
    if (this.readyState == this.DONE) {
        if (this.status != 404) {
          // resource exists
        }
    }
};

http.send();

七、原生视频 【不会变形且填满整个画布】

<div style="width:100%;position:relative;padding-bottom:56.25%; /*需要用padding来维持16:9比例,也就是9除以16*/height: 0;">
  // videoSrc 视频地址
  <video :src="videoSrc" controls="controls" autoplay="autoplay" style="position: absolute;top:0;left: 0;width: 100%;height: 100%"></video>
</div>