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

标签 javascript wordpress html

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

最佳答案

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

关于javascript - 适用于网络和移动设备的响应式视频介绍全屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11640717/

相关文章:

javascript - 将用户重定向回注册页面,但将其填写的表单保留在 php 中

javascript - 根据 woocommerce 中的产品价格显示百分比

wordpress - 根据地理位置在首次访问时重定向用户

javascript - ng-html-bind 用于包含复选框的标签

javascript - 第一次点击 Accordion 不会占用图表的高度

javascript - Kendo 进度条在进行 ajax 调用时未启动

javascript - 如何获取数组中的对象值

javascript - 在 PHP 中将 HTML 页面保存为 PDF

html - 不同的页面模板在 WordPress 中不显示内容

javascript - Bootstrap HTML 和 JS 中的按钮