master
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge">
6 <meta name="viewport" content="width=device-width, initial-scale=1">
7 <meta name="description" content="">
8 <meta name="author" content="">
9
10 <title>VideoJS HLS</title>
11
12 <!-- Bootstrap core CSS. This is just to make the demo look
13 nice. It's not required for videojs-contrib-hls to work. -->
14 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
15
16 <!-- Some custom styles for the demo page -->
17 <style>
18 body {
19 padding-top: 50px;
20 color: #868688;
21 background-color: #FAFCFF;
22 }
23 nav {
24 background-color: #e7e7e7
25 }
26 nav a {
27 color: #868688;
28 }
29 nav a:hover {
30 color: #606062;
31 text-decoration: none;
32 }
33 .navbar-toggle .icon-bar {
34 background-color: #868688;
35 }
36 .starter-template {
37 padding: 40px 15px;
38 text-align: center;
39 }
40 .video-js {
41 margin: 0 auto;
42 }
43 </style>
44
45 <!--[if lt IE 9]>
46 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
47 <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
48 <![endif]-->
49 </head>
50
51 <body>
52
53 <nav class="navbar navbar-fixed-top">
54 <div class="container">
55 <div class="navbar-header">
56 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
57 <span class="sr-only">Toggle navigation</span>
58 <span class="icon-bar"></span>
59 <span class="icon-bar"></span>
60 <span class="icon-bar"></span>
61 </button>
62 <a class="navbar-brand" href="#">videojs-contrib-hls</a>
63 </div>
64 <div id="navbar" class="collapse navbar-collapse">
65 <ul class="nav navbar-nav">
66 <li><a href="https://github.com/videojs/videojs-contrib-hls/blob/master/README.md">Docs</a></li>
67 <li><a href="https://github.com/videojs/videojs-contrib-hls">Source</a></li>
68 <li><a href="https://github.com/videojs/videojs-contrib-hls/issues">Issues</a></li>
69 </ul>
70 </div><!--/.nav-collapse -->
71 </div>
72 </nav>
73
74 <div class="container">
75
76 <section class="starter-template">
77 <h1>VideoJS HLS</h1>
78 <p class="lead">
79 <a href="https://github.com/videojs/videojs-contrib-hls">videojs-contrib-hls</a>
80 lets you use a single format and deliver adaptive streaming
81 video to all major desktop and mobile browsers.
82 </p>
83
84 <video id=example-video width=960 height=400 class="video-js vjs-default-skin" controls>
85 <source
86 src="https://s3.amazonaws.com/alta3-video/openstack_001_architecture_overview/multi.m3u8"
87 type="video/mp4" />
88 </video>
89
90 </section>
91
92 <section class="getting-started">
93 <h2>Getting Started</h2>
94 <p>
95 Download
96 <a href="https://github.com/videojs/videojs-contrib-hls/releases/latest">videojs-contrib-hls</a>
97 and include it in your page alongside video.js:
98 </p>
99 <pre><video id=example-video width=960 height=540 class="video-js vjs-default-skin" controls>
100 <source
101 src="https://example.com/index.m3u8"
102 type="application/x-mpegURL">
103</video>
104<script src="video.js"></script>
105<script src="videojs.hls.min.js"></script>
106<script>
107var player = videojs('example-video');
108player.play();
109</script></pre>
110 <p>Or just check out the source of this page!</p>
111 </section>
112
113 </div><!-- /.container -->
114
115
116 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
117 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
118 <link href="https://vjs.zencdn.net/5.4/video-js.css" rel="stylesheet">
119 <script src="http://vjs.zencdn.net/5.4/video.js"></script>
120 <script src="videojs.hls.min.js"></script>
121
122 <!--
123 -- Now, initialize your player. That's it!
124 -->
125 <script>
126 var player = videojs('example-video');
127 </script>
128 </body>
129</html>