qiuwang/static/flv/demo-muilt.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.1.200/transform/ch101.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.1.200/transform/ch102.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.1.200/transform/ch103.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.1.200/transform/ch104.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.1.200/transform/ch105.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.1.200/transform/ch106.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.1.200/transform/ch107.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.1.200/transform/ch108.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.1.200/transform/ch109.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.1.200/transform/ch110.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.1.200/transform/ch201.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.1.200/transform/ch202.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.1.200/transform/ch203.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.1.200/transform/ch204.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.1.200/transform/ch205.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.1.200/transform/ch206.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>