网页设置MP4背景，解决html音乐无法自动播放

分手后的思念是犯贱 2023-10-11 15:28 77阅读 0赞

### 前言 ###

之前写的大都是偏向于长篇大论的技术文章，很多人看完心中毫无波澜，甚至还觉得有点浪费时间。于是我痛定思过，决心写一些贴近生活、有意思、篇幅短的文章。

有心栽花花不开，无心栽柳柳成荫，这不，有个小姐姐问我：html用MP4做背景，为什么覆盖了html原有的元素，作为一个自诩略懂前端的我，此时却有了一个不太符合身份的想法：  
![20210317223841893.jpg][]

此时心中不免生出一丝悔意：我什么要学后端？？但是，就算我不会，我能说不会么？

### 故事是这样的 ###

小姐姐写了一个网页，大概是这样的（我简化过的，意思到了就行）  
![20210317224448934.jpg][]  
小姐姐大都喜欢好看的事物，所以就找了个唯美的MP4视频作为页面背景，当满心欢喜换上背景的时候，却发现网页中按钮和白月光被覆盖了！！！  
![20210317225249573.gif][]

代码如下：

<!DOCTYPE>
    <html>
      <head>
          <title>快乐的一天</title>
          <style type="text/css">
             /* 这里是写css的地方，先预留出来*/
          </style>
      </head>
      <body>
      <video src="./5.mp4" style="width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;left: 0;"
             autoplay="autoplay" loop="loop" muted="muted">
      </video>
      <div id="center">
          <div id="query">
              <button><h2>我是按钮</h2></button>
          </div>
          <div id="result">
              <i>白月光在照耀</i>
          </div>
      </div>
      </body>
    </html>

作为一名半吊子PS和PPT选手，第一想法是不是图层顺序的原因导致了覆盖，有没有方法将MP4置于最底层，一百度，嘿！你别说还真有！

在代码中添加了一行css：

video {
      z-index: -1314;
    }

![20210317230849626.gif][]

就这样，简简单单搞定。

你以为就这么结束了？如果你运行上面你的代码你会发现一个问题：MP4没有声音！！！之前也接触过<audio>音频标签，你设置了自动播放和取消静音也是不会自动播放，原因就是：**在浏览器中，像视频、音乐元素已经禁止自动播放，必须通过触发事件来进行播放**，所以就需要添加事件。

趁着这个机会，我打算用我寥寥无几的前端技术，来稍微让这个网页变得有趣一些。

### 优化 ###

网页已经上传到服务器，体验地址：**[http://47.102.219.86:8081/WebGIS.html][http_47.102.219.86_8081_WebGIS.html]**

备注：网页使用电脑浏览器打开最佳，手机浏览器中没有做适配，而且音乐播放缓冲较慢，需要耐心等待。

MP4音效播放页面：  
![20210318234941417.jpg][]

音乐播放特效页面：  
![20210318234859348.gif_pic_center][]

添加了*白月光与朱砂痣*为背景音乐，并添加了三个按钮和一个粒子特效，每个按钮的播放是互斥的。

1.  第一个按钮负责MP4声音的播放与停止，停留在MP4背景页面
2.  第二个按钮负责白月光与朱砂痣的播放与停止，停留在粒子特效页面
3.  第三个按钮同时播放所有音乐，停留在上一个页面

同时每个按钮在播放和停止都会切换不同的文本。

### 代码 ###

![20210319004312803.jpg][]  
其中粒子特效代码摘自：https://blog.csdn.net/u014597198/article/details/71515918，按钮和点击事件代码由我所写。

### 结语 ###

To be honest，我这前端水平寥寥，也就是入门水平，再加上使用的都是原生的js和css，所以大家也不要对我的期待太高，主要看看实现的一些小功能。

最后，前端还是比较有意思的，能直观展现一个网页的设计感和美感，让每一行代码充分发挥自己的价值。有空的话我也学习一下canvas粒子特效的制作，期待能自己写出好玩的特效。

![感谢每一份关注][20210304140430741.png]

[20210317223841893.jpg]: https://img-blog.csdnimg.cn/20210317223841893.jpg
[20210317224448934.jpg]: https://img-blog.csdnimg.cn/20210317224448934.jpg
[20210317225249573.gif]: https://img-blog.csdnimg.cn/20210317225249573.gif
[20210317230849626.gif]: https://img-blog.csdnimg.cn/20210317230849626.gif
[http_47.102.219.86_8081_WebGIS.html]: http://47.102.219.86:8081/WebGIS.html
[20210318234941417.jpg]: https://img-blog.csdnimg.cn/20210318234941417.jpg
[20210318234859348.gif_pic_center]: https://img-blog.csdnimg.cn/20210318234859348.gif#pic_center
[20210319004312803.jpg]: https://img-blog.csdnimg.cn/20210319004312803.jpg
[20210304140430741.png]: https://img-blog.csdnimg.cn/20210304140430741.png