Browsers Disabled Audio AutoPlay

kycool 发布于2019-08-02 12:08 / 2479人阅读

If you have used audio or video, I guess you probably know autoplay attribute. Sometimes, PM wants to use that. However, the browsers doesn"t want that.

When I was using autoplay on 2018.10, I find that safari and chrome disabled autoplay when user haven"t interacted with the page, especially on safari mobile. It"s annoying.

So, if you want to use autoplay it may fail. So, some guys choose to play the audio when user click or touch the page. But I think the better way is to detect whether the user"s browser support autoplay. And the way is:

audioEl
  .play()
  .then(res => {
    //not disabled
  })
  .catch(er => {
    //disabled
  })

However, ie11 and edge before 2018.1 returns undefined when audio.play(). So, if you care about that, you may try:

let audioState = audioEl.play()
if (audioState !== undefined) {
  audioState
    .then(res => {
      //not disabled
    })
    .catch(er => {
      //disabled
    })
}
//other logic? what are you gonna do?

Original Post

Reference

Autoplay Best Practices with Video.js

GPU云服务器云服务器 Browsers autoplay Disabled disabled属性

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53358.html

Browsers Disabled Audio AutoPlay

If you have used audio or video, I guess you probably know autoplay attribute. Sometimes, PM wants to use that. However, the browsers doesnt want that. When I was using autoplay on 2018.10, I find tha...

leonardofed 2019-08-23 13:46 评论0 收藏0
工作手记之ios safari禁止音频自动播放的解决方法

摘要：问题场景制作一个，需要微信打开后背景音乐或者其他音频文件进行播放，但是经常出现的结果是，安卓基本没有问题，但是苹果手机确不行，总是不进行播放，这是为什么呢问题原因苹果为了用户着想，禁止了和加载播放。问题场景：制作一个H5，需要微信打开后背景音乐或者其他音频文件进行播放，但是经常出现的结果是，安卓基本没有问题，但是苹果手机确不行，总是不进行播放，这是为什么呢？问题原因：苹果为了...

springDevBird 2019-08-21 11:20 评论0 收藏0
HTML5 Audio标签方法和函数API介绍

摘要：侦听到事件后处理事件的函数。侦听器在侦听时有三个阶段捕获阶段目标阶段和冒泡阶段。顺序为捕获阶段根节点到子节点检查是否调用了监听函数目标阶段目标本身冒泡阶段目标本身到根节点。播放中常用的时间处理哦歌曲已经载入完全完成缓冲至目前可播放状态。文章目录： audio常用属性 audio音乐格式的支持 audio属性参数说明最近在搞audio方面的h5页面，遇到一些坑，希望这篇文章对大...

XUI 2019-08-29 12:37 评论0 收藏0