针对网络和移动设备的响应式视频介绍全屏

时间:2012-07-24 23:26:30

标签: javascript wordpress html5

我有一个我正在使用的客户希望在将其重定向回主页之前在其网站上进行全屏视频介绍。他们还希望它基于cookie,因此用户只有在他们回来时才能看到视频。

到目前为止,我有两个问题:

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>

1 个答案:

答案 0 :(得分:0)

对于不同的分辨率(如上所述),ua嗅探实际上是一个不错的选择。 iPad上你的意思是什么?确定它确实如此! 您是否尝试自动触发点击事件以启动视频?被iOS阻止 - 自动播放也不起作用。用户必须手动启动视频