Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
6bbe1a3d by David LaPalomento
Options

Demo page for MSE 

Create a page that shows the media source extensions-compatible transmuxing process in an actual video element. Only tested in Chrome.
1 parent 9513e960
Inline Side-by-side
Showing 2 changed files with 107 additions and 0 deletions
1 <!DOCTYPE html>
2 <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
3 <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
4 <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
5 <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
6 <head>
7 <meta charset="utf-8">
8 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9 <title></title>
10 <meta name="description" content="">
11 <meta name="viewport" content="width=device-width">
12
13 <link rel="stylesheet" href="css/normalize.min.css">
14 <link rel="stylesheet" href="css/main.css">
15
16 <script src="js/vendor/modernizr-2.6.2.min.js"></script>
17 </head>
18 <body>
19 <!--[if lt IE 7]>
20 <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
21 <![endif]-->
22
23 <div class="header-container">
24 <header class="wrapper clearfix">
25 <h1 class="title">Transmux Analyzer</h1>
26 </header>
27 </div>
28
29 <div class="main-container">
30 <div class="main wrapper clearfix">
31
32 <article>
33 <header>
34 <p>
35 videojs-contrib-hls can convert MPEG transport streams
36 into Media Source Extension-compatible media segments on
37 the fly. Check out the demo below in Chrome!
38 </p>
39 </header>
40 <section>
41 <video id=demo width=640 height=360 controls>
42 <p>
43 Your browser is too old to view this demo. How about
44 upgrading?
45 </p>
46 </video>
47 </section>
48 </article>
49
50 </div> <!-- #main -->
51 </div> <!-- #main-container -->
52
53 <div class="footer-container">
54 <footer class="wrapper">
55 </footer>
56 </div>
57
58
59 <script src="zencoder-haze-1.js"></script>
60 <!-- transmuxing -->
61 <script>
62 window.videojs = window.videojs || {
63 Hls: {}
64 };
65 </script>
66 <script src="../../src/stream.js"></script>
67 <script src="../../src/mp4-generator.js"></script>
68 <script src="../../src/transmuxer.js"></script>
69 <script src="../../src/exp-golomb.js"></script>
70 <script src="js/mp4-inspector.js"></script>
71
72 <script src="../../src/bin-utils.js"></script>
73 <script>
74 var mediaSource = new MediaSource(),
75 demo = document.getElementById('demo');
76
77 // setup the media source
78 mediaSource.addEventListener('sourceopen', function() {
79 var buffer = mediaSource.addSourceBuffer('video/mp4;codecs=avc1.4d400d'),
80 transmuxer = new videojs.mp2t.Transmuxer(),
81 segments = [];
82
83 // expose the machinery for debugging
84 window.vjsMediaSource = mediaSource;
85 window.vjsSourceBuffer = buffer;
86 window.vjsVideo = demo;
87
88 // transmux the MPEG-TS data to BMFF segments
89 transmuxer.on('data', function(segment) {
90 segments.push(segment);
91 });
92 transmuxer.push(hazeVideo);
93 transmuxer.end();
94
95 // buffer up the video data
96 buffer.appendBuffer(segments.shift().data);
97 buffer.addEventListener('updateend', function() {
98 if (segments.length) {
99 buffer.appendBuffer(segments.shift().data);
100 }
101 });
102 });
103 demo.src = URL.createObjectURL(mediaSource);
104 demo.addEventListener('error', console.log.bind(console));
105 </script>
106 </body>
107 </html>
This diff could not be displayed because it is too large.