一、安裝依賴
npm install vue-video-player@5.0.2 --save
npm install video.js --save
二、main.ts引入
import VideoPlayer from 'vue-video-player/src'
import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
三牧抵、提示引入錯(cuò)誤的解決
這時(shí)會(huì)編譯錯(cuò)誤
在文件shims-vue.d.ts(與main.ts同級),加上 declare module 'vue-video-player/src'
沒有這文件就新建
/* eslint-disable */
declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}
declare module 'vue-video-player/src'
四补疑、視頻封裝與配置的完整代碼
<template>
<div class="video">
<video-player class="video-player vjs-custom-skin"
ref="videoPlayer"
:playsinline="true"
:options="data.playerOptions">
</video-player>
</div>
</template>
<script>
import { reactive } from '@vue/reactivity';
export default {
name: 'Video',
props:['video','cover'],
setup(props){
let data = reactive({
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可選的播放速度
autoplay: false, // 如果為true,瀏覽器準(zhǔn)備好時(shí)開始回放。
muted: false, // 默認(rèn)情況下將會(huì)消除任何音頻歼秽。
loop: false, // 是否視頻一結(jié)束就重新開始。
preload: 'auto', // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)情组。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
language: 'zh-CN',
aspectRatio: '4:3', // 將播放器置于流暢模式燥筷，并在計(jì)算播放器的動(dòng)態(tài)大小時(shí)使用該值。值應(yīng)該代表一個(gè)比例 - 用冒號(hào)分隔的兩個(gè)數(shù)字（例如"16:9"或"4:3"）
fluid: true, // 當(dāng)true時(shí)院崇，Video.js player將擁有流體大小肆氓。換句話說，它將按比例縮放以適應(yīng)其容器底瓣。
sources: [{
type: "video/mp4", // 類型
src: props.video // url地址
}],
poster: props.cover, // 封面地址
notSupportedMessage: '此視頻暫無法播放谢揪，請稍后再試', // 允許覆蓋Video.js無法播放媒體源時(shí)顯示的默認(rèn)信息。
controlBar: {
timeDivider: true, // 當(dāng)前時(shí)間和持續(xù)時(shí)間的分隔符
durationDisplay: true, // 顯示持續(xù)時(shí)間
remainingTimeDisplay: false, // 是否顯示剩余時(shí)間功能
fullscreenToggle: true // 是否顯示全屏按鈕
}
}
})
return {
data
}
}
}
</script>
<style scoped>
.video{
width: 100%;
height: 100%;
margin: auto;
}
</style>
<style>
.video .vjs_video_3-dimensions.vjs-fluid {
padding-top: 57%;
}
.video .vjs-custom-skin > .video-js .vjs-big-play-button {
/* background-color: rgba(0,0,0,0.45); */
font-size: 3.5em;
border-radius: 50%;
height: 2em !important;
width: 2em !important;
line-height: 2em !important;
margin-top: -1em !important;
margin-left: -1em
}
.video .vjs-poster{
background-position:center
}
</style>
五、如要引入本地視頻文件
路徑加入require()
sources: [{
type: "video/mp4", // 類型
src: require(props.video)
}],
