请问如何在chrome原生的播放器全屏时显示弹窗

thfvdfer · 发表于 2023-5-5 20:59:39

当使用chrome播放本地视频或播放视频时控制台输入const video = document.querySelector('video');
video.requestFullscreen();使视频全屏,浏览器会使用一个似乎是原生的播放器,我尝试了一些方法在全屏播放时弹出弹窗,但是都无法显示,这些代码在别的播放器下好像都可以生效,请问有大佬知道哪出了问题吗

  function showMessage(text) {
        const div = document.createElement('div');
        const fullScreenElement = getFullScreenElement();
        div.style.cssText = `position: fixed; z-index: 999999; top: 85%; left: 8%; transform: translate(-50%, -50%); background-color: rgba(255, 255,255, 0.8); color: #000; padding: 15px 30px; border-radius: 7px; font-size: 20px;`;
        div.innerText = text;

        if (fullScreenElement) {
            fullScreenElement.append(div);
        } else {
            document.body.appendChild(div);
        }

        setTimeout(() => {
            div.parentNode.removeChild(div);
        }, 1500);
    }

    /**
     * 获取全屏元素（不同浏览器有不同实现）
     * @returns {*}
     */
    function getFullScreenElement() {
        if (document.fullscreenElement) {
            return document.fullscreenElement;
        } else if (document.msFullscreenElement) {
            return document.msFullscreenElement;
        } else if (document.mozFullScreenElement) {
            return document.mozFullScreenElement;
        } else if (document.webkitFullscreenElement) {
            return document.webkitFullscreenElement;
        } else {
            return null;
        }
    }

李恒道 · 发表于 2023-5-6 09:20:25

requestFullscreen会创建一个z-index为Integer.Max的最大值
如果只是最大化video的话感觉没什么好办法
但是可以尝试requestFullscreen video标签的父级
父级包裹video元素以及信息框元素试一下

thfvdfer · 发表于 2023-5-6 11:51:13

李恒道发表于 2023-5-6 09:20
requestFullscreen会创建一个z-index为Integer.Max的最大值
如果只是最大化video的话感觉没什么好办法
但是 ...

<html><head><meta name="viewport" content="width=device-width"></head><body><video controls="" autoplay="" name="media"><source src="xxx.mp4" type="video/mp4"></video></body></html>

复制代码

播放本地视频时网页是这样的,好像也没啥元素,应该没办法了吧

李恒道 · 发表于 2023-5-6 12:23:10

thfvdfer 发表于 2023-5-6 11:51
播放本地视频时网页是这样的,好像也没啥元素,应该没办法了吧

对body做操作试试

李恒道 · 发表于 2023-5-6 12:26:06

thfvdfer 发表于 2023-5-6 11:51

播放本地视频时网页是这样的,好像也没啥元素,应该没办法了吧

图片.png

thfvdfer · 发表于 2023-5-6 14:36:00

李恒道发表于 2023-5-6 12:26
[md]![图片.png](data/attachment/forum/202305/06/122602xbnqlcqymxj08lzz.png)[/md]

可以参考下代码吗大佬,研究了半天还是没反应,感谢

李恒道 · 发表于 2023-5-6 17:52:12

thfvdfer 发表于 2023-5-6 14:36

可以参考下代码吗大佬,研究了半天还是没反应,感谢

图片.png

thfvdfer · 发表于 2023-5-6 18:52:10

李恒道发表于 2023-5-6 17:52
[md]![图片.png](data/attachment/forum/202305/06/175208gb4554b7pz1t4w9b.png)[/md]

懂了,曲线救国也不错,感谢大佬回复

请问如何在chrome原生的播放器全屏时显示弹窗

发表回复

荣誉开发者

喜迎中秋

油中2周年

生态建设者