Question

我有两个mp4源文件，一个用于桌面编码，一个用于移动。 Video.js正在为iPhone和iPad提供错误的服务而无法播放。如何告诉Video.js向这些设备提供哪一个？

- 编辑以添加更多信息并澄清： -

我正在使用Video.js版本3.2.0，但在4.0中也会出现同样的问题。

我遇到的可重现的问题是有些视频没有在较旧的iOS设备上播放 - 第一代iPad和iPhone 3GS。我相信这是因为Video.js正在播放源列表中的第一个mp4而不是为移动编码的那个。

我的Video.js播放器代码如下所示：

<video id="video_1" class="video-js vjs-default-skin" 
     controls preload="auto" width="640" height="390" 
          poster="https://s3.amazonaws.com/sightingsreport/videos/1748/dthumbnail_0000.png"
          data-setup="{}">
          <source src="https://s3.amazonaws.com/sightingsreport/videos/1748/default.mp4" 
                type='video/mp4' />
          <source src="https://s3.amazonaws.com/sightingsreport/videos/1748/movie.webm" 
                type='video/webm' />
          <source src="https://s3.amazonaws.com/sightingsreport/videos/1748/mobile.mp4" 
                type='video/mp4' />
</video>

如果我将mobile.mp4来源移动到列表中的第一位，它会在旧的iOS设备上播放，但它似乎也会在非移动设备上使用。

我认为Video.js应该自动为设备提供最好的源文件。这不正确吗？

处理此问题的最佳方法是什么？

Answer 1

我会用PHP像..

<?PHP
$isiPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$isiPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$isiPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$isiDevice = $isiPod || $isiPhone || $isiPad ;
?>

.. ..和

    <video id="video_player" class="video-js vjs-default-skin">
 <?PHP if($isiDevice ) { ?>
    <source src="mobile.mp4" type='video/mp4' />
 <?PHP } else { ?>
    <source src="desktop.mp4" type='video/mp4' />
 <?PHP } ?>
    </video>

Answer 2

这是video.js中的 主要错误 。它检查每个源上的canPlayType()并仅选择要使用的第一个源，而不是保留浏览器可以选择的多个源。

基本上，现在不可能拥有相同类型的后备视频。

我在Github上提交了与此相关的问题：

https://github.com/videojs/video.js/issues/662

如何告诉video.js哪些mp4源用于移动设备？

2 个答案: