这是我关于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>
Notes:
1)"Overlay" div包含一个位于视频上方的透明PNG(具有视频显示的透明区域) .
2)"fillWidth"类拉伸视频以适应浏览器的宽度 .
3)我有一个旧版浏览器的图像后备,已经过测试,效果很好 .
So here's the problem: 当我在iPhone / iPad上拉这个测试网站时,视频窗口显示但是"Play"图标有一个斜线(因为iOS不喜欢我为视频设置的自动播放功能) .
So what I'd like to know is: 有什么方法可以在移动设备上查看网站时使用这些6行代码(可能使用JavaScript?),但是留给桌面用户使用?
EDIT:
视频位于div的背景中,因此用户控件是有意隐藏的 . 另外:我不擅长编写自定义Javascript,所以如果你知道JS解决方法,我真的需要为我拼写的东西 . (对于那个很抱歉 . )
3 回答
您需要选择要编码的编程语言,以便您可以识别用户代理的类型并显示用户代理类型的正确代码 . PHP是一个非常好的语言 . 下面是一段PHP,我用它来识别用户代理是否代表移动设备,如果它是执行特定的PHP代码 . 这只是处理这种类型的场景时PHP的样子 .
我会使用名为
modernizr
的javascript
库,它允许您确定浏览器是否支持新html5
的部分内容,甚至会为不支持某些新html5
功能的浏览器重新编写代码Modernizr Link
这个怎么样 ?
Here is a jsFiddle Demo
欢迎来到stackoverflow:〜)