1

我有这个带有 Flash 后备的视频标签：

<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。

谢谢！

4

1 回答 1

3

可能最简单和最实用的方法是检查用户代理以查看您是否在 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);
}

But there are other reasons why you might see that event, like a slow internet connection. So you'll still risk seeing the controls for a bit in a desktop browser until the video starts.

You don't need to worry about iOS. It won't autoplay, even if you want it to.

于 2013-01-11T02:23:18.330 回答