qiuwang/static/flv/demo.html

124 lines
6.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="./video-js.css" rel="stylesheet" />
</head>
<body>
<div style="height:300px">
<div style="float:left;width:25%;text-align: center;">
<video id="video1" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.2.245/transform/ch1.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video2" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.2.245/transform/ch2.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video3" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.2.245/transform/ch3.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video4" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.2.245/transform/ch20.live.flv" type='video/x-flv' />
</video>
</div>
</div>
<div style="height:300px">
<div style="float:left;width:25%;text-align: center;">
<video id="video5" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch5.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video6" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch6.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video7" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch7.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video8" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch9.live.flv" type='video/x-flv' />
</video>
</div>
</div>
<div style="height:300px">
<div style="float:left;width:25%;text-align: center;">
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch18.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch19.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch12.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch13.live.flv" type='video/x-flv' />
</video>
</div>
</div>
<div style="height:300px">
<div style="float:left;width:25%;text-align: center;">
<video id="video9" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch14.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video10" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch15.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video11" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch16.live.flv" type='video/x-flv' />
</video>
</div>
<div style="float:left;width:25%;text-align: center;">
<video id="video12" class="video-js vjs-big-play-centered" muted controls preload="auto" autoplay=true width="350" height="270" data-setup="{}">
<source src="ws://192.168.3.245/transform/ch17.live.flv" type='video/x-flv' />
</video>
</div>
</div>
<script src="video.min.js"></script>
<script src="flv.min.js"></script>
<script src="videojs-flvjs.min.js"></script>
</body>
<script>
var videoFlvPlayer1 = videojs("video1");
var videoFlvPlayer2 = videojs("video2");
var videoFlvPlayer3 = videojs("video3");
var videoFlvPlayer4 = videojs("video4");
var videoFlvPlayer5 = videojs("video5");
var videoFlvPlayer6 = videojs("video6");
var videoFlvPlayer7 = videojs("video7");
var videoFlvPlayer8 = videojs("video8");
var videoFlvPlayer9 = videojs("video9");
var videoFlvPlayer10 = videojs("video10");
var videoFlvPlayer11 = videojs("video10");
var videoFlvPlayer12 = videojs("video10");
</script>
</html>