You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.6 KiB
88 lines
2.6 KiB
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>videojs-http-streaming Demo</title>
|
|
<link href="node_modules/video.js/dist/video-js.css" rel="stylesheet">
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 20px;
|
|
}
|
|
.info {
|
|
background-color: #eee;
|
|
border: thin solid #333;
|
|
border-radius: 3px;
|
|
padding: 0 5px;
|
|
margin: 20px 0;
|
|
}
|
|
input {
|
|
margin-top: 15px;
|
|
min-width: 450px;
|
|
padding: 5px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="info">
|
|
<p>The video below is an <a href="https://developer.apple.com/library/ios/documentation/networkinginternet/conceptual/streamingmediaguide/Introduction/Introduction.html#//apple_ref/doc/uid/TP40008332-CH1-SW1">HTTP Live Stream</a>.</p>
|
|
</div>
|
|
<video-js id="videojs-http-streaming-player" class="vjs-default-skin" controls>
|
|
<source src="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL">
|
|
</video-js>
|
|
|
|
<form id=load-url>
|
|
<label>
|
|
Video URL:
|
|
<input id=url type=url value="https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8">
|
|
</label><br/>
|
|
<label>
|
|
MimeType:
|
|
<select id=mimetype>
|
|
<option>application/x-mpegURL</option>
|
|
<option>application/dash+xml</option>
|
|
</select>
|
|
</label>
|
|
<button type=submit>Load</button>
|
|
</form>
|
|
<ul>
|
|
<li><a href="index.html">Use non-minified JavaScript.</a></li>
|
|
<li><a href="test/">Run unit tests in browser.</a></li>
|
|
<li><a href="docs/api/">Read generated docs.</a></li>
|
|
<li><a href="examples">Browse Examples</a></li>
|
|
</ul>
|
|
|
|
<script src="node_modules/video.js/dist/alt/video.core.js"></script>
|
|
<script src="node_modules/videojs-contrib-eme/dist/videojs-contrib-eme.js"></script>
|
|
|
|
<script src="dist/videojs-http-streaming.min.js"></script>
|
|
<script>
|
|
(function(window, videojs) {
|
|
var player = window.player = videojs('videojs-http-streaming-player', {
|
|
html5: {
|
|
hls: {
|
|
overrideNative: !videojs.browser.IS_SAFARI
|
|
}
|
|
}
|
|
});
|
|
|
|
// configure videojs-contrib-eme
|
|
player.eme();
|
|
|
|
// hook up the video switcher
|
|
var loadUrl = document.getElementById('load-url');
|
|
var url = document.getElementById('url');
|
|
var mimeType = document.getElementById('mimetype');
|
|
loadUrl.addEventListener('submit', function(event) {
|
|
event.preventDefault();
|
|
player.src({
|
|
src: url.value,
|
|
type: mimeType.options[mimeType.selectedIndex].innerText
|
|
});
|
|
return false;
|
|
});
|
|
}(window, window.videojs));
|
|
</script>
|
|
</body>
|
|
</html>
|