ios - HTML5 视频 iOS 播放按钮消失

Question

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

https://jsfiddle.net/uumh8e6u/

  <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 上播放，这听起来与您正在观察的问题类似。

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

同样，如果您向视频标签添加“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 测试播放器中播放，例如在同一系统(MAC 上的 Safari)上没有问题:

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