Video.js Flash Example

by dledle2

HTML

<link rel="stylesheet" href="http://vjs.zencdn.net/4.2/video-js.css">
<script src="http://vjs.zencdn.net/4.2/video.js"></script>
<h1>Video.js switch tech</h1>
  <div style="color: red; padding: 10px; 0">Wait until player start playing, then click on Change Source 1 link and then click on Change Source 2 link.<br/><b>Take a look at current time, total time and progress bar to see what happened!</b></div>
  
  <video id="my_video_1" class="video-js vjs-default-skin" controls preload="auto" width="640" height="268">

  </video>
  
  <a class="one" href="javascript:;">Change Source 1</a> | <a class="two" href="javascript:;">Change Source 2</a>

JavaScript

var player;

$(document).ready(function() {
	player = videojs('my_video_1', {
		techOrder: ['flash', 'html5'],
		autoplay: true,
		sources: [{ 
			type: "video/flv",
			src: "https://d26ua9paks4zq.cloudfront.net/a8/8a/2cc6b88546479955f78401633451/tracy-karolyi-34mq5-about-me-video.flv"
		}]
	});
	
	
	$('a.one').on('click', function() {
		changeSource({ 
			type: "video/webm",
			src: "http://upload.wikimedia.org/wikipedia/mediawiki/d/d1/Wikipedia_on_Google_Glass_screencast_test.webm"
		});
	});
	
	$('a.two').on('click', function() {
		changeSource({ 
			type: "video/flv",
			src: "http://www.mediacollege.com/video-gallery/testclips/20051210-w50s_56K.flv"
		});
	});
});

function changeSource(src) {
	player.pause();
	player.currentTime(0);
	
	player.src(src);
	
	player.ready(function() {
		this.one('loadeddata', videojs.bind(this, function() {
			this.currentTime(0);
		}));

		this.load();
		this.play();
	});
}