npm install vue-video-player --save
// 第一个是videoJs的样式,后一个是vue-video-player的样式,因为考虑到我其他业务组件可能也会用到视频播放,所以就放在了main.js内
require('video.js/dist/video-js.css')
require('vue-video-player/src/custom-theme.css')
//在main.js内
import VideoPlayer from 'vue-video-player'
Vue.use(VideoPlayer);
<template>
<div class="container">
<div class="player">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
@play="onPlayerPlay($event)"
@pause="onPlayerPause($event)"
>
video-player>
div>
div>
template>
<script>
import { videoPlayer } from 'vue-video-player';
export default {
data () {
return {
playerOptions: {
// playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
autoplay: false, //如果true,浏览器准备好时开始回放。
muted: false, // 默认情况下将会消除任何音频。
loop: false, // 导致视频一结束就重新开始。
preload: 'auto', // 建议浏览器在
language: 'zh-CN',
aspectRatio: '16:9', // 将播放器置于流畅模式,并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字(例如"16:9"或"4:3")
fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
sources: [{
type: "video/mp4",
src: "http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" //你的视频地址(必填)
}],
poster: "poster.jpg", //你的封面地址
width: document.documentElement.clientWidth,
notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
// controlBar: {
// timeDivider: true,
// durationDisplay: true,
// remainingTimeDisplay: false,
// fullscreenToggle: true //全屏按钮
// }
}
}
},
components: {
videoPlayer
},
methods: {
onPlayerPlay(player) {
alert("play");
},
onPlayerPause(player){
alert("pause");
},
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
}
}
script>
<style type="text/css" scoped>
.container {
background-color: #efefef;
min-height: 100%;
}
style>
注意:
1. video-player标签的class必须设置成“video-player vjs-custom-skin”,你引入的样式才能起作用。我刚开始做时,直接拷贝的github页的代码,那个代码的class是video-player-box。
2. 根据videoJS Api修改属性。我这里加了一些注释,可以参考。
3. 修改src、poster属性为你的服务器资源地址。
//安装依赖
npm install --save videojs-contrib-hls
//在main.js内引入
require('videojs-contrib-hls/dist/videojs-contrib-hls');
npm run dev
videoJs的播放按钮默认为椭圆形,我个人有点不习惯,所以修改成了圆形。
.video-js .vjs-big-play-button{
/*
播放按钮换成圆形
*/
height: 2em;
width: 2em;
line-height: 2em;
border-radius: 1em;
}
注意:
直接在 myPlayer.vue组件内增加样式会被覆盖,不论你有没有增加scoped属性,这取决于vue加载样式的顺序,之前查资料看了一个帖子,讲的很好,可惜找不着了。
我最终的解决方案是:自定义了一个css文件,使用require引入到了main.js内,放在上述样式引入之后。
require('video.js/dist/video-js.css');
require('vue-video-player/src/custom-theme.css');
require('@/../static/css/myVideoCss.css');
冲突是这样的:播放器在手机浏览器或者chrome开发者工具(手机尺寸)内,点击播放按钮,播放与暂停事件会被触发多次。
刚开始不知道什么原因,在github上提了个issure,刚提完就发现上一个关闭的issure解决的就是这个问题,这里得向作者道个歉,给您添堵了。哈哈。于是我看了另外一个人给的答案:与fastclick插件冲突……,但是….. 没有解决方案。然后我尝试注释掉了fastclick,果然是它影响的。
然后我去fastclick github 地址看了看 ,页面说的很清楚,只要在触发的元素上增加一个needsclick的class就可以了。
但是我试了好久都没有成功。这时候看到了神贴,大体浏览了一下fastclick的源码过程,并且作者提到“Fastclick 把 this.needsClick 放到了 ontouchEnd 末尾去执行,才导致前面说的加上了“needsclick”类名也无效的问题。”所以我想尝试修改fastclick的源码,并且验证一下。
const FastClick = require('@/../static/js/fastclick.js');
FastClick.attach(document.body);
return (/\bneedsclick\b/).test(target.className);
首先FastClick.prototype.needsClick方法是判断元素是否要保留穿透功能,而最后一行肯定是验证触发的元素的class是不是含有needsclick。所以我先猜测是不是我触发的元素没有加上class,所以console了target.className:
果然没有,并且发现一个规律,我需要控制的按钮都是以vjs开头的,所以,在验证上再增加一个验证。
return ((/\bneedsclick\b/).test(target.className) || (/\bvjs/).test(target.className));
"fastclick": "^1.0.6",
"videojs-contrib-hls": "^5.12.2",
"vue": "^2.2.2",
"vue-router": "^2.2.0",
"vue-video-player": "^4.0.6",