vue中使用播放器組件
效果圖
說明: 由於測試視頻高度原因出現黑背景
安裝及引入
npm i vue-video-player -S
全局引入
在
main.js
中導入並引用
import VideoPlayer from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)
局部註冊
需要使用的
vue
文件導入並註冊組件
import { videoPlayer } from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
export default {
components: {
videoPlayer
}
}
使用
這裏
Demo
使用父子組件傳值
父組件
傳值兩個參數【這裏爲了方便分開傳】
playerUrl
: 視頻urlposterUrl
: 視頻封面圖
<div class="player" v-if="playerPath">
<player :playerUrl="playerPath" :posterUrl="posterPath"></player>
</div>
<script>
import player from '@/components/common/player'
export default {
data() {
return: {
playerPath: '', //視頻地址
posterPath: '', //視頻封面
}
},
components: {
player,
},
created() {
this.getInfo();
},
method: {
getInfo() {
this.playerPath = 'http://vjs.zencdn.net/v/oceans.mp4';
this.posterPath = '封面圖url';
}
}
}
</script>
子組件
新建
player.vue
組件
<template>
<div class="playerWrap">
<video-player class="vjs-custom-skin"
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
>
</video-player>
</div>
</template>
js
- 引入及配置參數【配置: 根據個人所需】
- 接收
父組件
的值
<script>
import { videoPlayer } from 'vue-video-player'
import 'vue-video-player/src/custom-theme.css'
import 'video.js/dist/video-js.css'
export default {
data() {
return {
playerOptions: {
//播放速度
playbackRates: [0.5, 1.0, 1.5, 2.0],
//如果true,瀏覽器準備好時開始回放。
autoplay: false,
// 默認情況下將會消除任何音頻。
muted: false,
// 導致視頻一結束就重新開始。
loop: false,
// 建議瀏覽器在<video>加載元素後是否應該開始下載視頻數據。auto瀏覽器選擇最佳行爲,立即開始加載視頻(如果瀏覽器支持)
preload: 'auto',
language: 'zh-CN',
// 將播放器置於流暢模式,並在計算播放器的動態大小時使用該值。值應該代表一個比例 - 用冒號分隔的兩個數字(例如"16:9"或"4:3")
aspectRatio: '16:9',
// 當true時,Video.js player將擁有流體大小。換句話說,它將按比例縮放以適應其容器。
fluid: true,
sources: [{
//類型
type: "video/mp4",
src: ''
}],
//封面地址
poster: "",
//允許覆蓋Video.js無法播放媒體源時顯示的默認信息。
notSupportedMessage: '此視頻暫無法播放,請稍後再試',
controlBar: {
timeDivider: true,
durationDisplay: true,
remainingTimeDisplay: false,
//全屏按鈕
fullscreenToggle: true
}
}
}
},
props: {
playerUrl: {
type: String
},
posterUrl: {
type: String
}
},
components: {
videoPlayer
},
computed: {
player() {
return this.$refs.videoPlayer.player
}
},
created() {
// 接收父組件 播放url
this.playerOptions.sources[0].src = this.playerUrl;
// 封面圖
this.playerOptions.poster = this.posterUrl;
}
}
</script>
樣式
根據個人需求調整
<style>
.player .video-js .vjs-big-play-button {
width: 120px;
}
.player .vjs-custom-skin > .video-js .vjs-big-play-button {
transform: scale(0.8) !important;
height: 120px !important;
line-height: 120px !important;
margin-left: -60px;
margin-top: -60px;
border-radius: 50%;
background: rgba(0, 0, 0, .6);
border: none;
}
</style>
提示
-
Android
和ios
點擊播放時操作方式略有不同a、
ios
點擊可立即播放,b、
Android
選擇小窗口
播放、分享
或全屏播放