| 1 | <html> |
|---|
| 2 | <head> |
|---|
| 3 | |
|---|
| 4 | <meta charset="UTF-8"> |
|---|
| 5 | <script type="text/javascript" src="assets/jwplayer.js"></script> |
|---|
| 6 | <title>Date Ranges</title> |
|---|
| 7 | <style> |
|---|
| 8 | body { padding: 50px; font: 13px/20px Arial; background: #EEE; } |
|---|
| 9 | form,p { margin-top: 20px; } |
|---|
| 10 | input { width: 50px; } |
|---|
| 11 | #player { -webkit-box-shadow: 0 0 5px #999; background: #000; width: 480px; height: 270px; color:#FFF; line-height:270px; text-align: center; } |
|---|
| 12 | hr { display: inline-block; width: 10px; border:0; } |
|---|
| 13 | </style> |
|---|
| 14 | |
|---|
| 15 | </head> |
|---|
| 16 | <body> |
|---|
| 17 | |
|---|
| 18 | <h2>Date Ranges</h2> |
|---|
| 19 | |
|---|
| 20 | <div id="player">Select a start and end time and insert the player.</div> |
|---|
| 21 | |
|---|
| 22 | <form onsubmit="return insert()"> |
|---|
| 23 | Start: <input id="start" type="text" value="1200" /> |
|---|
| 24 | End: <input id="end" type="text" value="1300" /> |
|---|
| 25 | <button type="submit">Insert</button> |
|---|
| 26 | </form> |
|---|
| 27 | |
|---|
| 28 | <script type="text/javascript"> |
|---|
| 29 | function insert() { |
|---|
| 30 | var startDate = new Date(); |
|---|
| 31 | var startTime = document.getElementById('start').value; |
|---|
| 32 | startDate.setHours(startTime.substr(0,2),startTime.substr(2,2),0,0); |
|---|
| 33 | var endDate = new Date(); |
|---|
| 34 | var endTime = document.getElementById('end').value; |
|---|
| 35 | endDate.setHours(endTime.substr(0,2),endTime.substr(2,2),0,0); |
|---|
| 36 | jwplayer("player").setup({ |
|---|
| 37 | height: 270, |
|---|
| 38 | image: 'assets/thumb.png', |
|---|
| 39 | plugins: { |
|---|
| 40 | '../livestream.js': { |
|---|
| 41 | end: endDate.valueOf()/1000, |
|---|
| 42 | start: startDate.valueOf()/1000, |
|---|
| 43 | } |
|---|
| 44 | }, |
|---|
| 45 | players: [{ |
|---|
| 46 | config: { |
|---|
| 47 | file:'test', |
|---|
| 48 | streamer:'rtmp://127.0.0.1/live' |
|---|
| 49 | }, |
|---|
| 50 | type: 'flash', |
|---|
| 51 | src: 'assets/player.swf' |
|---|
| 52 | },{ |
|---|
| 53 | config: { |
|---|
| 54 | file: 'http://192.168.1.21:1935/live/test/playlist.m3u8' |
|---|
| 55 | }, |
|---|
| 56 | type: 'html5' |
|---|
| 57 | }], |
|---|
| 58 | width: 480 |
|---|
| 59 | }); |
|---|
| 60 | return false; |
|---|
| 61 | } |
|---|
| 62 | </script> |
|---|
| 63 | |
|---|
| 64 | <p>Use this page to test various date ranges (before, during or after the event).</p> |
|---|
| 65 | |
|---|
| 66 | |
|---|
| 67 | |
|---|
| 68 | </body> |
|---|
| 69 | </html> |
|---|
