Vue视频插件（vue-video-player）_vue video player

前言

在新的项目中用到了大量的视频，由此也学习了一款vue的前端视频播放插件，接下来分享一下

vue-video-player安装

npm install vue-video-player --save
npm install --save video.js
1
2

文档

<template>
	<!-- video-player-box ==> video-player vjs-custom-skin -->
	// video-player标签的class必须设置成“video-player vjs-custom-skin”，你引入的样式才能起作用
	<video-player  
		class="video-player vjs-custom-skin"
		ref="videoPlayer"
		:options="playerOptions"
		:playsinline="true">
	</video-player>
</template>

<script>  
// 需要添加的配置
// videojs -- videoPlayer 核心  
// vue-video-player 是根据 videojs 进行了封装 所以必须导入video.js (video.js 已经被vue-video-player安装不需要重新安装 直接导入即可)
import videojs from 'video.js'
import 'vue-video-player/src/custom-theme.css';
// 根据官方文档配置发现没有效果
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'
export default {
  components: {
    videoPlayer
  },
  data() {
  	return {
  		playerOptions: {
		   // videojs options
		   muted: true,
		   language: 'en',
		   playbackRates: [0.7, 1.0, 1.5, 2.0],
		   sources: [{
		     type: "video/mp4",
		     src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
		   }],
		   poster: "/static/images/author.jpg",
		 }
  	}
  }
}
 ...
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

 <img class="st_log" :src="item.media_url+'?vframe/jpg/offset/1/w/120/h/90'" alt />
1

vue-video-player 安装完 可以在node_modules中查看 部分视频播放插件

vue-video-player 组件 根据自己的需求进行开发即可

<template>
  <div class="video">
    <video-player  
      class="video-player vjs-custom-skin"
      ref="videoPlayer"
      :playsinline="playsinline"
      customEventName="customstatechangedeventname"
      :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>
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css';

import videojs from 'video.js'
import { videoPlayer } from 'vue-video-player'

export default {
  name: 'videoComponents',
  components: {
    videoPlayer
  },
  props: {
    // 当前的options 配置
    selfOptions: Object,
    // 播放速度
    playbackRates: {
      type: Array,
      default: () => [0.7, 1.0, 1.5, 2.0]
    },
    // 封面
    poster: {
      type: String,
      // https://cz-video-photo.oss-cn-beijing.aliyuncs.com/20191108/aca6e6915d369e07db055127d3e3738c00001.jpg
      default: ''
    },
    // 视频无法播放时提示信息
    notSupportedMessage: {
      type: String,
      default: '此视频暂无法播放，请稍后再试!!!'
    },
    // 视频显示比例
    aspectRatio: {
      type: String,
      default: '16:9'
    },
    // 语言设置
    language: {
      type: String,
      default: 'zh-CN'
    },
    // 设置controBar 
    controlBar: {
      type: Object,
      default: ()=> ({
        timeDivider: true, // 当前时间和持续时间的分隔符
        durationDisplay: true, // 时长显示
        remainingTimeDisplay: false, // 剩下时间
        currentTimeDisplay: true, // 当前时间
        volumeControl: true, // 声音控制键
        playToggle: true, // 暂停和播放键
        progressControl: true, // 进度条
        fullscreenToggle: true // 全屏按钮
      })
    },
    // 数据源
    sources: {
      type: Array,
      default: () => (
        [{
          type: "video/mp4",
	      src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
        }]
      )
    },
    // 是否循环播放
    loop: Boolean,
    // 是否在不全屏状态下外放声音
    muted: Boolean,
    // 是否浏览器 准备好后自动播放
    autoplay: Boolean,
    // 是否直播
    isLive: Boolean,
  },
  data() {
    return {
      options: {
        playbackRates: this.playbackRates, // 播放速度
        autoplay: this.autoplay, // 如果true,浏览器准备好时开始回放。
        muted: this.muted, // 默认情况下将会消除任何音频。--- 不全屏播放的时候是否禁止声音外放
        loop: this.loop, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: this.language,
        aspectRatio: this.aspectRatio, // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: this.sources,
        poster: this.poster, // 你的封面地址
        width: document.documentElement.clientWidth, // 播放器宽度
        notSupportedMessage: this.notSupportedMessage, // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: this.controlBar,
        hls: true,
      },
      // 记录当前播放时间
      nowPlayer: null,
    }
  },
  computed: {
    // 当前播放对象实例
    videoObj() {
      return this.$refs.videoPlayer.player
    },
    // true表示默认情况下应尝试内联播放-false表示我们应使用浏览器的默认播放模式
    playsinline(){
      var ua = navigator.userAgent.toLocaleLowerCase();
      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
          return true
      }else{
          return true             
      }
    },
    
    // vue-video-player
    playerOptions() {
      if(this.isLive) {
        return {
          height: 300,
          sources: [{
            withCredentials: false,
            type: "application/x-mpegURL",
            src: "https://logos-channel.scaleengine.net/logos-channel/live/biblescreen-ad-free/playlist.m3u8"
          }],
          controlBar: {
            timeDivider: false,
            durationDisplay: false
          },
          flash: { hls: { withCredentials: false }},
          html5: { hls: { withCredentials: false }},
          controls: true
        }
      }else {
        if(this.selfOptions) {
          Object.assign(this.options, this.selfOptions)
          return this.options
        }else {
          return this.options;
        }
      }
      
    },

  },
  watch: {
  },
  mounted() {  
  },
  methods: {

    // 播放回调
    onPlayerPlay(player) {
      // 播放
      if(this.nowPlayer) {
        player.currentTime(this.nowPlayer)
      }
    },
    // 暂停回调
    onPlayerPause(player) {
    },
    // 视频播完回调
    onPlayerEnded(player) {
      this.nowPlayer = null;
    },
    // DOM元素上的readyState更改导致播放停止
    onPlayerWaiting(player) {
    },
    // 已开始播放回调
    onPlayerPlaying(player) {
    },
    // 当播放器在当前播放位置下载数据时触发
    onPlayerLoadeddata(player) {  
      // 直播每次播放都会调用--录播只是刚开始调用一次 
    },

    // 当前播放位置发生变化时触发。
    onPlayerTimeupdate(player) {
      // 获取到当前的播放时间
      this.nowPlayer = player.currentTime();
    },

    //媒体的readyState为HAVE_FUTURE_DATA或更高
    onPlayerCanplay(player) {
    },

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

    //播放状态改变回调
    playerStateChanged(playerCurrentState) {
    },

    //将侦听器绑定到组件的就绪状态。与事件监听器的不同之处在于，如果ready事件已经发生，它将立即触发该函数。。
    playerReadied(player) {
      if(this.isLive) {
        var hls = player.tech({ IWillNotUseThisInPlugins: true }).hls
        player.tech_.hls.xhr.beforeRequest = function(options) {
          // console.log(options)
          return options
        }
      }
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 播放按钮换成圆形 */
/deep/.vjs-custom-skin > .video-js .vjs-big-play-button {
  height: 2em;
  width: 2em;
  line-height: 2em;
  border-radius: 1em;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238

取视频第一帧做背景图

//'?vframe/jpg/offset/1/w/120/h/90'
 <img class="st_log" :src="item.media_url+'?vframe/jpg/offset/1/w/120/h/90'" alt />
1
2

要20岁了，加油