【前端 ios】audio不能在苹果手机正常播放

news/2024/11/28 12:55:16/

在项目中用到了audio组件播放音频,在安卓上播放都是正常的,在 ios 的 safari 浏览器中却不能正常播放音频

 

原因:


由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio。故需要用户通过手动触摸的方式(如 click touch)激活播放audio

 

解决方式:


index.html:

<audio id="music" class="media-audio" src="src.mp3" preload loop="loop"></audio >

方法一、主动调用,先播放后暂停

index.js:

// 初始化时主动调用
(function () {$("#music").load();$("#music").pause();
}())

方法二、监听点击事件,事件中初始化音频

// 使用one绑定事件,触发一次即解绑
$(document).one('click touchstart', document.body, function () {let audios = document.getElementsByTagName('audio');for (let i = 0, len = audios.length; i < len; i++) {audios[i].load();audios[i].pause();}
});

 


http://www.ppmy.cn/news/516579.html

相关文章

html ios 视频播放不了,html中的video标签在ios微信中无法播放的解决方法之一

html中的video标签在ios微信中无法播放的解决方法之一 发布时间:2020-07-16 22:41:04 来源:51CTO 阅读:2652 作者:lixiaoyu1223 最近在做一个微信企业号的项目,其中有一个需求是在企业号的页面中播放视频,最开始是使用video标签直接加载视频地址,结果在android手机中能正…

无法播放Blob视频文件问题

背景 最近在开发移动端的产品视频播放功能&#xff0c;本地开发环境&#xff0c;在pc端浏览器里面打开是可以正常播放的&#xff0c;但是到了线上测试环境&#xff0c;视频一直播放不了&#xff0c;无论是pc端还是移动端。 期初代码只是简单的使用 video标签 source标签 去实…

小程序:播放视频

问题一&#xff1a;本地视频无法播放&#xff0c;如图: 解决&#xff1a;需要使用服务器地址 w小程序 video 组件播放本地视频&#xff08;黑屏无法播放&#xff0c;报错&#xff1a;MEDIA_ERR_SRC_NOT_SUPPORTED&#xff09;_卡尔特斯的博客-CSDN博客_小程序video黑屏 问题二…

视频在苹果手机内嵌播放,不会弹出视频窗口

视频在苹果手机内嵌播放&#xff0c;不会弹出视频窗口 <video name"media" preload"none"x5-playsinline"true"playsinline"true" webkit-playsinline"true" poster"./static/img/delivery-slam2-lg.jpg" mu…

ios 播放不了服务器视频文件流,浅析iOS中视频播放的几种方案

1、AVPlayer (1) 优缺点 优点:可以自定义 UI, 进行控制 缺点:单纯的播放,没有控制 UI(进度,暂停,播放等按钮),而且如果要显示播放界面, 需要借助AVPlayerLayer, 添加图层到需要展示的图层上 (2)实现远程视频播放 实现播放功能(只有声音) 1.导入框架 2.通过远程 URL 创建 AVPlay…

解决苹果手机微信音视频不能自动播放问题

加载以下代码即可 <script src"http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script> //一般情况下&#xff0c;这样就可以自动播放了&#xff0c;但是一些奇葩iPhone机不可以 document.getElementById(idName).play(); //微信…

取消苹果手机播放视频自动全屏

iphone苹果手机上用html5的video方式播放视频时&#xff0c;在ipad上是默认原来大小的&#xff0c;而在iphone上是默认全屏播放的。 解决办法&#xff1a; HTML里video必须加上webkit-playsinline属性 <video id"player" width"480" height"320&qu…

iphone手机html视频播放,iphone5视频格式 传到苹果手机上的视频怎么才能看

iphone5/5s播放各种格式视频的几种方法 运用视频转换工具自从iphone出现时&#xff0c;就有很多的视频转换器出现&#xff0c;目前最流行的视频转换器是“狸窝iphone视频格式转换器”。它能将视频旁边的黑边去掉&#xff0c;还可以分段转换和视频拼合&#xff0c;并定制不同分辨…