HTML中加入视频不自动播放问题

今天做一个登陆页面的时候，网页里有个自动播放的视频背景，但是必须切换到一个视频时必须手动播放加了 autoplay="autoplay"也不行，视频并没有自动播放，按一下 F5 才会自动播放。最后，找资料发现，添加 muted 属性，也就是静音，就可以自动播放。

<video width=100% height=100% controls autoplay muted>

    <source src="video/7.Ogg"  alt="Second slide" style="width: 100%">

```
 </video>
```

以上点 PC 桌面浏览器，HTML5 标签 audio 的 autoplay 属性可以设置在页面打开后自动播放。这个属性本来挺好的。但是最近做了一个项目却发现在 iphone 上无法自动播放。各种查阅资料后发现原来 iphone 公司是考虑到用户可能是用手机流量访问的情况，为了用户流量着想，所以需要用户交互后才能播放。虽然苹果公司是出于好心，但是如果网页打开之后还需要一个交互才能听到美妙的背景音乐，那么网站的体验效果自然差了很多。可是这种问题要怎么解决呢？冥思苦想了很久，终于做了一个艰难的决定。于是乎就这样尝试了一下：

```
$(function(){
```
```
   $("#audio")[0].play(); 
```
```
})
```

没想到竟然好用！！！全部的代码是这样：

```
<html>
```
```
<head>
```
```
<script src="js/jquery.js"></script>
```
```
</head>
```
```
<body>
```

<audio id="audio" src="song.mp3" autoplay="autoplay">

```
您的浏览器不支持audio标签。
```
```
</audio>
```
```
<script type="text/javascript">
```
```
$(function(){
```
```
$("#audio")[0].play();
```
```
})
```
```
</script>
```
```
</body>
```
```
</html>
```

这里需要注意的是.play()方法是 element 的方法，所以需要 dom 节点，亲测 iphone 可用。

原文地址：https://www.cnblogs.com/idid/p/11877409.html