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

相关推荐
宝塔重启服务器后 mysqld 服务启动失败解决办法
今天安装系统测试,安装完后重启了服务器,MYSQL一直在停止状态,不管怎么重启都没反应,网上看了一堆信息解决方案很多还是没解决,没针对性哪里…
日期:2024-05-03 点赞:0 阅读:59
建独立站,Shopify和Wordpress如何选?哪个好 ☘️很多小伙伴在创建独立站时,总是纠结应该如何选择Shopify来建站还是Wor…
日期:2024-03-30 点赞:0 阅读:127
创建 Google Social Connect 社交登录教程
登录 Google Developers Console 首先,您需要登录您的 Google 帐户,然后访问 Google Develope…
日期:2024-02-19 点赞:0 阅读:189
创建 FACEBOOK社交登录教程
登录 Facebook for Developers 首先,您需要转到 Facebook for Developers 并登录您的 Face…
日期:2024-02-19 点赞:0 阅读:197
WordPress数据库查找替换插件 – Better Search Replace
Better Search Replace 是一款WordPress数据库可视化搜索和替换插件。当我们的网站需要更换域名,或者需要一次性批量…
日期:2023-08-26 点赞:0 阅读:237
将 WordPress 多媒体内容存储到腾讯云COS
当我们的WordPress网站使用的服务器配置及宽带不高的时候,我们可以将网站图片存储到阿里云的oss或者腾讯云的cos,这样可以减少服务器…
日期:2023-07-22 点赞:0 阅读:529
发表评论
暂无评论

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