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

<强> UPADTE：

你提供的JSFiddle似乎不会在MAC上的Safari上播放，这听起来像你正在观察的类似问题。

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

同样，如果您为视频标记添加“controls”属性，它将会正确地自动播放视频。

注意，这可能是JSFiddle限制而不是Safari或iOS限制，但无论哪种方式都是可重现的效果（Safari Version 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/

HTML5视频iOS播放按钮消失

1 个答案: