檢測支持HTML5視頻自動播放的瀏覽器的方法

我已經完成了一些視頻背景的項目，當加載頁面時會自動播放，並且只在設備不是移動瀏覽器時才加載（不接受HTML5上的自動播放屬性視頻，在這種情況下只是一個圖像被加載）。檢測支持HTML5視頻自動播放的瀏覽器的方法

爲了檢測這種使用jQuery，在這裏看到：

var isMobile = { 
    Android: function() {  return navigator.userAgent.match(/Android/i); }, 
    BlackBerry: function() {  return navigator.userAgent.match(/BlackBerry/i); }, 
    iOS: function() {  return navigator.userAgent.match(/iPhone|iPad|iPod/i); }, 
    Opera: function() {  return navigator.userAgent.match(/Opera Mini/i); }, 
    Windows: function() {  return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/WPDesktop/i); }, 
    any: function() {  return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()); }}; 

$(document).ready(function(){  
    if(isMobile.any()) { 
     $('.backgroundVideoC').append("<img alt= src='media/germannoload.jpg'/>");} 
    else{ 
     $('.backgroundVideoC').append("<video preload='auto' muted class='indexVideo' id='indexVideo'><source src='media/interactvid.webm' type='video/webm'><source src='media/interactvid.mp4' type='video/mp4'></video>"); 
     $('#indexVideo').get(0).pause();}

這正常工作了大多數情況下，但我已經看到了一些黑莓設備仍然加載視頻，即使這些是移動瀏覽器，既不接受自動播放。

是否可以改用Modernizr來檢測自動播放是否可用，而不是通過jQuery檢查？ jQuery方法在Modernizr自動播放檢測中有什麼優勢嗎？

來源

2014-09-13 Biomehanika

如果你的問題是準確地檢測瀏覽器類型和設備類型，它可能會給你如何去做你的代碼sampe，你可以使用像UA-Parser.js（這是免費的）。我已經使用這個用於我的網站，它具有優異的檢測瀏覽器類型，移動設備等。我使用它是這樣的：

var parser = new UAParser(); 
    parser.setUA(navigator.userAgent); 
    var result = parser.getResult(); 

    /* 
     alert(result.browser.name); 
     alert(result.browser.version); 
     alert(result.device.model); 
     alert(result.device.type); 
     alert(result.device.vendor); 
     alert(result.os.name + ' - ' + result.os.version); 
    */

幾乎沒有任何browsser或設備類型它不能準確地檢測（至少根據根據我的經驗）。

來源

2014-09-13 12:19:27

我要檢查這個方法，非常感謝蘭迪。 – Biomehanika 2014-09-13 12:32:08

Modernizr v 3（目前在http://v3.modernizr.com/download預發佈）有一個視頻自動播放檢測。

來源

2014-09-13 19:52:35 Patrick

希望它即將發佈 – Biomehanika 2014-09-14 15:29:57

它被釋放。它只是不是正式版本。現在唯一阻止它的是網站重新設計 – Patrick 2014-09-14 21:29:08

我剛剛嘗試Modernizr 3自動播放檢測，它檢測到從FF打開時沒有自動播放，是否承認自動播放...有任何報告方式？ – Biomehanika 2014-09-22 15:50:25

調用video.play()將產生一個承諾，將在非IE瀏覽器中被拒絕。使用類似：

var p = video.play(); 

if (p) { 
    p.catch(function() { 
    //initiate fallback action 
    }); 
}

來源

2016-12-06 07:54:47

Modernizr的具有視頻自動播放測試的一些可靠性問題，因爲在此間指出，https://github.com/Modernizr/Modernizr/issues/1095

您可以通過檢查檢測視頻自動播放的支持，如果一個視頻元素的變化暫停狀態之後它以編程方式播放。僅此一項就會在某些移動瀏覽器中返回錯誤的否定結果，因此應該添加Promise檢查以涵蓋這些。

此方法適用於所有主流瀏覽器（臺式機和移動設備），Android < = 4.0和Windows Phone除外，該方法返回假陰性。

下面是偵測功能：

var supports_video_autoplay = function(callback) { 

    if (typeof callback !== "function") return false; 

    var v = document.createElement("video"); 
    v.paused = true; 
    var p = "play" in v && v.play(); 

    callback(!v.paused || ("Promise" in window && p instanceof Promise)); 

};

用法：

supports_video_autoplay(function(supported) { 
    if (supported) { 
    // video autoplay supported! 
    } else { 
    // no video autoplay support :(
    } 
});

現場測試：https://codepen.io/paulorely/pen/QveEGy

來源

2017-06-09 08:13:20

檢測支持HTML5視頻自動播放的瀏覽器的方法

回答

相關問題