0

我需要帮助为 2 个视频编写使用 javascript 的条件。我已经四处搜索，但我想我对如何设置变量感到困惑。我有 1 个视频（flash iframe）想在桌面浏览器的网站上显示，但我想在移动设备上查看网站时显示不同的视频（非 Flash）。

这是两个视频：

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

2 回答 2

0

假设您尝试以最小 480 像素的浏览器宽度显示桌面，这将是您的 CSS：

#mobile_video {
    display: none;
}

#desktop_video {
    display: block;
}

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

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

于 2013-07-12T00:29:13.180 回答
0

您可以使用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如果返回，您可以显示移动视频（非 Flash）true。或者你可以只显示 iframe 视频。

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

如何使用 javascript 检测移动设备

于 2013-07-12T00:32:08.650 回答