HTML5视频标签在移动设备上无法工作。

Question

我有一段电视视频流（显然是mpeg-ts流），如果我使用html5视频标签，在win/mac机器上使用Chrome浏览器都可以正常播放。

<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
<source src=""http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=matroska type="video/webm">
</video>

但在Android平板电脑和iOS上无法使用。 我尝试安装了多个不同的JS播放器，例如mediaelement、plyr、video.js、mpegts等。 并且我已经安装了所有三种浏览器- Chrome、Opera和Mozilla用于测试。 如果我从笔记本电脑（Chrome）观看视频，则每个单独的JS播放器都可以正常工作，但是如果我从Android设备访问，则它们都无法正常工作。 我能做到的最远距离是使用Opera+ plyr（或video.js）播放音频，但屏幕是黑色的，没有视频。

- Ilja Leiko

---

你确定你的内部IP地址“http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=matrosk”可以被手机访问而不仅仅是电脑吗？ - Rafael T

是的，Rafael。我在我的本地网络中的树莓派上运行Web服务器和电视（它正在创建流URL）。如果我使用我的Windows笔记本电脑或朋友的Mac，Web服务器可以显示和播放流。但是，如果我使用iPhone或Android平板电脑，则无法正常工作。 - Ilja Leiko

Answer 1

将此代码添加为视频起始标签，它将在Android和Safari移动设备上自动播放：

<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%">

你还需要提供mp4、ogv和webm格式以适应不同浏览器。

- ZackAttack

---

谢谢你的帮助，Zack，但是它并没有起作用。现在在我的PC Chrome中自动播放并且正常工作，但是在Android或iOS上完全没有反应。整个媒体框甚至没有显示（就像在HTML中只是一个黑色空间）:/ - Ilja Leiko

你是否添加了其他视频格式，这可能是原因。尝试添加MP4格式和OGV格式。 - ZackAttack

我已经为您的方法添加了“控件”，当页面在安卓上加载并且我点击播放按钮时，它会像开始播放一样（正在加载），然后回到控制状态，您必须按播放按钮才能开始播放。 - Ilja Leiko

如果我没有其他格式怎么办？:D 我需要即时转换流吗？我从电视解码器获取该流链接，没有更改其输出格式的选项。 - Ilja Leiko

浏览器只接受特定的视频格式。这就是为什么你会遇到问题的原因。你需要转换视频格式并像这样从MDN添加它们。 - ZackAttack

Answer 2

这可能适用于您。对我来说运行良好。

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

- Hiren Pipariya

Answer 3

视频标签在移动设备上无法使用。最近我看到人们使用gif作为移动设备上视频的海报。我还建议使用像Wistia这样的工具来提供额外的视频支持。Gif可以在移动设备上使用，但是作为视频资产，它们需要一段时间才能加载，因为它们通常很大。

我不建议自行托管，因为您将没有太多支持，例如缓慢加载视频或在加载时动态切换从320p版本到高清版本等。

例如https://wistia.com/learn/marketing/boost-engagement-with-gifs

- Gcamara14

Answer 4

如果您的视频应该自动播放，我建议您像在iOS上那样启用控件，否则它将无法自动播放。

另一件事是尝试添加HTTP范围头，它有助于将视频拆分为字节范围，这是移动设备中需要考虑的事情。这更多地适用于iOS，但请参阅此链接：http://fdiv.net/2013/05/17/getting-html5-video-work-ios-mobile-safari

此外，正如其他人提到的，检查您的视频格式，您应该始终有多个可用类型。

- user9453652

Answer 5

如果您正在使用独立主机来存储文件，那么该主机的服务器应该像我的情况一样拥有有效的SSL证书。在我添加了证书之前，我的安卓视频播放器无法正常工作。

- Arash Masir