如何让 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 上找到。