序言
前面在成功推流到服务器后,也可以通过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>