显示HTML5视频控件在Android

Question

我在具有快速回退这个视频标签：

<video id="myvideo" width="480" height="224" autoplay preload="auto" loop poster="intro6.jpg"> 
<source src="intro6.mp4" type="video/mp4"> 
<source src="intro6.webm" type="video/webm"> 
<source src="intro6.ogv" type="video/ogg"> 
<object width="480" height="224" type="application/x-shockwave-flash" data="player.swf"> 
<param name="movie" value="player.swf" /> 
<param name="flashvars" value="autostart=true&amp;controlbar=hide&amp;image=intro6.jpg&amp;file=intro6.mp4&amp;repeat=always" /> 
<img src="intro6.jpg" width="480" height="224" /> 
</object> 
</video> 

正如你所看到的我没有任何控制，它只是一个循环的视频自动播放那个。这在桌面浏览器上非常适用，但在Android和iOS上并不那么重要。 所以我需要控制在Android上显示，因为它不会自动播放或循环。 而在iOS上，我需要视频不要自动播放。

有没有办法用javascript来实现这个？并记住我不知道多少JavaScript。

谢谢！

Answer 1

也许最简单最实用的方法是检查用户代理，看看您是否在Android上。

if (navigator.userAgent.indexOf('Android') >=0) { 
    document.getElementById('myvideo').controls = true; 
} 

通常，用户代理嗅探是“皱眉”。它的通常是最好使用功能检测，因为一些遥远的未来版本的Android浏览器可能支持自动播放。但是，移动浏览器通常不擅长告诉你他们何时不支持视频/音频规范。

另一种方法是检查事件。在FF/Chrome/IE9 +中，该活动将触发一系列活动，其中包括：loadstart,progress,durationchange等...最高为play和playing。在Android浏览器（至少是我的老版本）中，视频将会触发stalled事件。您可以查找stalled，然后启用控件。当你得到'玩'事件时，你可以再次移除它们。

var video = document.getElementById('myvideo'), started = false; 
if (video && video.addEventListener) { //in case of IE < 9 
    video.addEventListener('stalled', function() { 
     if (!started) video.controls = true; 
    }, false); 
    video.addEventListener('play', function() { 
     started = true; 
     video.controls = false; 
    }, false); 
} 

但也有其他原因，你可能会看到这种情况下，像一个缓慢的互联网连接。因此，在视频开始之前，您仍然有可能在桌面浏览器中看到一些控件。

你不需要担心iOS。即使您想要，它也不会自动播放。