JSFiddle - React, Tailwind, and code Playground

forked from http://jsfiddle.net/Hussnain1/unrjrqee/ - Video.js HD toggle - By getting sources from video tag. HD = "HDsrc" nonHD = "noHDsrc"

by dledle2

HTML

<link rel="stylesheet" href="//vjs.zencdn.net/5.16.0/video-js.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/video.js/6.2.5/video.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/dashjs/2.5.0/dash.all.min.js"></script>
<!-- <script src="//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.9.1/videojs-dash.min.js"></script>
   // -->
<script src='//cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.8.3/videojs-contrib-hls.min.js'></script>



 <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" HD="http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on" nonHD="http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on" width="640" height="480" controls>
         <source type="application/x-mpegURL" src="http://tvemsnbc-lh.akamaihd.net/i/nbcmsnbc_1@122532/index_796_av-p.m3u8?sd=10&rebase=on">
      </video>

CSS

.vjs-default-skin .vjs-control.vjs-HD-button {
         display: block;
		 font-size: 1.5em;
         line-height: 2;
         position: relative;
         top: 0;
         float:right;
		 left: 10px;
         height: 100%;
         text-align: center;
         cursor: pointer;
         }

JavaScript

function HDtoggle () {
           
		   var HD1 = false;
		   /* It is the variable which tells us that that HD video is getting played or not.
			  HD1 = false ---> video is not HD
			  HD1 = true ----> video is HD */
          
             videojs.HD = videojs.Button.extend({
           /* @constructor */
               init: function(player, options){
                 videojs.Button.call(this, player, options);
                 this.on('click', this.onClick);
               }
             });
            
			/* Changing sources by clicking on HD button */
			/* This function is called when HD button is clicked */
            videojs.HD.prototype.onClick = function() {
         	
         	
         var HDsrc = $("#example_video_1").find( "video" ).attr("HD"); 
		 /* Value of HD attribute in video tag is saved in HDsrc. */
         var noHDsrc = $("#example_video_1").find( "video" ).attr("nonHD");
		 /* Value of nonHD attribute in video tag is saved in noHDsrc. */
         	
			if (HD1) { /* If video is not HD */
         var css = document.createElement("style");
         css.type = "text/css";
         css.innerHTML = ".vjs-control.vjs-HD-button { color: silver; font-weight:normal; text-shadow: 0 0 5em #fff;}";
		  /* Changing the HD button to initial styling when we play non HD video by clicking on HD button.*/
         document.body.appendChild(css);
         videojs("example_video_1").src([{type: "application/x-mpegURL", src: noHDsrc }]);
		 
         videojs("example_video_1").play();
		 /* This automatically plays the video when we click on HD button to change the source.*/
         HD1 = false;
         }
         else { /* if video is HD */
         var css = document.createElement("style");
         css.type = "text/css";
         css.innerHTML = ".vjs-control.vjs-HD-button { color: #36D8DE; font-weight:bold; text-shadow: 0 0 1em #fff;}";
		/*This css applies when HD video is played. You can easily change the blue color of HD button by changing the...