HTML5 视频 iOS 播放按钮消失

Question

我在 jsfiddle 中创建了一个简单的 HTML5 破折号播放器实例..

  <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 上播放时，我正确加载了海报图像，然后播放按钮在屏幕上闪烁了一秒钟然后消失。

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

Answer 1

更新：

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

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

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

请注意，这可能是 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 测试播放器中播放，例如在同一系统上没有问题，Safari MAC:

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

HTML5 视频 iOS 播放按钮消失

HTML5 Video iOS play button disappearing

mobile-safari

http-live-streaming

html5-video

ios

mpeg-dash