点击关注我！一起学前端！

前言：

自从flash停用后，好多项目的视频直播功能就瘫痪了，以前我们用的是Rtmp的流地址，必须采用flash插件才能播放，换了hls流地址，视频也能播放，但是只能播放单个的流，相对于四屏、六屏、九屏、多屏一起进行流地址播放，就有点鸡肋了，就不能播放出来了。

阅读本文章，你就可以实现多屏快速加载播放，而且可以解决困惑良久的问题——怎么停止hls格式流地址的请求？

实现方式

①安装vue-video-player

npm install vue-video-player --save

②在main.js引入vue-video-player

import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);

③增加hls.js支持，安装videojs-contrib-hls.js

npm install videojs-contrib-hls.js -s

④在组件内引用

//引入hls.js
import 'videojs-contrib-hls.js/src/videojs.hlsjs'

⑤组件<template>添加代码

<template>
		<video-player class="vjs-custom-skin" :options="playerOptions"></video-player>
</template>

⑥<script>添加代码

export default {
  data() {
    return {
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
        autoplay: true, //如果true,浏览器准备好时开始回放。
        controls: true, //控制条
        preload: 'auto', //视频预加载
        muted: false, //默认情况下将会消除任何音频。
        loop: false, //导致视频一结束就重新开始。
        language: 'zh-CN',
        aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'application/x-mpegURL', //注意一定要写成这样
          src: ''
        }],
        poster: "xxx", //你的封面地址
        width: document.documentElement.clientWidth,
        notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
      },
      sourceSrc:[]
    };
  },

⑦for循环向this.playerOptions['sources'][0]['src']赋值，例如：

for(var i=0; i<data.data.length; i++){
    this.playerOptions['sources'][0]['src']  = data.data.url
}

回调函数

组件示例：

<template>
	<div>
		<video-player class="video-player vjs-custom-skin"
			ref="videoPlayer"
			:playsinline="true"
			:options="playerOptions"
			@play="onPlayerPlay($event)"
			@pause="onPlayerPause($event)"
			@ended="onPlayerEnded($event)"
			@waiting="onPlayerWaiting($event)"
			@playing="onPlayerPlaying($event)"
			@loadeddata="onPlayerLoadeddata($event)"
			@timeupdate="onPlayerTimeupdate($event)"
			@canplay="onPlayerCanplay($event)"
			@canplaythrough="onPlayerCanplaythrough($event)"
			@statechanged="playerStateChanged($event)"
			@ready="playerReadied"
		>
		</video-player>
	</div>
</template>

函数示例：

<script>
  export default {
  methods: {
  // 播放回调
  onPlayerPlay(player) {
  	console.log('player play!', player)
  },

  // 暂停回调
  onPlayerPause(player) {
  	console.log('player pause!', player)
  },

  // 视频播完回调
  onPlayerEnded($event) {
  	console.log(player)
  },

  // DOM元素上的readyState更改导致播放停止
  onPlayerWaiting($event) {
  	console.log(player)
  },

  // 已开始播放回调
  onPlayerPlaying($event) {
  	console.log(player)
  },

  // 当播放器在当前播放位置下载数据时触发
  onPlayerLoadeddata($event) {
  	console.log(player)
  },

  // 当前播放位置发生变化时触发。
  onPlayerTimeupdate($event) {
  	console.log(player)
  },

  //媒体的readyState为HAVE_FUTURE_DATA或更高
  onPlayerCanplay(player) {
  // console.log('player Canplay!', player)
  },

  //媒体的readyState为HAVE_ENOUGH_DATA或更高。这意味着可以在不缓冲的情况下播放整个媒体文件。
  onPlayerCanplaythrough(player) {
  // console.log('player Canplaythrough!', player)
  },

  //播放状态改变回调
  playerStateChanged(playerCurrentState) {
 	 console.log('player current update state', playerCurrentState)
  },

  //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
  playerReadied(player) {
  	console.log('example player 1 readied', player);
  }

  },
  }
</script>

坑点：

1、必须安装hls.js依赖包

2、流地址的赋值（this.playerOptions['sources'][0]['src'] = '流地址'）

3、video-player标签的class必须设置成“video-player vjs-custom-skin”，你引入的样式才能起作用。

4、css文件的引入方式：如果在组件中引入，import 'video.js/dist/video-js.css' import 'vue-video-player/src/custom-theme.css'不起作用，必须在全局中这样引入require('video.js/dist/video-js.css') require('vue-video-player/src/custom-theme.css')

这样一来，基本上就没啥问题了。来看看效果：

感谢您的阅读！关注我，持续更新前端干货！