1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87
| 移动js文件 # mkdir -p /usr/local/nginx/html/js/ # mv flv.min.js /usr/local/nginx/html/js/flv.min.js
写入html文件 # vim /usr/local/nginx/html/index.html
<!DOCTYPE html> <html>
<head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>test</title> <style> .mainContainer { display: block; width: 1024px; margin-left: auto; margin-right: auto; }
.urlInput { display: block; width: 100%; margin-left: auto; margin-right: auto; margin-top: 8px; margin-bottom: 8px; }
.centeredVideo { display: block; width: 100%; height: 576px; margin-left: auto; margin-right: auto; margin-bottom: auto; }
.controls { display: block; width: 100%; text-align: center; margin-left: auto; margin-right: auto; } </style> </head>
<body>
<p class="mainContainer"> <video name="videoElement" id="videoElement" class="centeredVideo" controls muted autoplay width="1024" height="576"> Your browser is too old which doesn't support HTML5 video. </video> </p>
<script src="js/flv.min.js"></script>
<script>
function start() { if (flvjs.isSupported()) { var videoElement = document.getElementById('videoElement'); var flvPlayer = flvjs.createPlayer({ type: 'flv', url: 'http://47.99.91.62/live?port=1935&app=live&stream=test' }); flvPlayer.attachMediaElement(videoElement); flvPlayer.load(); flvPlayer.play(); } }
document.addEventListener('DOMContentLoaded', function () { start(); }); </script>
</body>
</html> 注: 'http://47.99.91.62/live?port=1935&app=live&stream=test’中port是rtmp端口,app是rtmp中application的名字,而stream就是推流时指定的。
|