JSFiddle - React, Tailwind, and code Playground

trying m3u8 --- 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: "application/x-mpegurl",
			src: "http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/master.m3u8?sd=10&rebase=on"
		}]
	});
	
	
	$('a.one').on('click', function() {
		changeSource({ 
			type: "application/x-mpegurl",
			src: "http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/master.m3u8?sd=10&rebase=on"
		});
	});
	
	$('a.two').on('click', function() {
		changeSource({ 
			type: "application/x-mpegurl",
			src: "http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/master.m3u8?sd=10&rebase=on"
		});
	});
});

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();
	});
}