視頻播放--自動播放

關於自動播放

autoPlay 布爾屬性；指定後，視頻會立刻自動開始播放，不會停下來等着數據載入結束。

IOS

• 無音頻源的 video 元素 容許自動播放
• 禁音的 video 元素容許自動播放
• 若是 video 元素在沒有用戶手勢下有了音頻源或者變成非禁音，會暫停播放
• video 元素屏幕可見纔開始播放
• video元素不可見後中止播放

Android

安卓的 chrome 53 後放寬了自動播放策略，策略不一樣於IOS的Safari，須要同時對 video 設置 autoplay 和 muted（是否禁音），才容許自動播放； 安卓的 FireFox 和 UC 瀏覽器支持任何狀況下的自動播放； 安卓的其餘瀏覽器暫時不清楚狀況；

Safari 瀏覽器

Safari 10 後帶音頻的視頻和音頻默認禁止自動播放，更多信息能夠參考這篇文章；

Chrome 瀏覽器

禁音的視頻依舊能夠播放，帶聲音的視頻會根據媒體參與指數來決定可否自動播放，那什麼是媒體參與指數？官方給瞭解釋和相關的維度：

MEI 是一個評估用戶對於當前站點的媒體參與程度的指數，它取決於下面幾個維度:

• 用戶在媒體上停留時間超過了
• 7秒以上音頻必須是展現出來，而且沒有靜音與
• video 之間有過交互
• 媒體的尺寸不小於 200x140.

檢測可否自動播放？

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}
複製代碼

爲何 IOS 下微信和釘釘能夠自動播放帶聲音的視頻？

確實發如今微信常常能看到自動播放的H5，可是做者本身寫的設置了 autoplay、playsInline 的視頻播放樣例，在微信上依舊沒法自動播放，而在釘釘上卻能夠自動播放

系統-瀏覽器帶聲音不帶聲音IOS 釘釘支持支持IOS Safari禁止自動播放IOS 微信禁止禁止

經過查詢資料，IOS WebAPP 開發都是基於 IOS 提供的瀏覽器內核進行開發的，因此在 WebAPP 的 webview 中能夠修改自動播放的表現，釘釘明顯是支持自動播放，微信則是禁止自動播放，可是提供了內置事件來支持自動播放：

微信下經過 WeixinJSBridgeReady 事件進行自動播放：

document.addEventListener(
  'WeixinJSBridgeReady',
  function() {
    video.play();
  },
  false
);
複製代碼

原文地址：github.com/ProtoTeam/b…

追加內容

微信H5自動播放音頻

yinyue('Fireworks')
    function yinyue(d) {
        var b = document.getElementById(d);
        var c = function c() {
            b.play();
            document.removeEventListener("touchstart", c, false);
        };
        b.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
            c();
        }, false);
        document.addEventListener("YixinJSBridgeReady", function () {
            c();
        }, false);
        document.addEventListener("touchstart", c, false);
    }
複製代碼