响应式视频简介适用于网络和移动设备的全屏

Responsive Video Intro Full Screen for web and Mobile

本文关键字：移动 网络 视频 适用于 响应      更新时间：2024-01-28

我的一个客户希望在将他们重定向回主页之前，在他们的网站上有一个全屏视频介绍。他们还希望它是基于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>

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

相关文章：