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.
Showing
2 changed files
with
107 additions
and
0 deletions
test/muxer/mse-demo.html
0 → 100644
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> |
test/muxer/zencoder-haze-1.js
0 → 100644
This diff could not be displayed because it is too large.
-
Please register or sign in to post a comment