Browsers Disabled Audio AutoPlay

leonardofed 發布于2019-08-23 13:46 / 1745人閱讀

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屬性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/99526.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...

kycool 2019-08-02 12:08 評論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