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

序言

前面在成功推流到服务器后,也可以通过video.js插件播放该视频流.(这不废话么,难道项目中我们不该找个播放端的插件么~~~)

另外使用videojs的版本是video-js-7.5.4.首先要自己去下载该js插件(难点还是流服务,要把rtp转成rtmp.后面会讲)如需探讨请联系cuiyaonan2000@163.com 

videojs播放rtmp协议流DEOM

这里使用插件播放很简单,用例中的流是我自己的,可以替换成武汉卫视的流服务rtmp://58.200.131.2:1935/livetv/hunantv测试播放了.

videojs cuiyaonan2000@163.com





	//videojs.options.flash.swf = './video-js-5.19.2/video-js.swf';




	rtmp
	hls
	http-flv
	
	

	
	
	
	
	
	
 	// 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://192.168.2.64:19351/cui/yao/nan',
                type: 'rtmp/flv'
            }]
		},function(){
		console.log(this)
	});
 	

 	

videojs播放Http-Flv协议流DEMO

用例中的流是我自己的,可以替换个公网的流

videojs cuiyaonan2000@163.com





	//videojs.options.flash.swf = './video-js-5.19.2/video-js.swf';




	http-flv
	
	rtmp
	hls
	

	
	
	
	
	
	
 	// 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: 'http://192.168.2.64:8081/cui/yao/nan.flv',
                type: 'video/x-flv'
            }]
		},function(){
		console.log(this)
	});
 	

 	

videojs播放HLS协议流DEMO(HLS 在 PC 端播放会遇到跨域的问题,这个用nginx转发下就行了不要在源码中修改)

用例中的流是我自己的,可以替换成公网的CCTV6流服务http://ivi.bupt.edu.cn/hls/cctv6hd.m3u8测试播放了.

videojs cuiyaonan2000@163.com








	hls
	
	rtmp
	http-flv
	
	
	
	
	
	 
	
    	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();
    
        

html5 播放HLS

HTML5播放hls使用(flv.js)demo




	

	
	

	
        var player = videojs('my-video');
        player.play();
    

HTML5播放FlV(使用B站开源插件flv.js需提前下载)

 

    
    HTML5播放FLV使用(flv.js)demo
    
        .mainContainer {
            display: block;
            width: 640px;
        }
 
        .urlInput {
            display: block;
            width: 100%;
            margin-top: 8px;
            margin-bottom: 8px;
        }
 
        .centeredVideo {
            display: block;
            width: 100%;
            height: 320px;
        }
 
        .controls {
            display: block;
            width: 100%;
            text-align: left;
        }
    

 

    

        
    
    
    

        开始
        暂停
        停止
        
        跳转
    
    
    
        var player = document.getElementById('videoElement');
        if (flvjs.isSupported()) {
            var flvPlayer = flvjs.createPlayer({
                type: 'flv',
                isLive: true,
                enableWorker:true,
                enableStashBuffer:false,
                stashInitialSize:128,
                url: 'http://192.168.2.64:9099/cui/yao/nan.flv',
 
            });
            flvPlayer.attachMediaElement(videoElement);
            flvPlayer.load();
            flv_start();
        }
 
        function flv_start() {
            player.play();
        }
 
        function flv_pause() {
            player.pause();
        }
 
        function flv_destroy() {
            player.pause();
            player.unload();
            player.detachMediaElement();
            player.destroy();
            player = null;
        }
 
        function flv_seekto() {
            player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
        }