Created
October 2, 2014 18:31
-
-
Save dmlap/cbae7b1c9c529e4173b9 to your computer and use it in GitHub Desktop.
An example of manual bitrate selection with videojs-contrib-hls.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>video.js HLS Plugin Example</title> | |
<link href="node_modules/video.js/dist/video-js/video-js.css" rel="stylesheet"> | |
<!-- video.js --> | |
<script src="node_modules/video.js/dist/video-js/video.js"></script> | |
<!-- Media Sources plugin --> | |
<script src="node_modules/videojs-contrib-media-sources/src/videojs-media-sources.js"></script> | |
<!-- HLS plugin --> | |
<script src="src/videojs-hls.js"></script> | |
<!-- segment handling --> | |
<script src="src/xhr.js"></script> | |
<script src="src/flv-tag.js"></script> | |
<script src="src/exp-golomb.js"></script> | |
<script src="src/h264-stream.js"></script> | |
<script src="src/aac-stream.js"></script> | |
<script src="src/segment-parser.js"></script> | |
<!-- m3u8 handling --> | |
<script src="src/stream.js"></script> | |
<script src="src/m3u8/m3u8-parser.js"></script> | |
<script src="src/playlist-loader.js"></script> | |
<script src="node_modules/pkcs7/dist/pkcs7.unpad.js"></script> | |
<script src="src/decrypter.js"></script> | |
<script src="src/bin-utils.js"></script> | |
<!-- example MPEG2-TS segments --> | |
<!-- bipbop --> | |
<!-- <script src="test/tsSegment.js"></script> --> | |
<!-- bunnies --> | |
<!--<script src="test/tsSegment-bc.js"></script>--> | |
<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; | |
} | |
</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>. On desktop browsers other than Safari, the HLS plugin will polyfill support for the format on top of the video.js Flash tech.</p> | |
<p>Due to security restrictions in Flash, you will have to load this page over HTTP(S) to see the example in action.</p> | |
</div> | |
<video id="video" | |
class="video-js vjs-default-skin" | |
height="300" | |
width="600" | |
controls> | |
<source | |
src="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/bipbopall.m3u8" | |
type="application/x-mpegURL"> | |
</video> | |
<form id="switcher"> | |
<legend>Switch bitrates:</legend> | |
<button data-url="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/gear1/prog_index.m3u8">gear 1</button> | |
<button data-url="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/gear2/prog_index.m3u8">gear 2</button> | |
<button data-url="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/gear3/prog_index.m3u8">gear 3</button> | |
<button data-url="http://solutions.brightcove.com/jwhisenant/hls/apple/bipbop/gear4/prog_index.m3u8">gear 4</button> | |
</form> | |
<script> | |
videojs.options.flash.swf = 'node_modules/video.js/dist/video-js/video-js.swf'; | |
// initialize the player | |
var player = videojs('video'); | |
var switchGears = function(event) { | |
var url = event.target.getAttribute('data-url'); | |
player.src({ | |
src: url, | |
type: 'application/x-mpegURL' | |
}); | |
event.preventDefault(); | |
}; | |
Array.prototype.slice.call(document.querySelectorAll('#switcher button')).forEach(function(button) { | |
button.addEventListener('click', switchGears); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment