Question

我的电影结束时，我的iPhone 6浏览器（Safari和Chrome）以及某些ipad上的某些视频无法播放。它适用于桌面浏览器，Android Chrome甚至Safari中的iPad mini。我已经研究了一段时间了，包括Stack Overflow，但我尝试过的所有内容仍然没有在我的iPhone上播放视频（仅显示初始帧图像）。这是我的视频测试页面，我正在进行编辑，下面是我的代码，以及我根据研究尝试修复的内容：

<section id="video-wrap">   
    <video class="video <?php the_field('header_video_class'); ?>" autoplay muted loop>
      <source src="/video/<?php the_field('header_video'); ?>.mp4" type="video/mp4">
      <source src="/video/<?php the_field('header_video'); ?>.ogg" type="video/ogg">
      <source src="/video/<?php the_field('header_video'); ?>.webm" type="video/webm">
    </video><!-- /video -->
    <div id="video-wrapper">
        <div class="video-caption">
            <?php the_title(); ?>
        </div><!-- /content -->
    </div>
</section>

我尝试重新添加控制参数，没有运气
我尝试在视频代码中添加视频源并删除其他源代码，没有运气
我还压缩了我的视频。该测试示例目前是640×360，H.264，AAC。仍然没有运气。
我尝试删除视频字幕叠加，以防出现冲突。没有运气。

我失踪了什么？在此先感谢您的帮助！

Answer 1

新答案（正在工作）：

好吧，我错过了一个小细节“只显示初始帧图像”。我误解了这个问题因为“视频甚至没有尝试工作”（因为某些型号/品牌与H.264编解码器相比可能会发生这种情况）。

根据此博客论文：html5 Video Autoplay on iOS and Android ...

您的代码应该如下（也使用低分辨率MP4版本）：

<video class="video" playsinline autoplay muted loop>

最后还要检查：Webkit policy for video部分。也许欺骗机器会很有用。

旧答案：

我还压缩了我的视频。该测试示例目前是640×360，H.264，AAC。仍然没有运气。

您的H.264视频采用不兼容的配置文件进行编码：High @ Level 3.0。

解决方案：选择Main @ level 3.1重新编码（也可以尝试level 4.0）。

由于此处没有iOS硬件，请测试这些重新编码：

主要资料@ L3.1：clip-intro-low_v2.mp4

基线资料@ L3.0：clip-intro-low_v3.mp4

PS：您可能遇到与this Question类似的问题（如果它对您有用）。

Answer 2

有一个技巧可以在 safari 浏览器中加载视频标签。我们只需要重新加载放置视频标签的页面。并重新加载页面，我们可以使用此代码

 var ua = navigator.userAgent.toLowerCase();
  if (ua.indexOf('safari') != -1) {
    if (ua.indexOf('chrome') > -1) {
    }
    else {
          // Check if video tag exists
      if (jQuery(document).find('.hero-slideshow .hero-media-wrap video').length > 0) {
        if (window.location.href.indexOf('reload') == -1) {
          window.location.replace(window.location.href + '?reload');
        }
      }
    }
  }

这可能不是一个永久的解决方案，但我们可以使用此代码作为快速修复。

setTimeout(function (){
    $('.hero-slideshow .slides .hero-mp4 video').once().each(function(){
      $(this).parent('.hero-mp4').show();
      $(this).get(0).play();
    });
  }, 2000);

将源添加到视频标签并添加此属性。

<块引用>

preload="自动"

<video width="100%" height="100%" loop muted playsinline preload="auto" class="hero-video media-document mac video">
      <source src="VideoSrc" type="video/mp4"></source>
    </video>

视频标签无法在iPhone Safari或Chrome和某些iPad上运行

2 个答案: