Skip to content

Instantly share code, notes, and snippets.

@disassemblyline

disassemblyline/realtime streamer

Last active August 29, 2015 14:01
Show Gist options
  • Save disassemblyline/80992ae156691b51981f to your computer and use it in GitHub Desktop.
Save disassemblyline/80992ae156691b51981f to your computer and use it in GitHub Desktop.
Download ZIP
e-z /live/ streamer for flash & html5 video with fallback mime-types, intended as a simple copy+paste proof of concept. just ctrl+f "<stream url>" and replace each to match the appropriate mime-type. uses yui-cssreset, video.js, and prototype.
Raw
realtime streamer
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//yui.yahooapis.com/3.16.0/build/cssreset/cssreset-min.css">
<link rel="stylesheet" type="text/css" href="//vjs.zencdn.net/4.5/video-js.css">
<script type="text/javascript" src="//vjs.zencdn.net/4.5/video.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script type="text/javascript">
function resize_video()
{
$("resize-div").setStyle(
{
width: document.viewport.getWidth()+"px",
height: document.viewport.getHeight()+"px"
});
}
Event.observe(window, "resize", resize_video);
Event.observe(document, "dom:loaded", resize_video);
</script>
<style>
.vjs-progress-control, .vjs-time-divider, .vjs-duration
{
display: none;
}
</style>
<title>live tv</title>
</head>
<body>
<center>
<div id="resize-div" width="960" height="540">
<video class="video-js vjs-default-skin" width="100%" height="100%" data-setup='{ "autoplay": true, "controls": true, "preload": "none", "techOrder": ["html5", "flash"] }'>
<!-- the majority of these are provided for convenience, see what works and doesnt work yourself! -->
<!-- mac os x / ios / "quicktime" (possible windows support?) stuff -->
<source src="<stream url>" type="application/x-mpegurl" />
<source src="<stream url>" type="application/vnd.apple.mpegurl" />
<source src="<stream url>" type="video/quicktime" />
<!-- flash -->
<source src="<stream url>" type="rtmp/flv" />
<!-- everything else that may or may not work, try them out! -->
<source src="<stream url>" type="video/avi" />
<source src="<stream url>" type="video/mp2t" />
<source src="<stream url>" type="video/mp4" />
<source src="<stream url>" type="video/mpeg" />
<source src="<stream url>" type="video/webm" />
<source src="<stream url>" type='video/webm; codecs="vp8, vorbis"' />
</video>
</div>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment