【xgplayer】xgplayer填坑记 | xgplayer全屏与css全屏冲突

视觉CG

已于 2023-03-10 10:59:27 修改

阅读量1.8k

点赞数 2

分类专栏： Xgplayer 文章标签： css javascript 前端

于 2023-03-07 18:10:16 首次发布

本文链接：https://blog.csdn.net/qq_43614372/article/details/129387313

版权

Xgplayer 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

问题所在

使用css全屏后，再使用播放器全屏会出现问题 ↓

当有css全屏与播放器全屏时，如下图

当使用css全屏时，可正常显示，如下图

使用css全屏后，再使用播放器全屏，依然没问题（使用播放器全屏后会自动隐藏css全屏按钮），如下图

但当再次缩小播放器全屏时就出现问题了，视频播放器居然飞不见了，只留下个按钮，如下图：

解决问题

思路
1. 使用css全屏时隐藏播放器全屏按钮
2. 关闭css全屏时再显示播放器全屏按钮

<template>
    <div id="player"></div>
</template>
<script setup>
import { onMounted } from 'vue';
// 1. xgplayer导入播放器
import Player from 'xgplayer/dist/simple_player';

//2. 导入css全屏按钮
import cssFullscreen from 'xgplayer/dist/controls/cssFullscreen';

// 3. 导入播放器自带工具
import { toggleClass } from 'xgplayer/src/utils/util';

// 4. 播放器配置
const playerOpts = {
    id: 'player',//播放器元素id
    url: '/public/video/4.mp4',//视频地址 
    // 移动端重要配置
    // 对于9:16的视频友好
    cssFullscreen: true,

    // 菜单控件
    controlPlugins: [
        cssFullscreen,//css全屏按钮
    ],
};

// 一定要在onMounted创建播放器实例，不然会出错
onMounted(() => {
	// 5. 创建播放器实例
    const player = new Player(playerOpts)

    // 6、 实例播放器加载完毕，重点：只需要加载一次即可
    player.once('ready', () => { 
         //7. 获取全屏按钮
         const fullScrBtn = document.querySelector('#player .xgplayer-fullscreen');

         // 8. 进入样式全屏后隐藏全屏按钮
         player.on('requestCssFullscreen', function () {
             toggleClass(fullScrBtn, 'hide')
         });

         // 9. 退出样式全屏后显示全屏按钮
         player.on('exitCssFullscreen', function () {
             toggleClass(fullScrBtn, 'hide')
         })
    })
})

</script>

<style scoped>
/* 10. css隐藏样式 */
#player>>>.hide {
    visibility: hidden;
}
</style>