判断是否可以用m3u8的js方式

支持m3u8即支持HLS协议，判断方式如下：

/**
 * https://github.com/videojs/videojs-contrib-hls
 * Whether the browser has built-in HLS support.
 */
videojs.Hls.supportsNativeHls = (function() {
  var
    video = document.createElement('video'),
    xMpegUrl,
    vndMpeg;
  // native HLS is definitely not supported if HTML5 video isn't
  if (!videojs.Html5.isSupported()) {
    return false;
  }
  xMpegUrl = video.canPlayType('application/x-mpegURL');
  vndMpeg = video.canPlayType('application/vnd.apple.mpegURL');
  return (/probably|maybe/).test(xMpegUrl) ||
    (/probably|maybe/).test(vndMpeg);
})();

m3u8文件的content-type:安卓只支持 application/vnd.apple.mpegurl，而ios对于application/x-mpegURL，application/vnd.apple.mpegURL均支持。

p.s videojs 关于HLS技术做了许多工具，非常强大，甚至可以把流读过来然后封装成另外的格式，参见参考文档。

14.12.05更新

调研Android系统下HLS的支持情况*

测试环境：Android4.4.4，Android4.3，Android 4.2.2
测试浏览器：Chrome、Firefox、QQ、UC、欧朋、安卓浏览器
注：测试用ts流为本地文件非线上。

M3U8的content-type为octet-stream的情况下

1、FireFox不支持M3U8文件，三种设备均不能播放。只能播放Mp4 & webm
2、UC浏览器9.9.8版本，三种设备均偶发卡顿现象，处于loading状态，一半几率能最终下载完毕，播放出来。猜测与网速有关。
3、UC浏览器的EN版本（10.0.1）正常播放。
4、其他浏览器正常，Android4.2.2内置浏览器会出现有画面没声音的现象。
5、在IOS7的iPad下正常播放。

M3U8的content-type为vnd.apple.mpegurl的情况下

1、Android4.3 无法播放。
2、UC浏览器下播放流畅，偶发上面2的情况。
3、其他同上面的1、4、5

经测试，以下情况并不影响是否可以播放

1、ts文件的H.264的配编码置（如乐视多为HD，新浪为Main，测试baseline）

2、video标签的写法，有如下4中写法

<video controls width="300" height="270" src="drive.m3u8"></video>
<video  controls width="300" height="270"><source  src="drive.m3u8"> </video>
<video  type="application/x-mpegurl" controls width="300" height="270"><source  src="drive.m3u8"> </video>
<video  type="application/vnd.apple.mpegurl" controls width="300" height="270"><source  src="drive.m3u8"> </video>

结论：令人纠结的Content-type

参考文档：

video.js HLS Tech

HTTP Live Streaming

content-type一改，欢乐开怀——web前端视频播放最容易忽视的地方

记于2014年09月26日 EOF
#HTML5 #HLS #M3U8