HTML/CSS
HTML中加入视频不自动播放问题
PetitQ
今天做一个登陆页面的时候，网页里有个自动播放的视频背景，但是必须切换到一个视频时必须手动播放加了 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 可用。
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
