0 收藏 0 点赞 805 浏览 834 个字

前端虐我千万遍,我仍待它如初恋。前端开发中,各种坑多如牛毛,刚好今天又踩一个。

本次项目中需要开发一个音乐播放器,关于音频播放在众多安卓手机上测试均无问题,上IOS测试就完蛋了。

网上常见自动播放方法基本都是在页面载入时候监听 touch 事件,触发事件在自动播放,此方法不适用本次项目需求。

<div class="vidbg-container">
  <video id="bg-video" loop playsinline muted style="width: auto; height: 580px; opacity: 1;">
    <source src="/wp-content/themes/ripro-v2-child/static/picture/huitew.mp4" type="video/mp4">
    <source src="" type="video/webm">
  </video>
  <div class="vidbg-overlay"></div>
</div>

JQ代码

<script>
  // 获取视频元素
  const video = document.getElementById('bg-video');

  // 检测是否为 iOS 设备上的 Safari 浏览器
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
  const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

  // 如果在 iOS 设备上的 Safari 浏览器中,则添加 `playsinline` 属性
  if (isIOS && isSafari) {
    video.setAttribute('playsinline', '');
  }

  // 添加 `muted` 属性以确保静音播放
  video.setAttribute('muted', '');

  // 播放视频
  video.play();
</script>

 

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://www.mizhanw.com/blog/2368.html

相关推荐
最佳WordPress安全插件推荐清单
仅最初的网站投资就足以从一开始就保护您的网站。黑客、恶意软件、后门攻击和SEO垃圾邮件只是等待利用您的服务器、访问者数据和网站基础设施的挥之…
日期:2023-05-26 点赞:0 阅读:462
WordPress网站安全管理防火墙插件 – All In One WP Security & Firewall
WordPress网站安全管理防火墙插件 – All In One WP Security & Firewall 是一款非常优秀的W…
日期:2023-05-26 点赞:0 阅读:606
WordPress网站搬家与换域名详细教程
WordPress网站搬家是WP站长都会遇到的问题,wordpress怎么搬家对于新手而言可能是一头雾水,不知道该做哪些,网上找到的相关教程…
日期:2023-05-25 点赞:0 阅读:1,661
wordpress文章页获取作者的标签,the_author(); 不显示怎么办?
wordpress里面可自定义的东西太多了,没有一个统一的标准,wordpress版本有多,版本之间的调用方法又有差异,你在网上搜到的教程可…
日期:2023-05-23 点赞:0 阅读:356
wordpress安装教程 每一个步骤都带图示例
wordpress的安装还是比较简单的,本文来用一步骤一图的比较直观的方式来给大家介绍wordpress安装步骤。 首先要先下载wordpr…
日期:2023-05-23 点赞:0 阅读:569
wordpress调用指定ID文章的代码
在折腾wordpress模板的时候遇到“调用指定ID文章”的需求,折腾一番成功后分享下: 上面这段代码中的“$options['theme_…
日期:2023-05-23 点赞:0 阅读:137
发表评论
暂无评论

还没有评论呢,快来抢沙发~