一. 安装需要的模块
1 | npm install vue-video-player --save |
二. 如何引入插件
- 在plugins文件夹中添加video.js。内容如下
1
2
3
4
5
6import Vue from './node_modules/vue'
import VideoPlayer from './node_modules/vue-video-player'
import './node_modules/video.js/dist/video-js.css'
import './node_modules/vue-video-player/src/custom-theme.css'
// import './node_modules/videojs-contrib-hls';// hls 可自行添加
Vue.use(VideoPlayer)
三. 如何使用
在Nuxt.js框架配置文件中 nuxt.config.js 添加我们刚刚创建好的video.js文件 ssr设为false (不启用服务器端渲染)
1
2
3
4
5
6
7plugins: [
{ src: '~plugins/element-ui', ssr: true },
{ src: '~plugins/svj', ssr: false },
{ src: '~plugins/main', ssr: true },
{ src: '~plugins/video', ssr: false },
],在page中新增video.vue页面
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
<template>
<video-player
class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
></video-player>
</template>
<script>
export default {
data() {
return {
playerOptions: {
playbackRates: [0.7, 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: [
{ type: 'video/mp4', src:'http://oss-xzb.oss-cn-beijing.aliyuncs.com/Files/61749a95c3c1b700b4842d8585ff0812.mp4' }
],
poster: 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=40606c56972bd40746c7d4ff4b889e9c/377adab44aed2e73c29074528701a18b87d6fa57.jpg', //你的封面地址
width: '100%',
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
}
}
},
methods: {
onPlayerPlay(player) {},
onPlayerPause(player) {}
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
}
}
</script>
<style type="text/css" scoped>
.container {
background-color: #efefef;
min-height: 100%;
}
</style>
四. 踩坑和注意事项
- playerOptions.sources 的值是对象格式 我使用的类型是 type/mp4 不要直接照着网上
1
2{type: "application/x-mpegURL",
src: "video.m3u8" }
人家这个是m3u8格式的 你的是什么格式就填写什么格式的；不然打开就是错的提示1
2此视频暂无法播放，请稍后再试 这个也是配置中的展示信息
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
封面图采用网络地址 我使用相对路径和绝对路径发现并没有什么用 还爆出404找不到文件路径
1
poster: 'https://gss1.bdstatic.com/9vo3dSag_xI4khGkpoWK1HF6hhy/baike/s%3D220/sign=40606c56972bd40746c7d4ff4b889e9c/377adab44aed2e73c29074528701a18b87d6fa57.jpg'
如何获取当前的video的对象？
1
2
3
4<!-- 当前视频对象 -->
this.$refs.videoPlayer.player
1. 可以根据对象 获取当前视频播放时长：console.log(this.$refs.videoPlayer.player.currentTime(),'当前时间');
2. 可以根据对象 获取当前视频总时长console.log(this.$refs.videoPlayer.player.duration,"总时长");