HTML 视频：由于 Safari 上缺乏 DASH/Webm-VP9 支持，是否可以回退到 HLS，或者如何在 DASH 上同时支持 Webm 和 H264？

Question

我正在尝试从网络服务器提供一些视频内容，目的是支持相当广泛的浏览器。

对于 iOS，据我所知，最好的方法是使用 HLS（HTTP Live Streaming），而在桌面上（我猜是 Android？），MPEG-DASH 是最先进的。作为备用，我可以提供一些静态视频。

我已经在带有 HLS 的 iOS 和桌面上的 Chrome、Firefox、Opera 和 Edge 上运行了此功能，但 Mac 上的 Safari 在我按下播放时仅显示活动微调器。据我所知，这是因为 Safari 尝试使用 DASH 作为播放方法，但失败了，尽管缺乏 Webm 支持并且 HLS 列在第一位。

对于 MPEG-DASH，我将 Webm 与 VP9 和 Opus 结合使用，我的<video>标签如下所示：

<video controls style="display:inline-block;max-width:174.22vh;max-height:98vh;width:98vw;height:55.125vw;background-color:#ccc;" preload="auto" poster="my-preview-image.jpg" data-dashjs-player>
    <source src="myvideo/hls/playlist.m3u8" type="application/x-mpegURL">
    <source src="myvideo/dash/manifest.mpd" type="application/dash+xml">
    <source src="myvideo/myvideo-vp9.webm" type="video/webm; codecs=vp9,opus">
    <source src="myvideo/myvideo-vp8.webm" type="video/webm; codecs=vp8,vorbis">
    <source src="myvideo/myvideo-h264.m4v" type="video/mp4; codecs=h264,aac">
</video>

我只是使用以下命令导入参考 DASH 实现

<script src="dash.all.min.js"></script>

ffmpeg我正在使用从 Final Cut Pro 导出的高质量主视频生成 HLS 和 DASH 流。静态 Webm 后备文件也是使用 H264 静态后备文件生成的ffmpeg，而 H264 静态后备文件是从 Final Cut Pro 导出的较低比特率。

有没有办法我可以：

• 告诉 DASH 尊重源的顺序，不要跳到 HLS 流之前
• video/webm; codecs=vp9,opus或者，如果浏览器不支持，则不启动。

最后，如果这两者都不可能，我可以使用 DASH 同时支持多个不同的编解码器吗？即，我可以同时提供 VP9 和 H264 DASH 流，并让它在受支持的情况下选择 VP9 而不是 H264，否则回退到 H264（更高的比特率或更低的质量）吗？我将如何生成该流数据？

Answer 1

根据您分享的内容，您的浏览器在遇到具有“data-dashjs-player”属性的视频标签时将使用 dashjs 播放器，并且 DASH 播放器将专注于其支持的不包含 HLS 的格式。

作为一个粗略的解决方案，您可以检查浏览器是否可以播放 HLS，如果可以，则使用本机视频标签，如果不能，则使用 DASH 播放器。检查 HLS 播放有点未定义，但以下方法目前似乎有效：

 document.createElement('video').canPlayType('application/vnd.apple.mpegURL')

这应该在可以播放 HLS 的浏览器上返回“也许”（据我所知，目前只有 Safari），如果不能播放，则不会返回任何内容 - 我刚刚在 Safari 和 Chrome 上测试了它，它的行为似乎是这样的。

值得注意的是，dash.js 应该能够在 safari 上播放 MPEG DASH 文件，因此可能值得查看控制台或日志以尝试找出它无法播放 DASH 视频的原因。