适用于 Web 和移动设备的响应式视频介绍全屏答案

【问题标题】：Responsive Video Intro Full Screen for web and Mobile适用于 Web 和移动设备的响应式视频介绍全屏
【发布时间】：2012-07-26 07:04:41
【问题描述】：

我有一个正在与之合作的客户，他希望在将他们重定向回主页之前在他们的网站上播放全屏视频介绍。他们还希望它基于 cookie，这样用户在回来时只能看到一次视频。

到目前为止，我有 2 个问题：

1) 我无法让视频在 iPad 上呈现，因为 onClick() 在 iPad 上不起作用。我已经尝试过其他人，但仍然无法弄清楚。 2) 他们想要一个高质量的网络视频和低质量的 ipad/iphone 渲染。

这是我目前在网站加载时加载视频并使其可供所有设备访问的代码：

<body <?php body_class(); ?> onload="openVideo();">
 <div id="homepage-video" style="display:none;">
<img src="<?php echo get_template_directory_uri(); ?>/images/splash-page-final.jpg" class="splash-image" />
    <video id="homepage-video-file" class="video-js vjs-default-skin"  
      preload="auto">  
     <source src="http://www.somesite.com/wp-content/files/somesite-intro-1.mp4" type='video/mp4' />  
     <source src="http://www.somesite.com/wp-content/files/somesite-intro.webm" type='video/webm' />  
     <source src="http://www.somesite.com/wp-content/files/somesite-intro.ogv" type='video/ogg' />  
    </video>
</div>

【问题讨论】：

又是1999年！对于#2，当页面呈现时，嗅探用户代理和服务器一个不同的文件。
谢谢 - 这没有帮助。

标签： javascript wordpress html

【解决方案1】：

ua 嗅探实际上是不同分辨率的不错选择（如上所述）。你说的 onClick 是什么意思在 iPad 上不起作用？？？当然可以！您是否尝试自动触发点击事件来启动视频？被 iOS 阻止 - 自动播放也不起作用。用户必须手动启动视频

【讨论】：