Video
/
streamfest
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Automate player creation

This commit is contained in:
Petko Bordjukov 2014-10-29 15:11:21 +02:00
parent 30da61e49c
commit b732193b55
3 changed files with 9 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
Makefile Normal file
View File

@ -0,0 +1,5 @@
default:
$(MAKE) $(STREAMS:=.html)
%.html:
sed "s/{{stream}}/$(@:.html=)/g" < player.template > $@

9
lowtest.html → player.template
View File

@ -15,7 +15,7 @@
height: 100%; height: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: #1B1B1B; background-color: #FFFFFF;
} }
.wrapper { .wrapper {
@ -49,13 +49,12 @@
</style> </style>
</head> </head>
<body> <body>
<div class="wrapper main-box"> <div class="wrapper main-box">
<div class="sixteen-by-nine aspect-ratio"></div> <div class="sixteen-by-nine aspect-ratio"></div>
<div class="content"> <div class="content">
<video class="video-js vjs-default-skin" controls preload="none" width="auto" height="auto" poster="ruseconf-poster.png" data-setup="{}"> <video class="video-js vjs-default-skin" controls preload="none" width="auto" height="auto" poster="openfest-poster.png" data-setup="{}">
<source src="http://grendel.ludost.net/openfest/hls/lowtest.m3u8" type="application/x-mpegURL" /> <source src="http://grendel.ludost.net/openfest/hls/{{stream}}.m3u8" type="application/x-mpegURL" />
<source src="rtmp://grendel.ludost.net/openfest/lowtest" type='rtmp/flv' /> <source src="rtmp://grendel.ludost.net/openfest/{{stream}}" type='rtmp/flv' />
<p class="vjs-no-js"> <p class="vjs-no-js">
To view this video please enable JavaScript, To view this video please enable JavaScript,
and consider upgrading to a web browser that and consider upgrading to a web browser that

67
test.html
View File

@ -1,67 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>OpenFest Live Streaming</title>
<link href="video-js.min.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>
<script>
videojs.options.flash.swf = "video-js.swf";
</script>
<style type="text/css">
body, html {
height: 100%;
padding: 0;
margin: 0;
background-color: #1B1B1B;
}
.wrapper {
position: relative;
width: 100%;
top: 50%;
transform: translateY(-50%);
ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
margin: 0 auto;
}
.four-by-three.aspect-ratio { padding-bottom: 75% }
.sixteen-by-nine.aspect-ratio { padding-bottom: 56.25% }
.content {
position: absolute;
top: 0; bottom: 0; left: 0; right: 0;
padding: 0;
}
/* Positioning for the main box */
.main-box {
width: 85%;
max-width: 700px;
}
.video-js { height: 100% }
.vjs-fullscreen { padding-top: 0px; }
</style>
</head>
<body>
<div class="wrapper main-box">
<div class="sixteen-by-nine aspect-ratio"></div>
<div class="content">
<video class="video-js vjs-default-skin" controls preload="none" width="auto" height="auto" poster="ruseconf-poster.png" data-setup="{}">
<source src="http://grendel.ludost.net/openfest/hls/test.m3u8" type="application/x-mpegURL" />
<source src="rtmp://grendel.ludost.net/openfest/test" 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>
</div>
</div>
</body>
</html>