如何检测 HTML5 视频中没有可用格式？

Question

此代码显示不支持 video 元素的旧浏览器的消息。

<video controls>
    <source src="./foo.mp4" />
    <p>Use new browser.</p>
</video>

Firefox 在 Windows 7+ 中支持 video 元素和 MP4/H.264 格式，但在 Windows XP 中不支持该格式。

我想显示 Windows XP 用户安装插件的消息。

Answer 1

一种方法（如果我理解正确的话）是让您的视频元素具有默认的回退机制，然后使用 JavaScript 补充它以进行特定格式检测，如果您不这样做找到支持的格式，即使视频元素在那里显示备用消息

canPlayType(format)

测试浏览器是否可以播放特定类型的视频，例如'video/webm;codecs="vp8, vorbis"'

浏览器将return:

probably - 如果最有可能视频文件可以播放 maybe
如果视频可以播放[empty string]
如果视频文件无法播放

<video id="myvid" controls>
    <source src="./foo.mp4" />
    <p>Use new browser.</p>
</video>
<script>
    myvid = document.getElementById("myvid")
    if (myvid.canPlayType('video/webm;codecs="vp8, vorbis"') || myvid.canPlayType('... others depending on what formats you have available ...') {
        // all okay
    } else {
        // alert user to the problem
    }
</script>

如何检测 HTML5 视频中没有可用格式？

How to detect there are no available formats in HTML5 video?

html

format

video

fallback