html中video在全屏时再打开声音

最新推荐文章于 2023-12-11 08:29:34 发布

阿阿阿尔呀

最新推荐文章于 2023-12-11 08:29:34 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript

本文链接：https://blog.csdn.net/aerbaba/article/details/98197041

JavaScript 专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一种使用JavaScript监听窗口大小变化的方法，当浏览器窗口全屏时自动开启视频声音，非全屏状态则关闭声音，适用于Chrome、IE9及Firefox等浏览器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

              //全屏打开声音
              $(window).on('resize',function(e){
                    var explorer = window.navigator.userAgent.toLowerCase();
                    if(explorer.indexOf('chrome')>0){//webkit
                        if ($('#video').height() === window.screen.height && $('#video').width() === window.screen.width) {
                            $('#video')[0].muted=false;
                        } else {
                            $('#video')[0].muted=true;
                        }
                    }else{//IE 9+  fireFox
                        console.log(window.outerHeight)
                        if (window.outerHeight === window.screen.height && window.outerWidth === window.screen.width) {
                            $('#video')[0].muted=false;
                        } else {
                            $('#video')[0].muted=true;
                        }
                    }
                    console.log($('#video').width(),window.screen.width,document.body.scrollWidth)
                    console.log($('#video').height(),window.screen.height,document.body.scrollHeight)
                    if ($('#video').height() === window.screen.height && $('#video').width() === window.screen.width) {
                        $('#video')[0].muted=false;
                    }
                    else{
                        $('#video')[0].muted=true;
                    }
                })
                //默认关掉声音
                $('#video')[0].muted=true;