Videojs Complete Guide for youtube and vimeo

example of using videojs with youtube

<link href="<?php echo base_url();?>assets/global/an/video-js-7.5.4/video-js.min.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url();?>assets/global/an/video-js-quality-selector/quality-selector.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>assets/global/an/video-js-skin-tube/videojs-tube.min.css" rel="stylesheet"/>
<link href="<?php echo base_url();?>assets/global/an/video-js-plugins/videojs-logo.min.css" rel="stylesheet">
<script src="<?php echo base_url();?>assets/global/an/video-js-7.5.4/video.min.js"></script>
                <script src="<?php echo base_url();?>assets/global/an/js/youtubejs.js"></script>
                <script src="<?php echo base_url();?>assets/global/an/video-js-quality-selector/silvermine-videojs-quality-selector.min.js"></script>
                <script src="<?php echo base_url();?>assets/global/an/video-js-plugins/videojs-logo.min.js"></script>
                <?php 
$coursevideolink = 'https://www.youtube.com/watch?v='.$video_details['video_id'];
?>
                <video height="500px" class="video-js vjs-big-play-centered"    id="video_player"     data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "<?echo $coursevideolink;?>"}],"youtube": {"title":false,"ytControls": 1,"enablejsapi": 1,"playsinline": 1,"iv_load_policy":3,"controls":0,"rel":"0","hl":"ar","customVars": { "wmode": "transparent" } }} '>
                </video>

                <script>
    var options = {
      controls: false,
      controlBar: {
        children: [
          'playToggle',
          'volumePanel',
          'currentTimeDisplay',
          'timeDivider',
          'durationDisplay',
          'progressControl',
          'liveDisplay',
          'remainingTimeDisplay',
          'customControlSpacer',
          /*'playbackRateMenuButton',*/
          'chaptersButton',
          'descriptionsButton',
          'subtitlesButton',
          'captionsButton',
          'audioTrackButton',
          'qualitySelector',
          'fullscreenToggle'
        ],
      }};

    var player = videojs("#video_player", options, function() {



    });
    player.videoLogo({
      watermark: 'أحمد ناصر بالعربي',
    });

    $('.vjs-loading-spinner').hide();
    player.fill(true);

    player['setPlaybackQuality'] = function(q){
if(activeVideoObject.type=="youtube"){
player.tech_.ytPlayer.setPlaybackQuality(q);
console.log('setPlaybackQuality() [' + q + ']');
}
}
player['getAvailableQualityLevels'] = function(){
// returns something like ["large", "medium", "small", "tiny", "auto"]
var ql = player.tech_.ytPlayer.getAvailableQualityLevels();
console.log('getAvailableQualityLevels()...[' + ql+ ']');
return ql;
}

player.qualityLevels();
    player.hlsQualitySelector({
      displayCurrentQuality: true
    });
  </script>

example of using videojs with vimeo

<link href="<?php echo base_url();?>assets/global/an/video-js-7.5.4/video-js.min.css" rel="stylesheet" type="text/css">
<link href="<?php echo base_url();?>assets/global/an/video-js-quality-selector/quality-selector.min.css" rel="stylesheet">
<link href="<?php echo base_url();?>assets/global/an/video-js-skin-tube/videojs-tube.min.css" rel="stylesheet"/>
<link href="<?php echo base_url();?>assets/global/an/video-js-plugins/videojs-logo.min.css" rel="stylesheet">
                <script src="<?php echo base_url();?>assets/global/an/video-js-7.5.4/video.min.js"></script>
                <script src="<?php echo base_url();?>assets/global/an/js/youtubejs.js"></script>
                <script src="<?php echo base_url();?>assets/global/an/video-js-quality-selector/silvermine-videojs-quality-selector.min.js"></script>
                <script src="<?php echo base_url();?>assets/global/an/video-js-plugins/videojs-logo.min.js"></script>
                <script src="<?php echo base_url();?>assets/global/an/js/Vimeo.min.js"></script>
                <?php 
$coursevideolink = 'https://vimeo.com/'.$video_details['video_id'];//"https://vimeo.com/320744536";
//remove controls from main page
?>
                <video height="500" class="video-js vjs-big-play-centered"   autoplay id="video_player"     data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src": "{<?echo $coursevideolink;?> }"}], "vimeo": { "ytControls": 2  } } '>
                </video>

                <script>
    var options = {
      controlBar: {
        children: [
          'playToggle',
          'volumePanel',
          'currentTimeDisplay',
          'timeDivider',
          'durationDisplay',
          'progressControl',
          'liveDisplay',
          'remainingTimeDisplay',
          'customControlSpacer',
          /*'playbackRateMenuButton',*/
          'chaptersButton',
          'descriptionsButton',
          'subtitlesButton',
          'captionsButton',
          'audioTrackButton',
          'qualitySelector',
          'fullscreenToggle'
        ],
      }
    };
    var player = videojs("#video_player", options, function() {});
    player.videoLogo({
      watermark: 'أحمد ناصر بالعربي',
    })
    $('.vjs-loading-spinner').hide();
    player.fill(true);
  </script>

you might play around with player play and pause as following

 $('#modaltriggerv').click(function(){
      playPreview();

});

    function playPreview() {
 player.ready(function() {
  var promise = player.play();
 
  if (promise !== undefined) {
    promise.then(function() {
    $('.vjs-loading-spinner').hide();
      // Autoplay started!
    }).catch(function(error) {
      // Autoplay was prevented.
    });
  }
});
    }
    function pausePreview() {
      player.pause();
    }