html - 在移动设备上注释掉 HTML 代码

Question

这是我在 Stack Overflow 上的第一个问题 - 请保持温和。 ;)

我正在开发一个 HTML5 网站，并决定在主页顶部实现 HTML5 视频。我的视频工作正常，但 HTML 代码依赖于在视频上启用“自动播放”——这在 iOS 上是“不行的”(我想，其他移动设备):

<div class="bg1">
  <div id="overlay"></div>
    <video autoplay loop class="fillWidth">
    <source src="video/filename.mp4" type="video/mp4"/>
    <source src="video/filename.ogg" type="video/ogg"/>
    <source src="video/filename.webm" type="video/webm"/>
    <img src="/images/bg1.jpg" title="Your browser does not support the <video> tag" />
    </video>
</div>

注意事项:
1) “Overlay”div 包含一个位于视频上方的透明 PNG(带有视频显示的透明区域)。
2) "fillWidth"类拉伸(stretch)视频以适应浏览器的宽度。
3) 我有一个旧版浏览器的图像回退，已经过测试并且效果很好。

问题来了:当我在我的 iPhone/iPad 上打开这个测试站点时，视频窗口出现了，但是“播放”图标上有一条斜杠(因为 iOS 没有比如我为视频设置的自动播放功能)。

所以我想知道的是:有没有办法在移动设备上查看网站时“注释掉”这 6 行代码(可能使用 JavaScript？) ，但将其留给桌面用户使用？

编辑:
视频位于 div 的背景中，因此有意隐藏了用户控件。 另外:我不擅长编写自定义 Javascript，所以如果您知道 JS 解决方法，我真的需要为我详细说明一些事情。 (对此感到抱歉。)

Answer 1

这个怎么样？

<div class="bg1" id="videos">
  <div id="overlay"></div>
</div>

<script type="text/javascript">
var isMobile = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry)/g);
var videos = document.getElementById('videos');

if(!isMobile) {
    // User-Agent is not IPhone, IPod, IPad, Android or BlackBerry
    videos.innerHTML += '<video autoplay loop class="fillWidth">' +
    '<source src="video/videonamehere.mp4" type="video/mp4"/>' +
    '<source src="video/videonamehere.ogg" type="video/ogg"/>' +
    '<source src="video/videonamehere.webm" type="video/webm"/>' +
    '</video>';
} else {
    videos.innerHTML += '<img src="/images/fallback.jpg" title="Your browser does not support the <video> tag">';
}
</script>

Here is a jsFiddle Demo

欢迎使用 stackoverflow :~)