Video.js流畅模式不适用于移动Chrome，Safari上的HLS视频

编程问答 2022-06-03

问题描述

我使用video.js播放HLS流。
我试图将播放器的尺寸设置为每个可能的长宽比，因为我要播放的视频的长宽比是未知的。
根据{{​​3}}，实现此目标的方法是使用流体模式：

<html>

<head>
  <link href="https://unpkg.com/video.js/dist/video-js.css" rel="stylesheet">
  <meta charset="utf-8">
  <title>Video.js Starter Template</title>
</head>

<body>
  <video
         id="my_video"
         class="video-js vjs-fluid"
         controls
         preload="auto"
         data-setup="{}"
         >
 <source src="https://cph-p2p-msl.akamaized.net/hls/live/2000341/test/master.m3u8" type="application/x-mpegURL" />
   
  </video>
  <script src="https://unpkg.com/video.js/dist/video.js"></script>
</body>

</html>

但是，流畅模式在移动版Chrome和Safari上无法正常运行，使播放器尺寸保持不变并用黑色边距填补空白：

video.js documentation

相同的代码在台式机和移动Firefox上完美运行

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

html5-videomobile-browservideo-streamingvideo.js