如何检测HTML5自动播放属性是否受支持？
如何最好地检测浏览器的HTML5video元素是否支持自动播放？
例如，在当前的iOS Safari中， 自动播放function处于禁用状态 。
更新：我现在devise的网页，它的工作方式，而不pipe是否支持自动播放。 现在当页面加载时，显示一个初始化video 。 在iPad上，用户将看到一个大的播放button。 一旦播放被触发，video被隐藏。 之后，可以通过JavaScript控制video播放器的播放 ，这正是我真正需要的。
晚会有点迟，但接受的解决scheme似乎已经过时了：Modernizr现在已经实现了这个function，请参阅https://github.com/Modernizr/Modernizr/blob/master/feature-detects/video/autoplay.js
包含类似的黑客到这里发布的其他解决scheme虽然，但只要浏览器不公开此function的可用性，这似乎是现在的最佳解决scheme。
请注意，这是自Modernizr 3以来可用的asynchronoustesting，因此您必须使用以下.on()语法进行testing：
Modernizr.on('videoautoplay', function(result){ if(result) { alert('video autoplay is supported'); } else { alert('video autplay is NOT supported'); } });
亲自看看： http : //codepen.io/anon/pen/VYoWWY?editors=001
上面的示例包括具有“videoautplay”function检测的Modernizr 3（ http://v3.modernizr.com/download/#-videoautoplay ）。
也许这将有助于像我这样的未来谷歌手机 – 这个function创build/删除video和testing，看看它是否可以自动播放。 然后将全局variables“autoplay”设置为true或false。 它testingMP4和webM兼容性，但如果需要添加更多不会是困难的（只是基地64编码和追加另一个来源）。 “可接受的延迟”variables是合理地让设备开始播放testingvideo的时间。 有限的带宽/处理的组合有时使用回退（非自动播放）解决scheme是有意义的，即使支持自动播放。 我通常使用100ms。
function detect_autoplay(acceptable_delay){ autoplay = false; var autoplay_test_content = document.createElement('video'); //create mp4 and webm sources, 5s long var mp4 = document.createElement('source'); mp4.src = "data:video/mp4;base64,AAAAFGZ0eXBNU05WAAACAE1TTlYAAAOUbW9vdgAAAGxtdmhkAAAAAM9ghv7PYIb+AAACWAAACu8AAQAAAQAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgAAAnh0cmFrAAAAXHRraGQAAAAHz2CG/s9ghv4AAAABAAAAAAAACu8AAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAABAAAAAAFAAAAA4AAAAAAHgbWRpYQAAACBtZGhkAAAAAM9ghv7PYIb+AAALuAAANq8AAAAAAAAAIWhkbHIAAAAAbWhscnZpZGVBVlMgAAAAAAABAB4AAAABl21pbmYAAAAUdm1oZAAAAAAAAAAAAAAAAAAAACRkaW5mAAAAHGRyZWYAAAAAAAAAAQAAAAx1cmwgAAAAAQAAAVdzdGJsAAAAp3N0c2QAAAAAAAAAAQAAAJdhdmMxAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAFAAOABIAAAASAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGP//AAAAEmNvbHJuY2xjAAEAAQABAAAAL2F2Y0MBTUAz/+EAGGdNQDOadCk/LgIgAAADACAAAAMA0eMGVAEABGjuPIAAAAAYc3R0cwAAAAAAAAABAAAADgAAA+gAAAAUc3RzcwAAAAAAAAABAAAAAQAAABxzdHNjAAAAAAAAAAEAAAABAAAADgAAAAEAAABMc3RzegAAAAAAAAAAAAAADgAAAE8AAAAOAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA0AAAANAAAADQAAAA4AAAAOAAAAFHN0Y28AAAAAAAAAAQAAA7AAAAA0dXVpZFVTTVQh0k/Ou4hpXPrJx0AAAAAcTVREVAABABIAAAAKVcQAAAAAAAEAAAAAAAAAqHV1aWRVU01UIdJPzruIaVz6ycdAAAAAkE1URFQABAAMAAAAC1XEAAACHAAeAAAABBXHAAEAQQBWAFMAIABNAGUAZABpAGEAAAAqAAAAASoOAAEAZABlAHQAZQBjAHQAXwBhAHUAdABvAHAAbABhAHkAAAAyAAAAA1XEAAEAMgAwADAANQBtAGUALwAwADcALwAwADYAMAA2ACAAMwA6ADUAOgAwAAABA21kYXQAAAAYZ01AM5p0KT8uAiAAAAMAIAAAAwDR4wZUAAAABGjuPIAAAAAnZYiAIAAR//eBLT+oL1eA2Nlb/edvwWZflzEVLlhlXtJvSAEGRA3ZAAAACkGaAQCyJ/8AFBAAAAAJQZoCATP/AOmBAAAACUGaAwGz/wDpgAAAAAlBmgQCM/8A6YEAAAAJQZoFArP/AOmBAAAACUGaBgMz/wDpgQAAAAlBmgcDs/8A6YEAAAAJQZoIBDP/AOmAAAAACUGaCQSz/wDpgAAAAAlBmgoFM/8A6YEAAAAJQZoLBbP/AOmAAAAACkGaDAYyJ/8AFBAAAAAKQZoNBrIv/4cMeQ=="; var webm = document.createElement('source'); webm.src = "data:video/webm;base64,GkXfo49CgoR3ZWJtQoeBAUKFgQEYU4BnAQAAAAAAF60RTZt0vE27jFOrhBVJqWZTrIIQA027jFOrhBZUrmtTrIIQbE27jFOrhBFNm3RTrIIXmU27jFOrhBxTu2tTrIIWs+17GDD0JATYCjbGliZWJtbCB2MC43LjcgKyBsaWJtYXRyb3NrYSB2MC44LjFXQY9BVlNNYXRyb3NrYUZpbGVEiYRFnEAARGGIBc2Lz1QNtgBzpJCy3XZ0KNuKNZS4+fDpFxzUFlSua9iu1teBAXPFhL4G+bmDgQG5gQGIgQFVqoEAnIEAbeeBASMxT4Q/gAAAVe+/7YOf//nNefQYACgnKGWgQFNANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQKbANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQPoANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQU1ANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQaDANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQfQANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQkdANEBAAEQEBRgAGFgv9AAIiGAAPuC/rOgnKGWgQprANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQu4ANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQ0FANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgQ5TANEBAAEQEAAYABhYL/QACIhgAPuC/rKgnKGWgQ+gANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgRDtANEBAAEQEAAYABhYL/QACIhgAPuC/rOgnKGWgRI7ANEBAAEQEAAYABhYL/QACIhgAPuC/rIcU7trQOC7jLOBALeH94EB8YIUzLuNs4IBTbeH94EB8YIUzLuNs4ICm7eH94EB8YIUzLuNs4ID6LeH94EB8YIUzLuNs4IFNbeH94EB8YIUzLuNs4IGg7eH94EB8YIUzLuNs4IH0LeH94EB8YIUzLuNs4IJHbeH94EB8YIUzLuNs4IKa7eH94EB8YIUzLuNs4ILuLeH94EB8YIUzLuNs4INBbeH94EB8YIUzLuNs4IOU7eH94EB8YIUzLuNs4IPoLeH94EB8YIUzLuNs4IQ7beH94EB8YIUzLuNs4ISO7eH94EB8YIUzBFNm3SPTbuMU6uEH0O2dVOsghTM"; //append sources to test video autoplay_test_content.appendChild(webm); autoplay_test_content.appendChild(mp4); //set attributes -needs to be visible or IE squawks, so we move it way outside autoplay_test_content.id = "base64_test_video"; autoplay_test_content.autoplay = true; autoplay_test_content.style.position = "fixed"; autoplay_test_content.style.left = "5000px"; //add to DOM document.getElementsByTagName("body")[0].appendChild(autoplay_test_content); var base64_test_video = document.getElementById("base64_test_video"); //test for autoplay, 100 ms buffer setTimeout(function(){ if(!base64_test_video.paused){ autoplay = true; } document.getElementsByTagName("body")[0].removeChild(autoplay_test_content); },acceptable_delay); } detect_autoplay(100);
据我所知，无论是Modernizr还是潜入HTML5的检测指南都不知道如何检测autoplay是否被支持。 （尽pipeModernizr的“Undetectables”页面没有autoplay 。）
我popup了一个testing页面 ，提醒新创build的<audio>元素的autoplay属性的值，iOS 4.3上的Safari和Mac OS X上的Chrome 13都返回false （而不是undefined ，这是什么IE 6返回）。
所以，不幸的是，您最好的select可能是使用浏览器检测，并维护自己的浏览器支持autoplay的列表。
这是另一种使用callback和会话存储来testingHTML5video自动播放支持的解决scheme。 一旦进行testing并存在会话存储，则在下一个会话之前不再执行检查。 这可以节省每次页面加载时运行此操作。 它使用base64'd 1秒的空白video剪辑来testing自动播放支持。
https://gist.github.com/nathansearles/271870d4100f0f045c5c
// isAutoplaySupported(callback); // Test if HTML5 video autoplay is supported isAutoplaySupported = function(callback) { // Is the callback a function? if (typeof callback !== 'function') { console.log('isAutoplaySupported: Callback must be a function!'); return false; } // Check if sessionStorage exist for autoplaySupported, // if so we don't need to check for support again if (!sessionStorage.autoplaySupported) { // Create video element to test autoplay var video = document.createElement('video'); video.autoplay = true; video.src = 'data:video/mp4;base64,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'; video.load(); video.style.display = 'none'; video.playing = false; video.play(); // Check if video plays video.onplay = function() { this.playing = true; }; // Video has loaded, check autoplay support video.oncanplay = function() { if (video.playing) { sessionStorage.autoplaySupported = 'true'; callback(true); } else { sessionStorage.autoplaySupported = 'false'; callback(false); } }; } else { // We've already tested for support // use sessionStorage.autoplaySupported if (sessionStorage.autoplaySupported === 'true') { callback(true); } else { callback(false); } } } // Usage: isAutoplaySupported(callback); // Using a callback assures that support // has been properly checked isAutoplaySupported(function(supported) { if (supported) { // HTML5 Video Autoplay Supported! console.log('HTML5 Video Autoplay Supported!'); } else { // HTML5 Video Autoplay Not Supported :( console.log('HTML5 Video Autoplay Not Supported :('); } });
我意识到这是一个video问题 – 也适用于audio。
我已经build立了一个audiotesting，目的是用Modernizr.addTest()将它加载到Moderizr。
结果令人惊讶，非常依赖平台和系统状态。 结果发现有几款支持自动播放的Android浏览器。 谁知道。
从GitHub的angular度来看，我想像Modernizr的人会比我更可靠，更优雅 – 如果还没有的话。 这似乎归结为时间。 你会认为浏览器的人会在这里给我们一个骨头。 也许他们会的。
无论如何，这里是jsfiddle链接： audio（）。自动播放testing 。
虽然在jsfiddle示例中有绒毛代码，但下面是核心：
var supportsAutoplay = false; //assume var audio = new Audio(); var waitTime; audio.autoplay = true; audio.volume = 0; // this will only be triggered if autoplay works audio.addEventListener('play', function () { supportsAutoplay = true; }); audio.src = testSrc; //see if the listener is listening setTimeout( //wait for listener to run function(){ return supportsAutoplay; }, waitTime );
虽然我还没有看到一个setTimeout比上面的（Modernizr家伙谈论它），有几个版本的代码。 我想我会相信彼得·科尔斯 。 也许他的版本不太可能受到时间问题的困扰。
Modernizr自动播放testing有一些可靠性问题，如下所示： https : //github.com/Modernizr/Modernizr/issues/1095
您可以通过检查video元素的暂停状态在编程播放之后是否更改来检测video自动播放支持。 这在一些移动浏览器中可以返回错误的否定，所以应该添加一个Promise检查来覆盖这些。
此方法适用于所有主stream浏览器（桌面和移动设备），Android <= 4.0和Windows Phone除外。
这是检测function：
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 :( } });
现场testing： https ： //codepen.io/paulorely/pen/QveEGy
也许我反应迟一点，但我只是testing一个解决scheme，适合我：
var loadStarted = false; video.onloadstart = function(){ loadStarted = true; }; function checkRunning(){ if(!loadStarted) removeVideo(); } setTimeout(checkRunning, 1000);
setTimeout不是很干净，但总体的解决scheme是这样的超级简单！
也许你觉得它很有用。 我把这个线程中提出的所有注释合并到这个解决scheme中： https ： //github.com/kaufguy/autoplay-detector
在这里演示： https ： //kaufguy.github.io/autoplay-detector/
我也只限于内联播放。
var MUTE_DELAY_PORTION = 25; var isAutoplaySupported = function (callback, timeout) { var called = false; if (!callback) { return; } if (!isPlaysinline()) { return callback({ autoplay: false, muted: false }); } checkAutoplay(false, function () { testHandler(false); }); setTimeout(function () { checkAutoplay(true, function () { testHandler(true); }); }, timeout / MUTE_DELAY_PORTION); var testHandler = function (mute) { if (!called) { called = true; callback({ autoplay: true, muted: mute }); } }; setTimeout(function () { if (!called) { called = true; callback({ autoplay: false, muted: false }); } }, timeout); }; var checkAutoplay = function (mute, callback) { var video = document.createElement('video'); video.ontimeupdate = function () { if (video.currentTime != 0) { return callback(); } ; }; video.autoplay = true; video.muted = mute; video.setAttribute('webkit-playsinline', 'webkit-playsinline'); video.setAttribute('playsinline', 'playsinline'); video.src = 'data:audio/mpeg;base64,/+MYxAAAAANIAUAAAASEEB/jwOFM/0MM/90b/+RhST//w4NFwOjf///PZu////9lns5GFDv//l9GlUIEEIAAAgIg8Ir/JGq3/+MYxDsLIj5QMYcoAP0dv9HIjUcH//yYSg+CIbkGP//8w0bLVjUP///3Z0x5QCAv/yLjwtGKTEFNRTMuOTeqqqqqqqqqqqqq/+MYxEkNmdJkUYc4AKqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq'; video.style.display = 'none'; video.load(); video.play(); return video; }; var isPlaysinline = function () { return navigator.userAgent.match(/(iPhone|iPod)/g) ? ('playsInline' in document.createElement('video')) : true; }; isAutoplaySupported(function(autoplayResult){ //do somthing }, 400)
为我工作…