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

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

  1. <video width=100% height=100% controls autoplay muted>
  2.     <source src="video/7.Ogg"  alt="Second slide" style="width: 100%"> 
  3.  </video>

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

  1. $(function(){
  2.    $("#audio")[0].play(); 
  3. })

没想到竟然好用!!!全部的代码是这样:

  1. <html>
  2. <head>
  3. <script src="js/jquery.js"></script>
  4. </head>
  5. <body>
  6. <audio id="audio" src="song.mp3" autoplay="autoplay">
  7. 您的浏览器不支持audio标签。
  8. </audio>
  9. <script type="text/javascript">
  10. $(function(){
  11. $("#audio")[0].play();
  12. })
  13. </script>
  14. </body>
  15. </html>

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!3308869544
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理,有奖励!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有猫币奖励和额外收入!

主题镇 WP教程 HTML中加入视频不自动播放问题 https://zhutizhen.com/15055.html

永远为用户服务的镇长!

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或联络我们。
查看详情

相关文章