mp4box.js/test/segment-player.html at master · gpac/mp4box.js · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
    <head>
		<title>Segmented MP4 file player</title>
		<script src="../src/log.js"></script>
		<script src="eme.js"></script>
		<script src="segment-player.js"></script>
    </head>
	<body>
		<h1>MP4 segments player</h1>
		<p>This page is used for test purposes. It allows playing segmented MP4 files using <a href="https://www.w3.org/TR/media-source/">HTML Media Source Extension</a></p>
		<p>Usage:</p>
		<ul>
			<li>set the MIME type of your file,</li>
			<li>if your file is encrypted, tick the checkbox and set the encryption key <br>Note that playback will only work if your file contains a <a href="https://w3c.github.io/encrypted-media/format-registry/initdata/cenc.html#common-system">Common System ID pssh</a></li>
			<li>Click the Initialize button</li>
			<li>Load or drag and drop your file(s) as you would like them to be appended to the SourceBuffer</li>
		</ul>
		<p>Note: Nothing is uploaded to any server. All processing is done in your browser</p>
		<div>
			<p><label>MIME type: <input text="type" name="mime" id="mime" style="width: 50%;" value='video/mp4; codecs="avc1.640029"'></label></p>
			<p><label>Encryption key (16 bytes hex): <input type="checkbox" name="encryption_enabled" id="encryption_enabled"> <input text="type" name="key" id="key" style="width: 50%;" value='00000000000000000000000000000000'></label></p>
			<p><button onclick="initializeMSEEME()">Initialize MSE/EME (ClearKey DRM System)</button></p>
			<div id='dropArea' style="width: 100%; height: 10%; background-color: lightgrey">
			<input id="fileinput" type="file" onchange='drop()'> or drop segments here</input>
			<div id="status">No segment yet loaded</div>
			</div>
			<video id="v" width="640" height="480" autoplay controls> </video>
		</div>
	</body>
</html>