视频直播--使用chimee-player.browser.js 直播 m3u8格式视频

视频直播–使用chimee-player.browser.js 直播 m3u8格式视频 亲测直接复制html 可播放 采用hls 解析

<!DOCTYPE html>
<html>
	<head>
		<title>视频测试</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<script src="http://lib.baomitu.com/chimee-player/1.1.9/chimee-player.browser.js"></script>
	</head>
	<body>
		<div class="video-box">
			<div id="wrapper" class="vidoe"></div>
			<!-- <hr style="height: 2px; border-color: #1F1F1F;"> -->
			<div id="wrapper2" class="vidoe"></div>
			<div id="wrapper3" class="vidoe"></div>
		</div>
		<div class="video-box">
			<div id="wrapper4" class="vidoe"></div>
			<div id="wrapper5" class="vidoe"></div>
			<div id="wrapper6" class="vidoe"></div>
			</div>
			<div class="video-box">
			<div id="wrapper7" class="vidoe"></div>
			<div id="wrapper8" class="vidoe"></div>
			<div id="wrapper9" class="vidoe"></div>
		</div>
		
	</body>
</html>
<script>
	new ChimeePlayer({
		wrapper: '#wrapper', // video dom容器
		src: 'http://ivi.bupt.edu.cn/hls/hunanhd.m3u8',
		box: 'hls',
		isLive: false,
		autoplay: false,
		controls: true
	});
	new ChimeePlayer({
		wrapper: '#wrapper2', // video dom容器
		src: 'http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8',
		box: 'hls',
		isLive: false,
		autoplay: false,
		controls: true
	});
	new ChimeePlayer({
		wrapper: '#wrapper3', // video dom容器
		src: 'http://ivi.bupt.edu.cn/hls/cctv2.m3u8',
		box: 'hls',
		isLive: false,
		autoplay: false,
		controls: true
	});
	new ChimeePlayer({
		wrapper: '#wrapper4', // video dom容器
		src: 'http://ivi.bupt.edu.cn/hls/cctv3hd.m3u8',
		box: 'hls',
		isLive: false,
		autoplay: false,
		controls: true
	});
	new ChimeePlayer({
		wrapper: '#wrapper5', // video dom容器
		src: 'http://ivi.bupt.edu.cn/hls/cctv5phd.m3u8',
		box: 'hls',
		isLive: false,
		autoplay: false,
		controls: true
	});
	new ChimeePlayer({
		wrapper: '#wrapper6', // video dom容器
		src: 'http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8',
		box: 'hls',
		isLive: false,
		autoplay: false,
		controls: true
	});
	new ChimeePlayer({
		wrapper: '#wrapper7', // video dom容器
		src: 'http://ivi.bupt.edu.cn/hls/btv1hd.m3u8',
		box: 'hls',
		isLive: false,
		autoplay: false,
		controls: true
	});
	new ChimeePlayer({
		wrapper: '#wrapper8', // video dom容器
		src: 'http://ivi.bupt.edu.cn/hls/dfhd.m3u8',
		box: 'hls',
		isLive: false,
		autoplay: false,
		controls: true
	});
	new ChimeePlayer({
		wrapper: '#wrapper9', // video dom容器
		src: 'http://ivi.bupt.edu.cn/hls/chchd.m3u8',
		box: 'hls',
		isLive: false,
		autoplay: false,
		controls: true
	});
</script>
<style type="text/css">
	.vidoe{
		width:50%;
		height: 50%;
		margin: 10px 10px;
		float: right;
		
	}
	.video-box{
		display: flex;
	}
</style>
上一篇:前端移动端轮播图


下一篇:springboot 整合mybatisplus