最近公司項目要對接在線的視頻流(m3u8),經過很長的一段時間找到兩種可用比較靠譜好用的插件方法。參考的文章地址:https://www.jianshu.com/p/8845b976fcaf
先撤一點題外話,一開始是找的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的視頻流地址