参考网址：
https://github.com/videojs/video.js
https://github.com/surmon-china/vue-video-player
https://www.freesion.com/article/4875170880/
https://www.npmjs.com/package/videojs-landscape-fullscreen
videojs官网地址：
https://videojs.com/getting-started/
https://docs.videojs.com/
这里我都是通过CDN的方式搭建项目，所以js等组件需要实现下载好
HTML页面代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- 引入vue -->
<script src="common/vue/vue.js" type="text/javascript" charset="utf-8"></script>
<!-- 引入jquery -->
<script src="common/jquery.js"></script>
<!-- 引入自己的基础样式 -->
<link rel="stylesheet" type="text/css" href="common/base.css"/>
<!-- element-ui引入样式 引入组件库-->
<link rel="stylesheet" href="common/element/css/element-ui.css">
<script src="common/element/js/element-ui.js"></script>
<!-- element-ui 拓展组件 -->
<script src="common/vue-element-extends/js/xe-utils.js"></script>
<script src="common/vue-element-extends/js/vue-element-extends-umd.js"></script>
<link rel="stylesheet" href="common/element-ui/index.css">
<!-- 引入本地的video.js 和 vue-video-player -->
<script src="common/video.min.js"></script>
<script src="common/videojs-landscape-fullscreen.min.js"></script>
<script src="common/vue-video-player.js"></script>
<link href="common/video-js.min.css" rel="stylesheet" />
<!-- vue-video-player提供的播放器自定义样式 -->
<link rel="stylesheet" href="common/custom-theme.css">
<script type="text/javascript">
Vue.use(window.VueVideoPlayer)
</script>
<!-- 当前页面的js和css -->
<link rel="stylesheet" type="text/css" href="css/vue-video-player-demo.css"/>
<script src="js/vue-video-player-demo.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app" class="padding-xl">
<h1>{{ title }}</h1>
<div class="player">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="playerOptions"
></video-player>
</div>
</div>
</body>
</html>
js代码
var app;
var player;
$(document).ready(function(){
app = new Vue({
el: '#app',
mounted: function () {
console.log("vue挂载完成");
},
data: {
title: 'vue-video-player-demo',
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: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
sources: [{
type: "video/mp4",//这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
src: "https://www.w3school.com.cn/example/html5/mov_bbb.mp4" //url地址
}],
poster: "", //你的封面地址
// width: document.documentElement.clientWidth, //播放器宽度
notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
controlBar: {
volumePanel: {
inline: false, // 不使用水平方式
}, // 音量控制
// volumePanel: false, // 隐藏音量控制
timeDivider: true, // 时间之间的分割线
durationDisplay: true, // 总时长
remainingTimeDisplay: false, // 隐藏剩余时长
fullscreenToggle: true //全屏按钮
} // 控制栏配置
}
},
mounted() {
this.$nextTick(function () {
app.initVideo();
//播放
player.on("play", function () {
console.log("点击了播放");
});
//暂停
player.on("pause", function () {
console.log("点击了暂停");
});
});
},
methods: {
/**
* 初始化视频
**/
initVideo: function () {
player = app.$refs.videoPlayer.player;
// 配置横屏插件
player.landscapeFullscreen({
fullscreen: {
enterOnRotate: true, //在横向旋转设备时进入全屏模式
alwaysInLandscapeMode: true, //即使设备处于纵向模式，也始终以横向模式进入全屏（适用于chromium、firefox和ie>=11）
iOS: true // 是否在iOS上使用假全屏（显示播放器控件而不是系统控件所需）
}
});
}
}
});
});
页面效果
