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

videojs全屏弊端

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

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

---

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

需求

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

解决需求

• 需要考虑以下几点：

  1. 获取视频原始比例

  // 获取视频宽高
   const vW = video.videoWidth
   const vH = video.videoHeight
  

  2. 移动端9:16视频全屏播放，需要自定义videojs菜单
  3. 移动端16:9的视频使用原生videojs效果
  4. 使用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-9
            vpClass: '',//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;

            // 自定义全屏按钮 

            // 获取video
            const video = p.el_.children[0];
            let hr = null

            // 监听视频加载
            video.addEventListener('canplay', full);

            const _this = this;

            function full() {
                // 获取视频宽高
                const vW = video.videoWidth
                const 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 全屏图标class
                    vjs-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基本使用

---

End
2023/3/6 18:34

---

2023/3/6 20:13 一改