2015-09-18 49 views
7

有沒有辦法檢測是否允許在沒有用戶手勢的情況下在視頻元素上調用play()? 在Android上的Chrome這個發出警告:功能檢測是否需要用戶手勢

Failed to execute 'play' on 'HTMLMediaElement': API can only be initiated by a user gesture.

所以在Chrome Android是需要用戶手勢開始視頻的播放,同時它不是桌面版Chrome。 有沒有辦法來檢測我會得到哪些行爲?

我想要在我的應用程序中稍有不同的行爲,具體取決於是否允許以編程方式調用播放。

我試過使用Modernizr.videoautoplay,但是檢查元素上的autoplay屬性是不是一回事。這給IE11和Edge帶來了不利影響。

編輯:添加an example。該視頻將在Windows桌面上自動播放,並在Windows 8或10上自動播放IE11或Edge(延遲3秒)。對於Chrome @ Android,需要用戶進行交互(單擊該按鈕),並在控制檯中看到錯誤消息。

+0

你能發表有錯誤的代碼示例嗎? – Patrick

+0

嗨@帕特里克我已經通過一個例子的鏈接更新了這個問題。它有點複雜(逐幀向視頻添加幀),但問題可以看出 – oskbor

+0

嗨@oskbor,你有沒有得到解決這個問題? – Biswarup

回答

4

play方法返回一個可用於捕獲錯誤的promise。

並非所有瀏覽器都遵循the specification,因此您必須先檢查返回的內容是否爲承諾。

var autoPlayAllowed = true; 
var promise = document.createElement("video").play(); 
if(promise instanceof Promise) { 
    promise.catch(function(error) { 
     // Check if it is the right error 
     if(error.name == "NotAllowedError") { 
      autoPlayAllowed = false; 
     } else { 
      throw error; 
     } 
    }).then(function() { 
     if(autoPlayAllowed) { 
      // Allowed 
     } else { 
      // Not allowed 
     } 
    }); 
} else { 
    // Unknown if allowed 
} 
+1

我認爲這需要檢查'window.Promise'是否先存在,否則在不支持promise的瀏覽器上會出現引用錯誤。 – JayPea