video.js 下載路徑：https://download.csdn.net/download/qq_19272431/11716634
mginx +RTMP 下載路徑：https://download.csdn.net/download/qq_19272431/11716691
安裝nginx參考教程 ：https://blog.csdn.net/qq_19272431/article/details/100731465
ffmpeg 安裝教程自行搜索解決
播放的實時效果圖：
video.js 下HTML頁面代碼編寫：
<html>
<head>
<meta charset="utf-8">
<title> huanghefu:live streaming</title>
<link href="css/video-js.css" rel="stylesheet">
<!-- If you'd like to support IE8 -->
<script src="ie8/videojs-ie8.min.js"></script>
<style>
body{background-color: #191919}
.m{ width: 640px; height: 264; margin-left: auto; margin-right: auto; margin-top: 100px; }
</style>
</head>
<body align="center">
<table border="1">
<tr>
<td >
<div class="m">
<video id="myvideo1" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="rtmp://192.168.1.160:1935/hls/movie" type="rtmp/flv"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="video.min.js"></script>
<script type="text/javascript">
var myPlayer1 = videojs('my-video');
videojs("myvideo1").ready(function(){
var myPlayer1= this;
myPlayer1.play();
});
</script>
</div>
</td>
<td >
<div class="m">
<video id="myvideo2" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="rtmp://192.168.1.160/hls/movie" type="rtmp/flv"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="video.min.js"></script>
<script type="text/javascript">
var myPlayer2 = videojs('my-video');
videojs("myvideo2").ready(function(){
var myPlayer2= this;
myPlayer2.play();
});
</script>
</div>
</td>
<td >
<div class="m">
<video id="myvideo12" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="rtmp://192.168.1.160/hls/movie" type="rtmp/flv"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="video.min.js"></script>
<script type="text/javascript">
var myPlayer12 = videojs('my-video');
videojs("myvideo12").ready(function(){
var myPlayer12= this;
myPlayer12.play();
});
</script>
</div>
</td>
</tr>
<tr>
<td >
<div class="m">
<video id="myvideo3" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="rtmp://192.168.1.160/hls/movie" type="rtmp/flv"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="video.min.js"></script>
<script type="text/javascript">
var myPlayer3 = videojs('my-video');
videojs("myvideo3").ready(function(){
var myPlayer3 = this;
myPlayer3.play();
});
</script>
</div>
</td>
<td >
<div class="m">
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="rtmp://192.168.1.160/hls/movie" type="rtmp/flv"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="video.min.js"></script>
<script type="text/javascript">
var myPlayer = videojs('my-video');
videojs("my-video").ready(function(){
var myPlayer = this;
myPlayer.play();
});
</script>
</div>
</td>
<td >
<div class="m">
<video id="myvideo21" class="video-js" controls preload="auto" width="640" height="264"
poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
<source src="rtmp://192.168.1.160/hls/movie" type="rtmp/flv"/>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
<script src="video.min.js"></script>
<script type="text/javascript">
var myPlayer21 = videojs('my-video');
videojs("myvideo21").ready(function(){
var myPlayer21= this;
myPlayer21.play();
});
</script>
</div>
</td>
</tr>
</table>
</body>
</html>
贊助請掃碼：
疑問加微信：
