视频标签在 iPhone Safari 或 Chrome 和某些 iPad 上不起作用

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 视频使用不兼容的 Profile 编码：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>