vue 视频播放Vue-Video-Player

官网地址:https://www.npmjs.com/package/vue-video-player

1.输入命令:

　　　　　npm install vue-video-player --save

npm install --save videojs-contrib-hls

2.全局引入--main.js:

　　　　import VideoPlayer from 'vue-video-player'

　　　　import 'video.js/dist/video-js.css'

　　　　Vue.use(VideoPlayer)

3.页面对应的template文件:(想要引入的css有效,class名不能变)

　　<video-player class="video-player vjs-custom-skin" ref="videoPlayer" :playsinline="true"

@play="androidPlay($event)" //暂停视频事件

　　:options="playerOptions" ></video-player>

4.页面对应的script文件:

　　import "video.js/dist/video-js.css";

　　import "vue-video-player/src/custom-theme.css";

　　import "videojs-contrib-hls";

　　playerOptions: {

　　　　playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度

　　　　autoplay: false, //如果true,浏览器准备好时开始回放。

　　　　controls: true, //控制条

　　　　preload: "auto", //视频预加载

　　　　muted: false, //默认情况下将会消除任何音频。

　　　　loop: false, //导致视频一结束就重新开始。

　　　　language: "zh-CN",

　　　　aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）

　　　　fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。

　　　　sources: [

　　　　　　{

　　　　　　　　type: "video/mp4",

　　　　　　　　src: "http://vjs.zencdn.net/v/oceans.mp4"

　　　　　　}

　　　　],

　　　　poster:

　　　　"http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址

　　　　width: document.documentElement.clientWidth,

　　　　notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。　　　

　　　　controlBar: {

　　　　　　timeDivider: true,

　　　durationDisplay: true,

remainingTimeDisplay: false,

fullscreenToggle: false //全屏按钮是否显示

}

　　},

5.暂停视频事件（如果无关，可以略过）

　androidPlay(player) {

this.currentPlay = player.el_.children[0];

},

　在想要暂停视频的方法中

if (this.currentPlay) {

this.currentPlay.pause();

}