首页 > 其他分享 >解决苹果Safari 浏览器下html不能自动播放声音和视频的问题-实时语音通话功能【唯一客服】

解决苹果Safari 浏览器下html不能自动播放声音和视频的问题-实时语音通话功能【唯一客服】

时间:2023-03-09 23:36:48浏览次数:53  
标签:浏览器 html 苹果 Safari 自动播放 myAudio 属性

在实现我的客服系统中,实时语音通话功能的时候,如果想自动播放音视频流,在苹果设备上遇到了问题。

苹果浏览器(Safari)在默认情况下不允许声音在背景里自动播放。这是出于用户体验和隐私方面的考虑,避免在用户没有意识到的情况下自动播放声音。

解决办法是

iOS 11 及以上版本的 Safari 浏览器。当用户已经有过至少一次交互以后,可以设置下面两个属性,mutedplaysinline 属性。然后动态js设置一下,就能自动播放声音了

<audio id="myAudio" src="audio.mp3" muted playsinline></audio>

然后在js里动态设置一下属性

     var myAudio = document.getElementById('myAudio');
      myAudio.muted = false;  // 将 muted 属性设置为 false
      myAudio.autoplay = true;  // 将 autoplay 属性设置为 true
      myAudio.play();  // 播放音频

这样

在页面至少有过交互以后,可以让苹果设备上自动播放声音了

 

标签:浏览器,html,苹果,Safari,自动播放,myAudio,属性
From: https://www.cnblogs.com/taoshihan/p/17201898.html

相关文章

  • HTML基础语法
    一、标记语法1.封闭类型标记:也叫双标记语法:<标记>内容</标记>注意:封闭标记必须成对出现,在结束标记里,先写一个/,再写标记名称如果没有在结束标记里......
  • html中hr标签的用法
    https://www.yisu.com/zixun/119190.htmlhtml中hr标签定义和用法:<hr>标签在HTML页面中创建一条水平线。水平分隔线(horizontalrule)可以在视觉上将文档分隔成各个部分......
  • 界面组件DevExpress WinForms v22.2 - 升级对HTML & CSS的支持
    DevExpressWinForms拥有180+组件和UI库,能为WindowsForms平台创建具有影响力的业务解决方案。DevExpressWinForms能完美构建流畅、美观且易于使用的应用程序,无论是Office......
  • 解决移动端safari等浏览器,无法在新标签打开url的问题——window.open无效
    移动端safari浏览器无法通过window.open在新标签打开链接。因为浏览器为了避免弹出广告影响用户,禁用了通过代码调用超链接在新标签打开页面的功能。这就意味着,要想在新标签......
  • HTML5 Canvas 与 SVG 与 div
    动态创建元素并能够移动它们的最佳方法是什么?例如,假设我想创建一个矩形、圆形和多边形,然后选择这些对象并将它们四处移动。我知道HTML5提供了三个元素可以使这成为......
  • HTMLReport使用2 | HTMLReport使用方法详解
    (2|HTMLReport的使用)注:以下实例来源于官网。1日志为测试报告中添加过程日志;多线程下,在报告中会分别记录每个线程的日志,同时会产生与测试报告同名的测试log文件。......
  • HTML编辑器粘贴word图片且图片文件自动上传功能
    ​ 如何做到ueditor批量上传word图片?1、前端引用代码<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml......
  • 基于ElementUI和Vue.js的SUNBOOK图书后台管理系统(纯HTML、原生Java后端开发)
    一、项目介绍-使用element-ui、axios和Vue.js实现SUNBOOK的页面结构及网页请求-通过JSON传递请求与响应参数-在后端使用JdbcUtilsByDruid实现对数据的增加、删除、......
  • html学习
    快捷键使用这些快键键仅代表在vscode环境下使用英文状态!+回车<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Com......
  • outerHtml和innerHtml的区别
    一、区别1)innerHTML:从对象的起始位置到终止位置的全部内容,不包括HTML标签。2)outerHTML:除了包含innerHTML的全部内容外,还包含对象标签本身。二、例子t......