example of using videojs with youtube
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
$('#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(); } |