jQuery toggleClass example

Toggle class name on click in jQuery

by Sahil Kashyap

HTML

<link rel="stylesheet" href="https://vjs.zencdn.net/7.11.4/video-js.css">
<script src="https://vjs.zencdn.net/7.11.4/video.min.js"></script>

<img src="https://via.placeholder.com/150"  data-vidurl="https://content.jwplatform.com/manifests/yp34SRmf.m3u8" class="demo-image" id="video1Btn"  value="Load Video 1" />
<img src="https://via.placeholder.com/120" data-vidurl="http://demo.unified-streaming.com/video/tears-of-steel/tears-of-steel.ism/.m3u8" class="demo-image" id="video2Btn"  value="Load Video 2" />
<video id="video" class="embed-responsive-item video-js vjs-default-skin" width="640" height="360" autoplay controls></video>
<script>
$(document).ready(function () {

            // An example of playing with the Video.js javascript API
            // Will start the video and then switch the source 3 seconds latter
            // You can look at the doc there: http://docs.videojs.com/docs/guides/api.html
            videojs('video').ready(function () {
                var myPlayer = this;
/*                 myPlayer.src({type: 'application/x-mpegURL', src: 'https://content.jwplatform.com/manifests/yp34SRmf.m3u8'});
                 */
                $(".demo-image").on('click', function () {
                var new_url = $(this).data("vidurl");
                console.log(new_url);
                    myPlayer.src({type: 'application/x-mpegURL', src: new_url});
                });
            });

        });</script>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}