当视频格式无法在浏览器上播放时显示回退消息答案

【问题标题】：Show fallback message when a video format cannot be played on browser当视频格式无法在浏览器上播放时显示回退消息
【发布时间】：2017-03-29 22:07:35
【问题描述】：

我使用video标签如下，

<div>
    <video ng-src="{{item.videoPath}}" type="video/mp4">
        <!--Below message will be visible when audio tag is not supported by browser-->
        <table>
            <tr>                        
                <td class="break-word">
                    <div data-ng-bind="::'NOT_SUPPORTED_MSG' | translate"></div>
                </td>
            </tr>
        </table>
    </video>
</div>

对于我的 mp4 视频，服务器返回 Content-Type:"video/mp4" 并且它们被正确渲染。

但是，对于avi 视频，服务器返回Content-Type:"application/octet-stream"。

在 Firefox 控制台上，我看到以下错误：

HTTP "Content-Type" of "application/octet-stream" is not supported.
Load of media resource failed.

Cannot play media. No decoders for requested formats: application/octet-stream

由于我已经添加了后备消息，我不确定为什么当浏览器无法呈现 avi 视频时我看不到它。我只想在某些视频无法播放时显示后备消息。

附：到此项目，我的服务器返回的content-type就ok了。

【问题讨论】：

标签： javascript html video

【解决方案1】：

使用 canPlayType，它是 HTML5 媒体（视频/音频）对象的一个方法： https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/canPlayType

【讨论】：