如何让 video 标签支持 hls/m3u8 视频流直播
苹果的 safari 直接支持 hls。但是其他的浏览器却没有提供相应的支持。根据我的测试,android 手机的 webview 可以支持 hls,PC 上的 chrome 却不行,很令人费解。
下面是 videojs 给出的一套 hls 解决方案:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>m3u8player</title>
<link href="js/video-js.css" rel="stylesheet">
</head>
<body>
<video id="my-video" class="video-js">
<source src="http://live.xwei.tv/channels/njtv/video_xwzh/m3u8:250k" type='application/x-mpegURL'></source>
</video>
<script type="text/javascript" src="js/video.js" ></script>
<script type="text/javascript" src="js/videojs-contrib-hls.js" ></script>
<script>
var player = videojs('my-video');
player.play();
</script>
</body>
</html>需要引入 video.js 和 videojs-contrib-hls.js,可以从 github 上找到。