官网地址: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", //你的封面地址
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();
}