网上很多关于视频流的例子,我也简单的试了一下,对于视频流的处理方式有很多,其中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>
效果如图: