0 收藏 0 点赞 930 浏览 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

相关推荐
创建 Google Social Connect 社交登录教程
登录 Google Developers Console 首先,您需要登录您的 Google 帐户,然后访问 Google Develope…
日期:2024-02-19 点赞:0 阅读:16
创建 FACEBOOK社交登录教程
登录 Facebook for Developers 首先,您需要转到 Facebook for Developers 并登录您的 Face…
日期:2024-02-19 点赞:0 阅读:27
WordPress数据库查找替换插件 – Better Search Replace
Better Search Replace 是一款WordPress数据库可视化搜索和替换插件。当我们的网站需要更换域名,或者需要一次性批量…
日期:2023-08-26 点赞:0 阅读:151
将 WordPress 多媒体内容存储到腾讯云COS
当我们的WordPress网站使用的服务器配置及宽带不高的时候,我们可以将网站图片存储到阿里云的oss或者腾讯云的cos,这样可以减少服务器…
日期:2023-07-22 点赞:0 阅读:428
WooCommerce 商家现在可以直接在 TikTok 上销售
WooCommerce 宣布美国 WooCommerce 商家有机会成为首批在美国直接在 TikTok 上销售的商家之一。 WooComme…
日期:2023-07-22 点赞:0 阅读:906
分享七款WordPress图片分离对象存储插件
如果我们有用WordPress搭建网站的朋友应该会发现网站文件和数据库其实没有多大,在网站运营几年后数据最大的就是图片。而且图片占用服务器的…
日期:2023-07-22 点赞:0 阅读:646
发表评论
暂无评论

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