仅在旧浏览器中处理 Html5 视频 + Mp4 源答案

【问题标题】：Handling Html5 Video + Mp4 source ONLY in Old Browsers仅在旧浏览器中处理 Html5 视频 + Mp4 源
【发布时间】：2016-10-06 10:13:31
【问题描述】：

如何在旧浏览器下错误处理 html5 视频 + 仅 mp4 源。大多数浏览器都支持 html5 但不支持 mp4。如何检测到这一点并为用户输出错误？

请记住以下几点：

客户端将只使用 mp4
视频元素将被多个视频全部使用mp4
在这种情况下，将 mp4 转换为 webmm/ogg 不是解决方案

我只需要一种方法来为无法播放视频的浏览器生成错误。这个怎么做？谢谢！

【问题讨论】：

标签： html cross-browser html5-video mp4

【解决方案1】：

您可以使用HTMLMediaElement.canPlayType() 并获取您的浏览器是否支持 mp4 的值。

var video = document.createElement('video'); console.log(video.canPlayType('video/mp4')); // “可能是”

可能的答案是：

“可能”：指定的媒体类型似乎可以播放。
'maybe'：不播放就无法判断媒体类型是否可以播放。
''（空字符串）：指定的媒体类型肯定不能播放。

【讨论】：

【解决方案2】：

您好，您可以按以下方式处理。

    var videoSource1 = '<source src="//anc.com/video1.webm" type="video/webm"/>';
    var videoSource2 = '<source src ="//abc.com/video2.mp4" type = "video/mp4"/>';
    var videoSource = videoSource1 + videoSource2;
   $('.video-container').append(videoSource);

以上代码将根据浏览器支持检测任何一个文件。

【讨论】：