上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]
  • TA的每日心情
    开心
    2023-5-6 12:23
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    3

    主题

    7

    回帖

    18

    积分

    助理工程师

    积分
    18
    发表于 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;
            }
        }
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2023-5-6 09:20:25 | 显示全部楼层
    requestFullscreen会创建一个z-index为Integer.Max的最大值
    如果只是最大化video的话感觉没什么好办法
    但是可以尝试requestFullscreen video标签的父级
    父级包裹video元素以及信息框元素试一下
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-5-6 12:23
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    3

    主题

    7

    回帖

    18

    积分

    助理工程师

    积分
    18
    发表于 2023-5-6 11:51:13 | 显示全部楼层
    李恒道 发表于 2023-5-6 09:20
    requestFullscreen会创建一个z-index为Integer.Max的最大值
    如果只是最大化video的话感觉没什么好办法
    但是 ...
    1. <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>
    复制代码
    播放本地视频时网页是这样的,好像也没啥元素,应该没办法了吧
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2023-5-6 12:23:10 | 显示全部楼层
    thfvdfer 发表于 2023-5-6 11:51
    播放本地视频时网页是这样的,好像也没啥元素,应该没办法了吧

    对body做操作试试
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2023-5-6 12:26:06 | 显示全部楼层

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

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

    图片.png

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-5-6 12:23
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    3

    主题

    7

    回帖

    18

    积分

    助理工程师

    积分
    18
    发表于 2023-5-6 14:36:00 | 显示全部楼层
    李恒道 发表于 2023-5-6 12:26
    [md]![图片.png](data/attachment/forum/202305/06/122602xbnqlcqymxj08lzz.png)[/md]

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

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5961

    回帖

    6760

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6760

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2023-5-6 17:52:12 | 显示全部楼层

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

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

    图片.png

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-5-6 12:23
  • 签到天数: 3 天

    [LV.2]偶尔看看I

    3

    主题

    7

    回帖

    18

    积分

    助理工程师

    积分
    18
    发表于 2023-5-6 18:52:10 | 显示全部楼层
    李恒道 发表于 2023-5-6 17:52
    [md]![图片.png](data/attachment/forum/202305/06/175208gb4554b7pz1t4w9b.png)[/md]

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

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表