HTML5 Video iOS播放按钮消失答案

【问题标题】：HTML5 Video iOS play button disappearingHTML5 Video iOS播放按钮消失
【发布时间】：2017-11-16 12:48:05
【问题描述】：

我在 jsfiddle 中创建了一个简单的 HTML5 dash player 实例..

  <video class="dashjs-player" poster="https://dummyimage.com/600x400/000/fff" autoplay playsinline>
                <source src="https://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd" type="application/dash+xml"/>
                <source src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type="application/x-mpegURL">
            </video>

当我尝试在 iPad 上播放时，我可以正确加载海报图像，然后播放按钮在屏幕上闪烁一秒钟然后消失。

有人知道为什么会这样吗？

【问题讨论】：

请查看此链接：github.com/CSS-Tricks/AnythingSlider/issues/369
读得很好，但不确定它是否与我的情况相关。我根本没有使用滑块
我了解到我发现您的问题和滑块问题之间存在相似之处。您可以尝试一次他们的解决方案吗？
我看不出他们的解决方案是什么？
如果您将视频放在 iframe 中？您尝试过这种解决方法吗？

标签： ios html5-video mobile-safari http-live-streaming mpeg-dash

【解决方案1】：

更新：

您提供的 JSFiddle 似乎无法在 MAC 上的 Safari 上播放，这听起来与您正在观察的问题相似。

但是，如果您右键单击海报并选择显示控件，它会显示视频，并且看起来像是在播放。

同样，如果您将“控件”属性添加到视频标签，它将自动正确播放视频。

注意，这可能是 JSFiddle 限制，而不是 Safari 或 iOS 限制，但无论哪种方式，它都是可重现的效果（Safari 版本 11.0.1 (12604.3.5.1.1)）。

  <video class="dashjs-player" poster="https://dummyimage.com/600x400/000/fff" autoplay playsinline controls>
                <source src="https://yt-dash-mse-test.commondatastorage.googleapis.com/media/car-20120827-manifest.mpd" type="application/dash+xml"/>
                <source src="https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8" type="application/x-mpegURL">
            </video>

同样值得注意的是，webkit.org 的建议是不要假设任何媒体都会自动播放，因为浏览器通常允许用户在这方面设置偏好。他们的建议是检查并在必要时添加一个按钮或一些控件以允许用户播放视频：

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

原答案

如果您查看浏览器控制台和调试器，请检查它使用的是 DASH 流还是 HLS 流。 iOS 设备更喜欢 HLS，但我不确定它们是否会覆盖您列出的顺序。

如果它使用 HLS 流，那么这可能会解释您的问题 - 参考 dash.js 播放器不会播放您在 Mac 上的 Safari 上链接的 m3u8 文件，但它会播放您链接到的 mpd 文件：

http://dashif.org/reference/players/javascript/1.3.0/samples/dash-if-reference-player/index.html

HLS 文件本身看起来不错，它可以在 BitMovin 测试播放器中播放，例如在同一系统上没有问题，Mac 上的 Safari：

https://bitmovin.com/hls-mpeg-dash-test-player/

【讨论】：