检测支持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视频自动播放的浏览器的方法

回答

相关问题