问题所在
使用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>
最终效果展示
问题完美解决
1. 使用css全屏隐藏播放器全屏
2. 退出css全屏显示播放器全屏
后记
问:css全屏按钮与播放器全屏按钮用其中一个就可以了呗
答:只用一个确实没问题,但视频比例有多种,如16:9、9:16、横屏、竖屏等等,特别是在移动端,播放器全屏合适16:9的视频。播放9:16的视频大大降低视觉效果,如下图。
- 如果用css全屏播放9:16的视频效果就很好,如下图
End
2023/3/7 17:59 辑
2023/3/9 23:15 一改
2023/3/10 10:55 二改