JSFiddle - React, Tailwind, and code Playground

trying m3u8 - Video.js

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>
<script src="https://raw.githubusercontent.com/videojs/videojs-contrib-hls/master/src/videojs-contrib-hls.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>

  <video id="maat-player" class="video-js vjs-default-skin" controls>
      <source src="https://s3-us-west-2.amazonaws.com/hg-video-out/Karolyi,_Tracy_34MQ5_about_me_videod737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d/hls_d737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d.m3u8" type="application/x-mpegURL">
    </video>

JavaScript

var player;

$(document).ready(function() {
	player = videojs('my_video_1', {
		techOrder: ['flash', 'html5'],
		autoplay: true,
		sources: [{ 
			type: "application/x-mpegURL",
			src: "https://s3-us-west-2.amazonaws.com/hg-video-out/Karolyi,_Tracy_34MQ5_about_me_videod737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d/hls_d737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d.m3u8"
		}]
	});
	
	
	$('a.one').on('click', function() {
		changeSource({ 
			type: "application/x-mpegURL",
			src: "https://s3-us-west-2.amazonaws.com/hg-video-out/Karolyi,_Tracy_34MQ5_about_me_videod737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d/hls_d737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d.m3u8"
		});
	});
	
	$('a.two').on('click', function() {
		changeSource({ 
			type: "application/x-mpegURL",
			src: "https://s3-us-west-2.amazonaws.com/hg-video-out/Karolyi,_Tracy_34MQ5_about_me_videod737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d/hls_d737bccd1ac88a5251ef887734a2f0ab21114f331a25ab7abd9a1e4e46a39f6d.m3u8"
		});
	});
});

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