Skip to content

brainfood / videojs-contrib-hls

Go to a project
Toggle navigation
Toggle navigation pinning
de4d94cb by Simeon Bateman Committed by David LaPalomento
Options

added new player demo to load mp4 via MSE

1 parent 688c83bc
Inline Side-by-side
Showing 1 changed file with 110 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">MP4 Media Sources API Test</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 This page is used to demo the playing of an mp4 file via the mediaSources API
36 </p>
37 </header>
38 <section>
39 <h2>Inputs</h2>
40 <form id="inputs">
41 <label>
42 Your original MP2T segment:
43 <input type="file" id="original">
44 </label>
45 <label>
46 A working, MP4 version of the underlying stream
47 produced by another tool:
48 <input type="file" id="working">
49 </label>
50 </form>
51 </section>
52 <section>
53 <video controls>
54 <source src="sintel_trailer-480p.mp4" type="video/mp4">
55 Your browser does not support the <code>video</code> element.
56 </video>
57 </section>
58 </article>
59
60 </div> <!-- #main -->
61 </div> <!-- #main-container -->
62
63 <div class="footer-container">
64 <footer class="wrapper">
65 <h3></h3>
66 </footer>
67 </div>
68
69 <script>
70 var inputs = document.getElementById('inputs'),
71 original = document.getElementById('original'),
72 working = document.getElementById('working'),
73
74 video = document.createElement('video');
75
76
77 working.addEventListener('change', function() {
78 console.log('File Selectd');
79 var reader = new FileReader();
80 reader.addEventListener('loadend', function() {
81 console.log('File has been loaded');
82 var bytes = new Uint8Array(reader.result),
83 ms = new window.MediaSource(),
84 video = document.querySelector('video');
85
86 video.addEventListener("error", function onError(err) {
87 console.dir("error", err, video.error);
88 });
89
90 video.pause();
91 video.src = window.URL.createObjectURL(ms);
92
93 var onMediaSourceOpen = function() {
94 console.log('on media open');
95 ms.removeEventListener('sourceopen', onMediaSourceOpen);
96 var sourceBuffer = ms.addSourceBuffer('video/mp4;codecs="avc1.64001f,mp4a.40.2');
97 sourceBuffer.appendBuffer(bytes);
98 };
99
100 ms.addEventListener('sourceopen', onMediaSourceOpen);
101
102 console.log('appended bytes', bytes);
103 });
104 reader.readAsArrayBuffer(this.files[0]);
105 });
106
107 </script>
108
109 </body>
110 </html>