videojs介紹
- 免費(fèi)，開源
- 插件多
- 可自定義
【推】
-
雖然，但是Videojs算好了，但我覺得有點(diǎn)雜，特別是文檔與插件，且自定義插件有點(diǎn)困難，也可能是我比較菜吧
-
相比之下，我還是強(qiáng)烈推薦 【Xgplayer ——點(diǎn)我進(jìn)入】
-
備用地址 http://t.csdn.cn/H0cAV
- Xgplayer 優(yōu)點(diǎn)
- 優(yōu)雅、美觀
- 文檔清晰明了
- 大廠出品——字節(jié)跳動(dòng)，大廠出品——穩(wěn)，大廠出品必屬精品
- 方便自定義插件/方法
- 對移動(dòng)端友好，如果做移動(dòng)端視頻播放器，無腦選Xgplayer就行。
- 支持彈幕
- 支持音樂播放器與歌詞滾動(dòng)
- Xgplayer 優(yōu)點(diǎn)
videojs下載
cnpm install --save-dev video.js
videojs官網(wǎng)
videojs官網(wǎng)
備用地址 https://videojs.com/
vue3中使用videojs
創(chuàng)建videojs組件
src/components/VideoPlay.vue
<template>
<!--
class 作用
vjs-matrix 自定義皮膚
vjs-show-big-play-button-on-pause 暫停視頻時(shí)顯示大按鈕
vjs-styles-dimensions 自定義videojs樣式
-->
<video ref="videoPlayer" :class="vClass"
class="vjs-styles-dimensions vjs-show-big-play-button-on-pause video-js"></video>
</template>
<script>
import videojs from 'video.js';
// 加載中文
import lang_zhcn from "video.js/dist/lang/zh-CN.json"
// 加載css
import 'video.js/dist/video-js.min.css'
// 使用中文
videojs.addLanguage('zh-CN', lang_zhcn);
export default {
name: 'VideoPlayer',
props: {
videoSrc: {
type: Object,
default() {
return {};
}
}
},
data() {
return {
player: null,
// 菜單欄配置
videoOptions: {
autoplay: true,
controls: true,
preload: 'auto',
playbackRates: [0.2, 0.5, 1, 1.5, 2, 2.5, 3],//視頻播放速度
// aspectRatio: '16:9',//寬高比，9:16 16:9 4:3等等 設(shè)置后width和height屬性無效
// fluid: true,//自動(dòng)計(jì)算寬高 ，若設(shè)置了aspectRatio，則失效
// liveui: true,//不知
userActions: {
doubleClick: false,// 雙擊全屏 boolean|function
// 熱鍵
// hotkeys(event) {
// // 'x' 鍵 - 暫停
// if (event.which === 88) {
// this.pause();
// }
// // `y` 鍵 - 播放
// if (event.which === 89) {
// this.play();
// }
// },//熱鍵
},
language: 'zh-CN',
controlBar: {
children: [
{ name: 'playToggle' }, // 播放按鈕
{ name: 'currentTimeDisplay' }, // 當(dāng)前已播放時(shí)間
{ name: 'progressControl' }, // 播放進(jìn)度條
{ name: 'durationDisplay' }, // 總時(shí)間
{ name: 'audioTrackButton' },
{ // 倍數(shù)播放
name: 'playbackRateMenuButton',
},
// {
// name: 'volumePanel', // 音量控制
// inline: false, // 不使用水平方式
// },
],
// PictureInPictureToggle: true, //畫中畫
// 是否顯示全屏按鈕
fullscreenToggle: true,
// 音量是否在一行上顯示
// volumePanel: {
// // true 同一行顯示音量調(diào)整
// // false 豎直顯示音量調(diào)整
// inline: false
// },
// 視頻播放完時(shí)觸發(fā)
// true 顯示回放圖標(biāo)
// false 顯示暫停圖標(biāo)
playToggle: {
replay: true
}
},
// 視頻地址
sources: this.videoSrc,
}
}
},
mounted() {
this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {
// this表示videojs實(shí)例
// 可在這里對videosjs操作
console.log(this);
// 例：創(chuàng)建按鈕
const button = p.getChild('ControlBar').addChild('button', {
controlText: '按鈕',
className: 'vjs-visible-text',
clickHandler: function (event) {
videojs.log('1');
}
});
});
},
beforeDestroy() {
if (this.player) {
this.player.dispose();
}
}
}
</script>
<style scoped>
/* 、、、、、、、、、、顯示當(dāng)前+所有時(shí)間、、、、、、、、、、、、、、、。。 */
.vjs-styles-dimensions>>>.vjs-control-bar .vjs-duration,
.vjs-styles-dimensions>>>.vjs-control-bar .vjs-current-time {
display: block;
padding: 0;
}
/* 、、、、、、、、、、、播放器按鈕大小+自定義全屏圖標(biāo)大小、、、、、、、、、、、、、、、、、、、 */
.vjs-styles-dimensions>>>.vjs-control-bar button .vjs-icon-placeholder::before,
.vjs-styles-dimensions>>>.vjs-control-bar .my-full-btn::before {
font-size: 3em;
line-height: 1.1;
}
/* 自定義播放器顏色 */
/* Change all text and icon colors in the player. */
.vjs-matrix.video-js {
color: red;
}
/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
border-color: red;
}
/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-play-progress,
.vjs-matrix .vjs-slider-bar {
background: red;
}
</style>
使用videojs組件
src/views/HomeView.vue
<template>
<video-player :videoSrc="videoSrc" />
</template>
<script setup>
import { reactive } from 'vue';
// 視頻地址
const videoSrc = reactive(
[
{
src:
'/public/video/1.mp4',
type: 'video/mp4'
}
]
)
</script>
效果圖
videojs常用class
-
屏幕比列
- vjs-fluid 全屏
- vjs-16-9
- vjs-4-3
- vjs-9-16
- vjs-1-1
- vjs-fill 填滿父級寬高(必須有父級)
- vjs-show-big-play-button-on-pause 顯示中間暫停按鈕
- video-js 必須的class
- vjs-styles-dimensions 通過該類自定義videojs，例
.vjs-styles-dimensions .my-video-btn666{ background:green; } -
vjs-hidden 該class可隱藏菜單元素
【更多API參考】
videojs API參考
備用地址 https://docs.videojs.com
videojs圖標(biāo)庫
- videojs圖標(biāo)庫
- 備用地址 https://videojs.github.io/font/
videojs創(chuàng)建組件
- 參考地址 component
- 備用地址 https://videojs.com/guides/components#adding-a-component
End
2023/3/6 17:24文章來源：http://www.zghlxwxcb.cn/news/detail-769214.html
2023/3/6 20:22 一改文章來源地址http://www.zghlxwxcb.cn/news/detail-769214.html
更多推薦
- videojs自定義全屏按鈕
到了這里，關(guān)于【VideoJs】初識videojs && video.js 視頻播放器的基本使用 && videojs基礎(chǔ)用法 && videojs視頻播放器 && vue3中使用videojs的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
