ckplayer对于视频流的处理，页面怎么展示.m3u8的视频流数据

最新推荐文章于 2020-03-25 16:57:21 发布

我是王小贱

最新推荐文章于 2020-03-25 16:57:21 发布

阅读量839

点赞数

分类专栏：前端文章标签：视频流处理 .m3u8

本文链接：https://blog.csdn.net/qq_34377273/article/details/100663216

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

网上很多关于视频流的例子，我也简单的试了一下，对于视频流的处理方式有很多，其中ckplayer我觉得挺方便的。

首先，我们需要下载关于ckplayer的js文件：（进入后直接选定版本，点击下载即可）下载地址：http://www.ckplayer.com/down/

附上一个简单的例子：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="ckplayer/ckplayer.js"></script>
		<script src="ckplayer/ckplayer.min.js"></script>
		<script src="ckplayer/hls/hls.js"></script>
		<script src="ckplayer/hls/hls.min.js"></script>
		<script src="js/jquery.min.js"></script>
	</head>
	<body>
		<h1>视频播放测试页面！</h1>
		<div id="showvideo" class="video" style="width: 600px;height: 400px;"></div>

	</body>
	<script type="text/javascript">
		var directUrl = "这里写上我们的.m3u8的网络地址链接";
		var videoObject = {
			container: '#showvideo', //“#”代表容器的ID，“.”或“”代表容器的class
			variable: 'player', //该属性必需设置，值等于下面的new chplayer()的对象
			//loaded: 'loadedHandler', //监听播放器加载成功
			autoplay: true, //是否自动播放
			live: true, //是否直播
			video: directUrl

		};
		var player = new ckplayer(videoObject);	
	</script>
</html>

效果如图：

我是王小贱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ckplayer对于视频流的处理，页面怎么展示.m3u8的视频流数据

网上很多关于视频流的例子，我也简单的试了一下，对于视频流的处理方式有很多，其中ckplayer我觉得挺方便的。首先，我们需要下载关于ckplayer的js文件：（进入后直接选定版本，点击下载即可）下载地址：http://www.ckplayer.com/down/附上一个简单的例子：<!DOCTYPE html><html> <head> ...
复制链接

扫一扫