Question

我需要帮助用2个视频的javascript编写条件。我搜索过，但我想我对如何设置我的变量很困惑。我有1个视频（flash iframe），我想在桌面浏览器的网站上显示，但我希望在移动设备上查看网站时显示不同的视频（非闪存）。

以下是两个视频：

<html>
    <div id="desktop_video">
        <iframe src="url-here" height="650" width="600" frameborder="no" scrolling="no"  marginwidth="0px" marginheight="0px"></iframe>
    </div>

    <div id="mobile_video">
        <script type="text/javascript" src="http://url-here"></script>
    </div>
</html>

Answer 1

说，您尝试以最低浏览器宽度480px显示桌面，这将是您的CSS：

#mobile_video {
    display: none;
}

#desktop_video {
    display: block;
}

@media only screen and (max-width: 480px) {
    #desktop_video { display: none; }
    #mobile_video { display: block; }
}

虽然桌面应该已经被阻止，但我添加到代码中以明确它是必要的。这只是一种简单的方法。

Answer 2

您可以使用Navigator.useragent来检测客户端的浏览器。（如果你搜索它，那里有很多资源。）

我从javascriptkit获取了以下一行，用于检查用户是否正在使用移动设备......

//returns true if user is using one of the following mobile browsers
var ismobile=navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i)

如果ismobile返回true，您可以显示移动视频（非闪光）。或者你可以只显示iframe视频。

希望这有助于您开始。正如我所提到的，有很多资源可以帮助您解决这个问题，即使是在SO ...

How to detect a mobile device with javascript

Javascript以useragent变量为条件

2 个答案: