| 1 | <!DOCTYPE html>
|
| 2 | <html>
|
| 3 | <head>
|
| 4 | <meta charset="utf-8">
|
| 5 | <title>videojs-contrib-hls Demo</title>
|
| 6 | <link href="/node_modules/video.js/dist/video-js.css" rel="stylesheet">
|
| 7 | <style>
|
| 8 | body {
|
| 9 | font-family: Arial, sans-serif;
|
| 10 | margin: 20px;
|
| 11 | }
|
| 12 | .info {
|
| 13 | background-color: #eee;
|
| 14 | border: thin solid #333;
|
| 15 | border-radius: 3px;
|
| 16 | padding: 0 5px;
|
| 17 | margin: 20px 0;
|
| 18 | }
|
| 19 | input {
|
| 20 | margin-top: 15px;
|
| 21 | min-width: 450px;
|
| 22 | padding: 5px;
|
| 23 | }
|
| 24 | </style>
|
| 25 |
|
| 26 | </head>
|
| 27 | <body>
|
| 28 | <div class="info">
|
| 29 | <p>The video below is an <a href="https://developer.apple.com/library/ios/documentation/networkinginternet/conceptual/streamingmediaguide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40008332-CH1-SW1">HTTP Live Stream</a>. On desktop browsers other than Safari, the HLS plugin will polyfill support for the format on top of the video.js Flash tech.</p>
|
| 30 | <p>Due to security restrictions in Flash, you will have to load this page over HTTP(S) to see the example in action.</p>
|
| 31 | </div>
|
| 32 | <video id="videojs-contrib-hls-player" class="video-js vjs-default-skin" controls>
|
| 33 | <source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
|
| 34 | </video>
|
| 35 |
|
| 36 | <form id=load-url>
|
| 37 | <label>
|
| 38 | Video URL:
|
| 39 | <input id=url type=url value="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8">
|
| 40 | </label>
|
| 41 | <button type=submit>Load</button>
|
| 42 | </form>
|
| 43 | <ul>
|
| 44 | <li><a href="/test/">Run unit tests in browser.</a></li>
|
| 45 | <li><a href="/docs/api/">Read generated docs.</a></li>
|
| 46 | <li><a href="/examples">Browse Examples</a></li>
|
| 47 | </ul>
|
| 48 |
|
| 49 | <script src="/node_modules/video.js/dist/video.js"></script>
|
| 50 | <script src="/dist/videojs-contrib-hls.js"></script>
|
| 51 | <script>
|
| 52 | (function(window, videojs) {
|
| 53 | var player = window.player = videojs('videojs-contrib-hls-player');
|
| 54 |
|
| 55 |
|
| 56 | var loadUrl = document.getElementById('load-url');
|
| 57 | var url = document.getElementById('url');
|
| 58 | loadUrl.addEventListener('submit', function(event) {
|
| 59 | event.preventDefault();
|
| 60 | player.src({
|
| 61 | src: url.value,
|
| 62 | type: 'application/x-mpegURL'
|
| 63 | });
|
| 64 | return false;
|
| 65 | });
|
| 66 | }(window, window.videojs));
|
| 67 | </script>
|
| 68 | </body>
|
| 69 | </html>
|