Skip to content

Instantly share code, notes, and snippets.

@RupGautam
Created October 28, 2015 03:09
Show Gist options
  • Save RupGautam/a698fbd6f130ac694f82 to your computer and use it in GitHub Desktop.
Save RupGautam/a698fbd6f130ac694f82 to your computer and use it in GitHub Desktop.
VideoJS Responsive Video Player.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>BlankPage</title>
<meta
content="width=device-width initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
name="viewport">
<link
href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"
rel="stylesheet">
<script src="http://vjs.zencdn.net/4.12/video.js"></script>
<link href="http://vjs.zencdn.net/4.12/video-js.css" rel="stylesheet">
<style>
.video-js {
padding-top: 56.62%;
bottom-padding: 0;
}
.vjs-fullscreen {
padding-top: 0;
margin-top: 0;
</style>
</head>
<body>
<div class="wrap">
<section class="content" id="content">
<div class="section" id="cloud">
<div class="title container"></div>
<div class="panel">
<div class="art-preview">
<video
class="art-preview lazy video video-js vjs-default-skin vjs-big-play-centered video-js-fullscreen"
controls
data-setup='{ "example_option": true, "width": "auto", "height": "auto", "controls": true, "autoplay": true, "techOrder": ["html5","flash"] }'
height="599" itemprop="example_video_1" preload="auto" width="100%">
<source
src="rtmp://pathto"
type='rtmp/mp4'/>
<source
src="http://pathto/index.m3u8"
type='application/x-mpegURL'/>
<p class="vjs-no-js">If you have problems fix your chrome if you have IE throw
it away, and check out the IE Sucks chrome Extension that mocks its lack of
function
<a href="http://videojs.com/html5-video-support/" target="_blank">support HTML5 video</a>
</p>
</video>
</div>
</div>
</div>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</html>
@RupGautam
Copy link
Author

TEST On Safari 9.0/Chrome 45+

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment