參考網址：
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上使用假全屏（顯示播放器控件而不是系統控件所需）
}
});
}
}
});
});
頁面效果
