Download
User Rating: 4.3/5 ( 1 votes)
Responsive Video is a jQuery Plugin for a video player that scales to fit its container. Generally it is best to use services like YouTube, Vimeo or a CDN for hosting video, but sometimes it isn’t an option. It uses flash to for browsers that don’t support h.264, so you can encode once as a baseline h.264 mp4 and play anywhere.
Source: johnpolacek.github.io
1. INCLUDE JS FILES
<script src="http://code.jquery.com/jquery-1.7.min.js"></script>
<script src="js/vidobject.js"></script>
2. HTML
Add video element to your html inside a container div that is styled to scale with the size of the browser window
<div id="container">
<video id="myVideo" width="640" height="360" poster="img/poster.jpg" controls autoplay>
<source src="vid/video.mp4" type="video/mp4" />
</video>
</div>
3. JAVASCRIPT
Create a new vidobject and apply any custom settings to it
var vidobject = new $.vidobject({
player: 'swf/vidobject.swf',
buttonColor: '#FFFFFF',
accentColor: '#BBBBBB',
backgroundColor: '#111111',
scaleVideo: true,
fullScreen: true
});
vidobject.embed("myVideo");
4. OPTIONS
player: path to the vidobject.swf player
buttonColor: video controls button color (default is '#FFFFFF')
accentColor: video controls accent color (default is '#BBBBBB')
backgroundColor: video controls background color (default is '#111111')
scaleVideo: set to false if you don't want the video to scale
fullScreen: set to false to disable full screen mode
JS Tutorial
