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

Question

如何处理错误 html5 video + only mp4 source under old browsers. 大多数浏览器都支持 html5 但不支持 mp4。如何检测到这一点并为用户输出错误？

记住这些事情：

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

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

Answer 1

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

    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);

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

Answer 2

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


    var video = document.createElement('video');
    console.log(video.canPlayType('video/mp4')); // "maybe"

可能的答案是：

'probably': 指定的媒体类型似乎可以播放。
'maybe': 不播放无法判断媒体类型是否可播放
'' (空字符串): 指定的媒体类型肯定无法播放。

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

Handling Html5 Video + Mp4 source ONLY in Old Browsers

html

mp4

cross-browser

html5-video