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

最新推荐文章于 2021-09-09 09:34:27 发布

置顶 cuiyaonan2000

最新推荐文章于 2021-09-09 09:34:27 发布

阅读量8.3w

点赞数

CC 4.0 BY-SA版权

分类专栏：音视频文章标签：音视频

本文链接：https://blog.youkuaiyun.com/cuiyaonan2000/article/details/93620562

音视频专栏收录该内容

15 篇文章

订阅专栏

序言

前面在成功推流到服务器后,也可以通过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测试播放了.

<%@ 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>
<script type="text/javascript">
	//videojs.options.flash.swf = './video-js-5.19.2/video-js.swf';
</script>
</head>

<body>
	<h2>rtmp</h2>
	<h2><a href="./index2.jsp">hls</a></h2>
	<h2><a href="./index3.jsp">http-flv</a></h2>
	
	<hr />

	<video id="example_video_1" class="video-js vjs-default-skin" controls
		preload="none" width="640" height="264" data-setup=''
		poster="">
	</video>
	
	<hr/>
	
	
	<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://192.168.2.64:19351/cui/yao/nan',
                type: 'rtmp/flv'
            }]
		},function(){
		console.log(this)
	});
 	

 	</script>
</body>


</html>

videojs播放Http-Flv协议流DEMO

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

<%@ 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>
<script type="text/javascript">
	//videojs.options.flash.swf = './video-js-5.19.2/video-js.swf';
</script>
</head>

<body>
	<h2>http-flv</h2>
	
	<h2><a href="./index.jsp">rtmp</a></h2>
	<h2><a href="./index2.jsp">hls</a></h2>
	<hr />

	<video id="example_video_1" class="video-js vjs-default-skin" controls
		preload="none" width="640" height="264" data-setup=''
		poster="">
	</video>
	
	<hr/>
	
	
	<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: 'http://192.168.2.64:8081/cui/yao/nan.flv',
                type: 'video/x-flv'
            }]
		},function(){
		console.log(this)
	});
 	

 	</script>
</body>


</html>

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

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

<%@ 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">
<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>hls</h2>
	
	<h2><a href="./index.jsp">rtmp</a></h2>
	<h2><a href="./index3.jsp">http-flv</a></h2>
	
	<hr />
	<video id='myvideo' width=960 height=540
		class="video-js vjs-default-skin" controls>
		 <source id="source" src="http://192.168.2.64:8082/cui/yao/nan.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>

html5 播放HLS

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>HTML5播放hls使用(flv.js)demo</title>

</head>

<body>
	<video id='my-video' class='video-js' controls preload='auto'
		width='640' height='320' poster='avatar-poster.jpg'
		data-setup='{ "html5" : { "nativeTextTracks" : true } }'>
		<source src='http://192.168.2.64:9099/cui/yao/nan.m3u8'
			type="application/x-mpegURL">
		<p class='vjs-no-js'>
			To view this video please enable JavaScript, and consider upgrading
			to a web browser that <a
				href='https://videojs.com/html5-video-support/' target='_blank'>supports
				HTML5 video</a>
		</p>
	</video>

	<script src='https://vjs.zencdn.net/7.4.1/video.js'></script>
	<script
		src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.15.0/videojs-contrib-hls.min.js"></script>

	<script>
        var player = videojs('my-video');
        player.play();
    </script>


</body>

</html>

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

<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
 
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>HTML5播放FLV使用(flv.js)demo</title>
    <style>
        .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;
        }
    </style>
</head>
 
<body>
    <div class="mainContainer">
        <video id="videoElement" class="centeredVideo" controls autoplay width="640" height="320">Your browser is too
            old which doesn't support HTML5 video.</video>
    </div>
    <br>
    <div class="controls">
        <button onclick="flv_start()">开始</button>
        <button onclick="flv_pause()">暂停</button>
        <button onclick="flv_destroy()">停止</button>
        <input style="width:100px" type="text" name="seekpoint" />
        <button onclick="flv_seekto()">跳转</button>
    </div>
    <script src="./flv.js"></script>
    <script>
        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);
        }
    </script>
</body>
 
</html>