video标签中使用muted后的视频静音问题

最新推荐文章于 2024-05-22 11:58:11 发布

山风fly

最新推荐文章于 2024-05-22 11:58:11 发布

阅读量2.6w

点赞数 11

分类专栏： html 文章标签： html js muted

本文链接：https://blog.csdn.net/qq_43587449/article/details/104627951

版权

html 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题发现

最近写一个简单的视频作为页面背景时，发现里添加muted才能播放视频，但是muted属性是默认让视频静音播放的，若想只用标签来解决视频的静音问题有些困难。

问题解决

百度了以后才知道，从chrome66版本开始，禁止视频和音频的自动播放，后来firebox也采用了此策略，因为可能涉嫌诱导用户行为。即便采用javascript也不能自动播放，但是可以由用户的行为导致播放，比如通过用户点击页面。
最后比较简单的解决方法是，在页面上添加一个控制是否静音的图标，然后用js写一个监听器，单击喇叭型图标，播放声音，再单击，图标转成静音图标，视频静音。
（也可以添加一个按钮button，在button里写一个函数来实现鼠标单击后播放声音的效果。）

准备工作

这里使用了两张图来控制声音。
打开声音
关闭声音

实现步骤

1. 插入视频：

<video  src="example.mp4" autoplay loop muted id="music"></video>

autoplay—自动播放
loop—循环播放
muted—静音播放

2.插入我们准备好的两张图

 <div class="player unsound" id="p1"></div>  
 <div class="player sound" id="p2"></div>

3.设置CSS样式

.player{
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    width:22px;
    height:22px;
    cursor:pointer;
    margin-top:17px;
  }
.unsound{
     background-image:url("close.png");
 }
 .sound{
     display:none;
     background-image:url("open.png");
 }

4.编写js代码进行控制

/*写法一：*/
 <script type="text/javascript">
    (function(){
    	/*其实不推荐使用getElementById，与CSS选择器不统一*/
        let close=document.getElementById("p1");
        let open=document.getElementById("p2");
        let m=document.querySelector("#music");
        let c=function(){
            m.muted=false;/*不沉默*/
            close.style.display="none";
            open.style.display="block";
        }
        close.addEventListener("click",c,false);

        let o=function(){
            m.muted=true;/*沉默*/   
            close.style.display="block";
            open.style.display="none";
        }
        open.addEventListener("click",o,false);
 </script>
/*写法二（这种写法要先把之前css样式里的.sound{display:none}删掉）*/
 <script type="text/javascript">
   (function(){
       let video=document.querySelector("video");
       let btn=document.querySelector(".player");
       let action=function(){
           if(video.muted){
               video.muted=false;/*不沉默*/
               btn.classList.remove("unsound");/*为btn元素移除unmute这个class name，即close图片消失*/
               btn.classList.add("sound");/*为btn元素添加mute这个class name，即open图片出现*/
           }
           else{
               video.muted=true;/*沉默*/
               btn.classList.remove("sound");/*open图片消失*/
               btn.classList.add("unsound");/*close图片出现*/
           }
       }
       btn.addEventListener("click",action,false);
   })();
 </script>

5.实现效果
一开始页面显示图片close.png，视频静音;
单击图片，图片转为open.png，视频声音出现。
完美

源码

由于一些小伙伴留言说未成功，因此这里直接贴出html的代码
代码里的图片以及视频路径，记得自己更改哦
第一种，直接点击视频，实现视频的播放与暂停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
</head>
<body>
    <video src="example.mp4" muted autoplay></video>
    <script type="text/javascript">
        (function(){
            let video=document.querySelector("video");
            let unmute=function(){
                video.muted=false;
            }
            video.addEventListener("click",unmute,false);
        })()
    </script>
</body>
</html>

第二种，点击图片，实现视频的播放与暂停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频播放</title>
    <style type="text/css">
        .player{
            background-position:center;
            background-repeat:no-repeat;
            background-size:cover;
            width:22px;
            height:22px;
            cursor:pointer;
            margin-top:17px;
        }
        .unsound{
            background-image:url("close.png");
        }
        .sound{
            background-image:url("open.png");
        }
    </style>
</head>
<body>
 
   <div class="player unsound" ></div>
   <video  src="example.mp4" autoplay loop muted id="music">抱歉，您的浏览器不支持内嵌视频</video>
                 
    <script type="text/javascript">
            (function(){
                let video=document.querySelector("video");
                let btn=document.querySelector(".player");
                let action=function(){
                    if(video.muted){
                        video.muted=false;//不沉默
                        btn.classList.remove("unsound");//为btn元素移除unmute这个class name，即close图片消失
                        btn.classList.add("sound");//为btn元素添加mute这个class name，即open图片出现
                    }
                    else{
                        video.muted=true;//沉默
                        btn.classList.remove("sound");//open图片消失
                        btn.classList.add("unsound");//close图片出现
                    }
                }
                btn.addEventListener("click",action,false);
            })();
    </script>

</body>
</html>

山风fly

关注

11
点赞
踩
52

收藏

觉得还不错? 一键收藏
6
评论
video标签中使用muted后的视频静音问题

问题发现最近写一个简单的视频作为页面背景时，发现里添加muted才能播放视频，但是muted属性是默认让视频静音播放的，若想只用标签来解决视频的静音问题有些困难。问题解决最后的比较简单的解决方法是，在页面上添加一个控制是否静音的图标，然后用js写一个监听器，单击喇叭型图标，播放声音，再单击，图标转成静音图标，视频静音。（也可以添加一个按钮button，在button里写一个函数来实现鼠标单...
复制链接

扫一扫

专栏目录