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

问题发现

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

问题解决

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

准备工作

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

实现步骤

1. 插入视频:


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

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

 
"player unsound" id="p1">
"player sound" id="p2">

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代码进行控制

/*写法一:*/
 
/*写法二(这种写法要先把之前css样式里的.sound{display:block}删掉)*/
 

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

你可能感兴趣的:(html,html,js)