序言
前面在成功推流到服务器后,也可以通过video.js插件播放该视频流.(这不废话么,难道项目中我们不该找个播放端的插件么~~~)
另外使用videojs的版本是video-js-7.5.4.首先要自己去下载该js插件(难点还是流服务,要把rtp转成rtmp.后面会讲)
videojs播放rtmp协议流DEOM
这里使用插件播放很简单,所以直接使用 武汉卫视的流服务rtmp://58.200.131.2:1935/livetv/hunantv测试播放了.
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>videojs [email protected]</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="./video-js-7.5.4/video-js.min.css" rel="stylesheet">
<script src="./video-js-7.5.4/video.min.js"></script>
<script src="./video-js-7.5.4/videojs-flash.min.js"></script>
</head>
<body>
<h2>this is a simple demo</h2>
<hr />
<video id="example_video_1" class="video-js vjs-default-skin" controls
preload="none" width="640" height="264" data-setup=''
poster="">
</video>
<script>
// Create a player.
var player = videojs('example_video_1',{
height: '439px',
width: '640px',
muted: false,
techOrder: ['html5','flash'],
//controls: false,
controlBar: {
fullscreenToggle: true,
playToggle: false,
},
autoplay: true,
sources: [{
src: 'rtmp://58.200.131.2:1935/livetv/hunantv',
type: 'rtmp/flv'
}]
},function(){
console.log(this)
});
</script>
</body>
</html>
videojs播放HLS协议流DEMO
这里使用插件播放很简单,所以直接使用 CCTV6的流服务http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8测试播放了.
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>[email protected]</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<link href="./video-js-7.5.4/video-js.min.css" rel="stylesheet">
<script src="./video-js-7.5.4/video.min.js"></script>
<script src="./video-js-7.5.4/videojs-flash.min.js"></script>
</head>
<body>
<h2>this is a simple demo</h2>
<hr />
<video id='myvideo' width=960 height=540
class="video-js vjs-default-skin" controls>
<!-- hls直播源地址:CCTV6高清 -->
<source id="source" src="http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8"
type="application/x-mpegURL">
</video>
<script>
var player = videojs('myvideo', {
height: '439px',
width: '640px',
muted: false,
//controls: false,
controlBar: {
fullscreenToggle: true,
playToggle: false,
},
autoplay: true,
}, function(){console.log('videojs播放器初始化成功')})
player.play();
</script>
</body>
</html>