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
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/normalize.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<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>
<![endif]-->
<div class="header-container">
<header class="wrapper clearfix">
<h1 class="title">MP4 Media Sources API Test</h1>
</header>
</div>
<div class="main-container">
<div class="main wrapper clearfix">
<article>
<header>
<p>
This page is used to demo the playing of an mp4 file via the mediaSources API
</p>
</header>
<section>
<h2>Inputs</h2>
<form id="inputs">
<label>
Your original MP2T segment:
<input type="file" id="original">
</label>
<label>
A working, MP4 version of the underlying stream
produced by another tool:
<input type="file" id="working">
</label>
</form>
</section>
<section>
<video controls>
<source src="sintel_trailer-480p.mp4" type="video/mp4">
Your browser does not support the <code>video</code> element.
</video>
</section>
</article>
</div> <!-- #main -->
</div> <!-- #main-container -->
<div class="footer-container">
<footer class="wrapper">
<h3></h3>
</footer>
</div>
<script>
var inputs = document.getElementById('inputs'),
original = document.getElementById('original'),
working = document.getElementById('working'),
video = document.createElement('video');
working.addEventListener('change', function() {
console.log('File Selectd');
var reader = new FileReader();
reader.addEventListener('loadend', function() {
console.log('File has been loaded');
var bytes = new Uint8Array(reader.result),
ms = new window.MediaSource(),
video = document.querySelector('video');
video.addEventListener("error", function onError(err) {
console.dir("error", err, video.error);
});
video.pause();
video.src = window.URL.createObjectURL(ms);
var onMediaSourceOpen = function() {
console.log('on media open');
ms.removeEventListener('sourceopen', onMediaSourceOpen);
var sourceBuffer = ms.addSourceBuffer('video/mp4;codecs="avc1.64001f,mp4a.40.2');
sourceBuffer.appendBuffer(bytes);
};
ms.addEventListener('sourceopen', onMediaSourceOpen);
console.log('appended bytes', bytes);
});
reader.readAsArrayBuffer(this.files[0]);
});
</script>
</body>
</html>