官網(wǎng)：https://www.npmjs.com/package/vue-video-player
1.安裝依賴
npm install vue-video-player -S
注：cnpm安裝會(huì)產(chǎn)生區(qū)別，聲音無法調(diào)節(jié)，倍速只能點(diǎn)擊切換
2.可以main.js里全局引入
import VideoPlayer from 'vue-video-player'
import 'video.js/dist/video-js.css'
Vue.use(VideoPlayer)
3.也可以組件內(nèi)引用
import 'video.js/dist/video-js.css'
import { videoPlayer } from "vue-video-player"
export default {
components: {
videoPlayer
}
}
4.使用
<template>
<div id="app">
<video-player
ref="videoPlayer"
:options="playerOptions"
:playsinline="true"
>
</video-player>
</div>
</template>
<script>
import "video.js/dist/video-js.css";
import { videoPlayer } from "vue-video-player";
export default {
components: {
videoPlayer,
},
data() {
return {
playerOptions: {
playbackRates: [0.5, 1.0, 1.5, 2.0], // 可選的播放速度
// autoplay: false, // 如果為true,瀏覽器準(zhǔn)備好時(shí)開始回放共郭。
// controls: true, // 是否擁有控制條 【默認(rèn)true】,如果設(shè)為false ,那么只能通過api進(jìn)行控制了稽荧。也就是說界面上不會(huì)出現(xiàn)任何控制按鈕
// muted: false, // 是否靜音
// loop: false, // 是否視頻一結(jié)束就重新開始。
// preload: "auto", // 建議瀏覽器在<video>加載元素后是否應(yīng)該開始下載視頻數(shù)據(jù)澈歉。auto瀏覽器選擇最佳行為,立即開始加載視頻（如果瀏覽器支持）
language: "en", // 播放器初始語言
// 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: require("./assets/video.mp4"), // url地址
},
],
poster: require("./assets/1.png"), // 封面地址
notSupportedMessage: "此視頻暫無法播放忍弛，請(qǐng)稍后再試", // 允許覆蓋Video.js無法播放媒體源時(shí)顯示的默認(rèn)信息拴竹。
controlBar: {
timeDivider: false, // 當(dāng)前時(shí)間和持續(xù)時(shí)間的分隔符
durationDisplay: false, // 顯示持續(xù)時(shí)間
remainingTimeDisplay: false, // 是否顯示剩余時(shí)間功能
fullscreenToggle: true, // 是否顯示全屏按鈕
},
},
};
},
computed: {
player() {
return this.$refs.videoPlayer.player;
},
},
};
</script>
<style lang="less">
.video-player {
width: 600px;
.video-js {
width: 100%;
height: 100%;
.vjs-big-play-button {
top: calc(50% - 0.75em);
left: calc(50% - 1.5em);
}
}
}
</style>
5.視頻格式
type："video/webm" // 可以播放，用ogg也可打開
type："video/ogg" // 可以播放剧罩，用webm也可打開
type："video/3gp" // 可以播放
type："video/mp4" // 可以播放
type："video/avi" // 打不開
type："video/flv" // 打不開
type："video/mkv" // 打不開
type："video/mov" // 打不開
type："video/mpg" // 打不開
type："video/swf" // 打不開
type："video/ts" // 打不開
type："video/wmv" // 打不開
type："video/vob" // 沒轉(zhuǎn)化
type："video/mxf" // 轉(zhuǎn)化出錯(cuò)
type: "video/rm" // 轉(zhuǎn)化出錯(cuò)
