videojs全屏弊端

在移动端全屏播放9:16的视频效果不好，如下图

9:16的视频全屏播放合适竖屏
16:9的视频全屏播放合适横屏

移动端9:16我想要的效果如下图↓，全屏播放时铺满竖屏

需求

移动端全屏播放9:16视频时，呈现竖屏播放
16:9的视频无需更改

解决需求

需要考虑以下几点：
1. 获取视频原始比例
```
// 获取视频宽高const vW = video.videoWidthconst vH = video.videoHeight
```
1. 移动端9:16视频全屏播放，需要自定义videojs菜单
2. 移动端16:9的视频使用原生videojs效果
3. 使用videojs的vjs-fill类，调整父级宽高，使视频撑满父级

创建视频组件

src/components/VideoPlay.vue

<template><!-- class 作用vjs-matrix 自定义皮肤 vjs-show-big-play-button-on-pause 暂停视频时显示大按钮 --><div :class="vpClass"><!-- vjs-16-9 | vjs-fill --><video ref="videoPlayer" :class="vClass"class="vjs-styles-dimensions vjs-matrix vjs-show-big-play-button-on-pause video-js"></video></div>
</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,hr: '16-9',//比例vClass: 'vjs-16-9',//video的class> vjs-fill | vjs-16-9vpClass: '',//video父级class  >  my-vdieo-16-9 | my-vdieo-9-16 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等等  设置后width和height属性无效// fluid: true,//自动计算宽高 ，若设置了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' }, // 当前已播放时间{ name: 'progressControl' }, // 播放进度条{ name: 'durationDisplay' }, // 总时间{ name: 'audioTrackButton' },{ // 倍数播放name: 'playbackRateMenuButton',},// {//     name: 'volumePanel', // 音量控制//     inline: false, // 不使用水平方式// },],// PictureInPictureToggle: true,  //画中画// 是否显示全屏按钮fullscreenToggle: true,// 音量是否在一行上显示// volumePanel: {//     // true 同一行显示音量调整//     // false 竖直显示音量调整//     inline: false// },// 视频播放完时触发// true 显示回放图标// false 显示暂停图标playToggle: {replay: true}},sources: this.videoSrc,}}},mounted() {this.player = videojs(this.$refs.videoPlayer, this.videoOptions, () => {const p = this.player;// 自定义全屏按钮 // 获取videoconst video = p.el_.children[0];let hr = null// 监听视频加载video.addEventListener('canplay', full);const _this = this;function full() {// 获取视频宽高const vW = video.videoWidthconst vH = video.videoHeight// 确认视频比例if ((vW - vH) >= 0) {// vjs-16-9      hr = '16-9'} else {hr = '9-16'p.el_.classList.remove(_this.vClass)// vjs-9-16 p.getChild('ControlBar').removeChild('FullscreenToggle')_this.vClass = 'vjs-fill'p.el_.classList.add(_this.vClass)_this.vpClass = 'my-vdieo-16-9'}// 9-16 添加自定义全屏按钮if (hr === '9-16') {/* vjs-icon-fullscreen-enter 全屏图标classvjs-icon-fullscreen-exit  非全屏图标class*/// 创建按钮组件 ， 并添加到菜单栏p.getChild('ControlBar').addChild('button', {className: 'vjs-button my-full-btn vjs-icon-fullscreen-enter',clickHandler: event => {const videoPar = p.el_;const videoBox = videoPar.parentNode;//video最外面的元素// 图标切换const isFull = event[0].target.classList.toggle('vjs-icon-fullscreen-exit')videoBox.classList.remove(_this.vpClass)// 全屏if (isFull === true) {_this.vpClass = 'my-vdieo-9-16'} else {// 小屏_this.vpClass = 'my-vdieo-16-9'}videoBox.classList.toggle(_this.vpClass)}});}video.removeEventListener('canplay', full)}});},beforeDestroy() {if (this.player) {this.player.dispose();}}
}
</script><style scoped>
/* 播放器尺寸 */
.my-vdieo-9-16 {width: 100vw;height: 100vh;position: fixed;left: 0;top: 0;
}.my-vdieo-16-9 {width: 100vw;height: 35vh;
}/* 、、、、、、、、、、显示当前时间+所有时间、、、、、、、、、、、、、、、。。 */
.vjs-styles-dimensions>>>.vjs-control-bar .vjs-duration,
.vjs-styles-dimensions>>>.vjs-control-bar .vjs-current-time {display: block;padding: 0;
}/* 、、、、、、、、、、、播放器按钮大小+自定义全屏图标大小、、、、、、、、、、、、、、、、、、、 */
.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: skyblue;
}/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {border-color: skyblue;
}/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-play-progress,
.vjs-matrix .vjs-slider-bar {background: skyblue;
}
</style>

使用视频播放器组件

src/views/HomeVieew.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】videojs自定义全屏按钮 | videojs全屏移动端弊端 | 创建videojs菜单

videojs全屏弊端

移动端9:16我想要的效果如下图↓，全屏播放时铺满竖屏

需求

解决需求

创建视频组件

使用视频播放器组件

推荐

【videojs】videojs自定义全屏按钮 | videojs全屏移动端弊端 | 创建videojs菜单相关推荐

最新文章

热门文章