HTML5 视频标签在移动设备上不起作用答案

【问题标题】：HTML5 video tag doesn't work on mobileHTML5 视频标签在移动设备上不起作用
【发布时间】：2018-04-19 14:21:18
【问题描述】：

我有电视视频流（显然是 mpeg-ts 流），如果我使用 html5 视频标签，它在使用 Chrome 的 win/mac 机器上都可以找到。

<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……我已经在 Android 平板电脑上安装了所有三种浏览器 - Chrome、Opera 和 Mozilla 进行测试。如果我从笔记本电脑（Chrome）观看视频，每个 JS 播放器都可以正常工作，但当我从 Android 设备访问时，它们都不能正常工作。

我能得到的最远的方法是使用 Opera+plyr（或 video.js）来获得音频播放正常，但黑屏，没有视频。

【问题讨论】：

您确定您的内部 IP "192.168.1.72:9981/stream/channelid/… 可以通过您的手机访问，而不仅仅是您的计算机吗？
是的，是的，拉斐尔。我在本地网络中的树莓派上运行网络服务器和电视（正在创建流 URL）。如果我使用我的 Windows 笔记本电脑或朋友的 Mac，Web 服务器会显示和播放流。但如果我使用 iphone 或 android 平板电脑 - 它不起作用

标签： javascript android html html5-video

【解决方案1】：

将此添加为您的视频开始标签，它将自动播放 android 和 safari 移动设备：

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

您还需要 mp4、ogv 和 webm 格式的跨浏览器

【讨论】：

感谢 Zack 的帮助，但没有帮助。它现在在我的 PC Chrome 中自动播放并且工作正常，但在 Android 或 iOS 上完全相同的东西似乎根本不起作用。整个媒体框甚至没有显示（好像它只是 html 中的一个黑色空间）：/
您是否添加了其他视频格式，这可能就是原因。尝试添加 mp4 格式和 ogv。
我在您的方法中添加了“控件”，当页面在 android 上加载并单击“播放”按钮时，它的行为就像认为它现在会开始播放（正在加载）然后踢回控制状态，你必须按播放按钮才能启动它。
如果我没有其他格式怎么办？ :D 我需要在旅途中转换流吗？我正在从电视解码器获取该流链接，但没有更改其输出格式的选项
浏览器只接受某些视频格式。这就是您遇到问题的原因。您需要转换视频格式并像这样从MDN添加它们

【解决方案2】：

如果您的视频应该自动启动，但它不允许，我会尝试像在 iOS 上一样启用控件。

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

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

【讨论】：

【解决方案3】：

这可能对你有用。对我来说效果很好。

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

【讨论】：

【解决方案4】：

视频标签不适用于移动设备。我最近看到人们做的是使用 gif 作为移动视频的海报。我还会研究像 Wistia 这样的工具来获得额外的视频支持。 Gif 可以在移动设备上运行，但作为视频资产，它们通常需要一段时间才能加载。

我不建议自托管，因为您不会获得大量支持，例如缓慢加载视频或在加载时从 320p 版本动态切换到高清版本等。

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

【讨论】：