序言

前面在成功推流到服务器后,也可以通过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 cuiyaonan2000@163.com</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>cuiyaonan2000@163.com</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>

cuiyaonan2000

JAVA音视频解决方案----video.js插件使用

序言

videojs播放rtmp协议流DEOM

videojs播放HLS协议流DEMO