带有自定义控件的视频无法在 iOS 上播放(Safari 和 Chrome)

Posted

技术标签:

【中文标题】带有自定义控件的视频无法在 iOS 上播放(Safari 和 Chrome)【英文标题】:Video with custom controls not Playing on iOS (safari & chrome) 【发布时间】:2021-09-23 00:25:22 【问题描述】:

我正在使用 Django 开发一个平台,该平台托管直接上传到服务器上的视频。 我正在测试应用程序,我得到的结果是视频在桌面上可以正常播放,但不能在移动 ios(safari 和 chrome)上播放,而是在使用 android 10 的移动设备上播放。视频格式正确(mp4) 和编码标准(H264、AAC)。

我已经阅读了不同的主题,这些主题讨论了在 iOS 上触发和播放视频 (ex.1ex.2) 的正确方法,但即使我遵循本指南,我也无法触发视频按下播放按钮时播放。我不知道它有什么问题。

代码如下:

     <div class="c-video">

      <video class="video" id="video" src=" video.video.url " type='video/mp4' poster=" video.image.url "> </video>

      <div class="controls">
        <div class="bar">
          <div class="dragger"></div>
          <div class="barline"></div>
        </div>
        <div class="buttons">
          <button id="play-pause"></button>
        </div>
        <div class="volume-slider">
          <input id="vol-control" type="range" min="0" max="100" step="1" oninput="SetVolume(this.value)" onchange="SetVolume(this.value)"></input>
        </div>
      </div>
     </div>


    <script>

    var video = document.getElementById("video");
    var btn = document.getElementById("play-pause");

    btn.addEventListener('click', function(e) 
        if (video.paused || video.ended) video.play();
        else video.pause();
    );
    </script>

我也尝试直接从按钮触发播放事件,但没有任何改变:

   <div class="buttons">
   <button id="play-pause" onclick="togglePlay();"></button>
   </div>

   <script>

     var video = document.getElementById("video");
     var btn = document.getElementById("play-pause");

     function togglePlay() 
       if (video.paused || video.ended)
         video.play();
       else
         video.pause();
      

   </script>

【问题讨论】:

你能提供一个示例视频的链接吗?问题可能在于视频本身的编码,因为移动设备可能不支持它 @Mick 视频的编码是 H264(视频)AAC(声音),CBR 15 和 MPEG-4 格式 并非所有移动设备都支持所有 H.264 配置文件。如果您可以添加一个 ffprobe 输出,这将有助于消除此问题。 @Mick 我已经在其中一个文件上运行了 ffprobe。我已经发布了输出作为答案,应该从中假设什么? 如果您现在想更新它,实际上最好将 ffprobe 输出添加到问题中,而不是作为单独的答案。该文件看起来不错(请参阅此处的信息:***.com/a/59733769/334402)。如果您能够分享指向不起作用的示例视频的链接,那也会很有帮助。过去,某些 iOS 设备不支持您的视频的“主要”配置文件,尽管我不确定情况是否仍然如此。如果您有“高”或“基线”版本,您可以尝试一下 - 基线将提供更好的 Android 兼容性。 【参考方案1】:

正如@Mick 所建议的,问题可能出在视频文件的编码上,这是在上传到应用程序的视频文件之一上运行 ffprobe 时的输出结果:

ffprobe version 4.4 Copyright (c) 2007-2021 the FFmpeg developers
  built with Apple clang version 11.0.0 (clang-1100.0.33.17)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.4_2 --enable-shared --enable-pthreads --enable-version3 --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libdav1d --enable-libmp3lame --enable-libopus --enable-librav1e --enable-librubberband --enable-libsnappy --enable-libsrt --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libspeex --enable-libsoxr --enable-libzmq --enable-libzimg --disable-libjack --disable-indev=jack --enable-avresample --enable-videotoolbox
  libavutil      56. 70.100 / 56. 70.100
  libavcodec     58.134.100 / 58.134.100
  libavformat    58. 76.100 / 58. 76.100
  libavdevice    58. 13.100 / 58. 13.100
  libavfilter     7.110.100 /  7.110.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  9.100 /  5.  9.100
  libswresample   3.  9.100 /  3.  9.100
  libpostproc    55.  9.100 / 55.  9.100
Input #0, mov,mp4,m4a,3gp,3g2,mj2, from 'SANCHO_LUA.mp4':
  Metadata:
    major_brand     : mp42
    minor_version   : 0
    compatible_brands: mp42mp41
    creation_time   : 2021-06-13T02:23:50.000000Z
  Duration: 00:07:48.07, start: 0.000000, bitrate: 10305 kb/s
  Stream #0:0(eng): Video: h264 (Main) (avc1 / 0x31637661), yuv420p(tv, bt709), 1280x720, 9984 kb/s, 25 fps, 25 tbr, 25k tbn, 50 tbc (default)
    Metadata:
      creation_time   : 2021-06-13T02:23:50.000000Z
      handler_name    : ?Mainconcept Video Media Handler
      vendor_id       : [0][0][0][0]
      encoder         : AVC Coding
  Stream #0:1(eng): Audio: aac (LC) (mp4a / 0x6134706D), 48000 Hz, stereo, fltp, 317 kb/s (default)
    Metadata:
      creation_time   : 2021-06-13T02:23:51.000000Z
      handler_name    : #Mainconcept MP4 Sound Media Handler
      vendor_id       : [0][0][0][0]

【讨论】:

【参考方案2】:

我正在处理一个类似的问题,问题不在于视频格式,而是我的 API 不支持 iOS 设备所需的 HTTP Range Requests。根据ticket 判断默认情况下,Django 开发服务器似乎不支持范围请求,但是如果您设置 apache 或 nginx 来提供视频文件,它应该可以正常工作。

我通过将视频上传到 AWS S3 并使用预签名 URL 直接从那里提供它们来解决了这个问题。该解决方案为我提供了 iOS 支持和视频访问控制。

【讨论】:

你是对的。我也偶然发现了那张票,现在我已经完成了我的应用程序,我可以向它保证这是真的。使用 apache 部署应用程序后,问题不再出现,并且视频在桌面和移动设备上的 safari chrome 中都可以正常播放。谢谢你的回答

以上是关于带有自定义控件的视频无法在 iOS 上播放(Safari 和 Chrome)的主要内容,如果未能解决你的问题,请参考以下文章

自定义 html5 视频播放器的控件元素中可用的按钮

Android进阶:自定义视频播放器开发(上)

chrome 下视频全屏播放后自定义控件无法使用的问题探究

iOS 视频播放器完成按钮

带有自定义 html5 控件的 Airplay

无法让我的自定义播放按钮在我的视频播放器上工作