如何根据浏览器替换页面上的元素？ [关闭]答案

【问题标题】：How to replace an element on a page depending on browser? [closed]如何根据浏览器替换页面上的元素？ [关闭]
【发布时间】：2014-12-02 03:43:14
【问题描述】：

我为我参加的在线游戏联盟创建了一个网站。问题在于标题中有一个应该自动播放的 HTML5 视频。它在 Chrome 和 Firefox 中做得很好。在 Internet Explorer 中它可以播放但不能正确显示，而在 Safari 中它根本不显示。为了解决这个问题，有什么方法可以让视频在这些浏览器上替换为标准图像？或者有人对这两个浏览器有修复吗？谢谢。

【问题讨论】：

modernizr.com 这可以帮助您检测浏览器并解决许多问题。无论如何，IE 9+ 和 safari 应该支持 HTML 5 视频元素.. 是自动播放问题还是..？如果是这样，您可以仅使用 javascript 解决它。
modernizr 用于特征检测...不是浏览器检测。
@Paulie_D：他需要先检测浏览器是否支持 HTML 5，不是吗？
@briosheje 如果有任何帮助，这里是我遇到问题的地址，www.testingfortagpro.meximas.com
HTML5 不是“功能”，Modernizr 不会检测到。

标签： javascript css html html5-video

【解决方案1】：

您有几个选择，但请记住，没有一个是防弹的，您的实现将取决于您编写的代码类型（服务器端如 PHP，或客户端如 JS）。

这里有一些建议，希望能让你走上正确的道路。

您可以尝试使用用户代理字符串检测浏览器服务器端。您可以手动解析字符串，或者（在我的建议中）使用内置函数/库。更多信息请参考本帖：

Code to parse user agent string?

然后您将使用一组服务器端 if 语句修改您的 HTML 输出以包含或不包含元素。

在呈现 HTML 后，您可以使用 JS 检测浏览器客户端。以下是一些可以完成这项工作的库。其中一些可能需要 jQuery。

https://github.com/WhichBrowser/WhichBrowser

https://github.com/gabceb/jquery-browser-plugin

然后你可以使用 .show()/.hider() 或 .remove() jQuery 函数来修改你的 HTML。

【讨论】：

我不知道该怎么做，如果它有助于我遇到问题的链接是 www.testingfortagpro.meximas.com 。如果我能得到一个命令，例如，如果使用 Internet Explorer 或 Safari 将视频替换为 logo.jpg，那就可以了。
如果您阅读我提供的链接，您将能够弄清楚如何做您想要的。

【解决方案2】：

您可以使用以下 JavaScript 代码找出浏览器名称和版本：

navigator.sayswho= (function(){
var ua= navigator.userAgent, tem, 
M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
if(/trident/i.test(M[1])){
    tem=  /\brv[ :]+(\d+)/g.exec(ua) || [];
    return 'IE '+(tem[1] || '');
}
if(M[1]=== 'Chrome'){
    tem= ua.match(/\bOPR\/(\d+)/)
    if(tem!= null) return 'Opera '+tem[1];
}
M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
return M.join(' ');
})();

接下来您要做的是针对一个值（如"IE 9"）测试此字符串，并根据if 子句输出代码。

另请参阅Browser detection in JavaScript?

【讨论】：