web前端HTML播放HLS在线视频流（m3u8）

最近公司项目要对接在线的视频流（m3u8）,经过很长的一段时间找到两种可用比较靠谱好用的插件方法。参考的文章地址：视频播放与HLS直播技术总结 - 简书

先撤一点题外话，一开始是找的videojs，网上很多教程说可以播放HLS，但是本人没有找到靠谱的方法，videojs播放一个流地址，播放几秒就卡住了，也没找到解决方法。

开始正题：

1、一个插件hls.js,亲测可用：

前端页面引入js:

<script type="text/javascript" src="./js/HLC_paly/hls.js"></script>

播放代码：

<video id="HLS_Player" autoplay="autoplay" loop muted controls="controls" width="100%" height="100%"></video>

<script type="text/javascript" >
	 HLS_Player = document.getElementById('HLS_Player');
	if (Hls.isSupported()) {
			HLS_Controller = new Hls();
			HLS_Controller.loadSource("视屏流地址");
			HLS_Controller.attachMedia(HLS_Player);
			HLS_Controller.on(Hls.Events.MANIFEST_PARSED, function() {
			    HLS_Player.play();
	        });
						
	}
// hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
// When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
// This is using the built-in support of the plain video element, without using hls.js.
// Note: it would be more normal to wait on the 'canplay' event below however on Safari (where you are most likely to find built-in HLS support) the video.src URL must be on the user-driven
// white-list before a 'canplay' event will be emitted; the last video event that can be reliably listened-for when the URL is not on the white-list is 'loadedmetadata'.
	else if (HLS_Player.canPlayType('application/vnd.apple.mpegurl')) {
		HLS_Player.src = 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8';
		HLS_Player.addEventListener('loadedmetadata', function() {
		    HLS_Player.play();
		});
	}
</script>

这个插件有很多其他功能，可以自行查找，体验这里不再赘述。

2.另一个插件chimee，这个插件不仅支持HTML，而且还支持手机移动端

PC端调用

<script src="http://lib.baomitu.com/chimee-player/1.1.10/chimee-player.browser.js"></script>

调用播放视屏流

<div id="wrapper"></div>
	<script>
		new ChimeePlayer({
			wrapper: '#wrapper', // video dom容器
			src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
			box: 'hls',
			isLive: true,
			autoplay: true,
			controls: true
		});
	</script>

给出一个可用的，稳定的视频流地址：http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8 CCTV1的视频流地址

2020-11-28 更新：

看到这么多的浏览量，深刻的体会到各位码友必定深受前端浏览器播放视频流的荼毒，在此，再给大家分享一个前端播放视频流的方法。

具体是搭视频流媒体服务器的时候无意间遇到的，LiveQing（有搭流媒体服务器的小伙伴可以自行体验，免费30体验），他是做流媒体服务器的，可以对接常见的几个摄像头厂商，包括国标G什么来着，目前价格也不是太贵，往后就不知道了，视频挺流畅的。也可以直接对接摄像头（这个没试过）。

他家在流媒体服务的基础上，也有浏览器播放的组件，这个测试过也可以使用。

至于其他怎么播放，就靠各位大佬自己探索了。还有就是遇到，前端免插件播放rtsp,rtmp,flv。在这里我可以明确地告诉大家，就我试过的组件都达不到需要flash插件，毕竟协议是flash定义的，怎么可能绕的开他，至于hls协议是苹果出的（语言表达不精确，敬请谅解）。

不过忘记哪一年Google开元出一个前端视频流协议是WebRTC，可以免插件播放，但是怎么将其他流格式转换成WebRTC能用的就看各位大神各显神通了，据说已有转换的平台，咱也没用过，咱也不知道。

2024-03-11更新：

今天闲着没事，浏览各大厂开源项目，发现字节的一个前段播放视频流的开源插件xgplayer感觉比上述插件好用，可以自行参考使用