Ancok Player

Responsive JwPlayer Plugin for Wordpress

created: 12/05/2016
latest update: 01/07/2017
by: Ancok Namhay
Ancok Namhay
email: ancoknamhay@gmail.com

Ancok Player

Ancok's Player files are well documented and easy to customze. I am gonna show you some important code. This will help you to edit files.

How To

In Ancok Player we provide 2 type of options to install the plugin.

Option One: Go to wp-admin administrator left menu select Plugins / Add New / Upload plugin and then browse to the file you ancok-player.zip that was downloaded and then click Install Now.

Option two: Log in hosting it in wp-content / plugins, upload files into this folder ancok-player.zip then decompressed. Wp-admin page admin / Plugins / Installed Plugins , you will see plugins for WordPress called Ancok Player select Activate to activated.

Create New Post, Click on Ancok Player Logo than you will find this form in "Add New Post" Area.

In the theme folder you are using open header.php file, search "</head>". add the following code above.

JWPlayer.js

<script src="<?php echo content_url(); ?>/plugins/ancok-player/jwplayer/jwplayer.js"></script>

<script type="text/javascript">jwplayer.key="+l0xUTyGV23sGPdftNES3n32BKvhAZGVROfs1Q==";</script>

We used 2 custom css file to style Ancok.

plugin-styles.css
responsive-video.css

plugin-styles.css

.vjs-default-skin div.vjs-big-play-button {
	top: 50%; left: 50%;
	margin: -1.3em 0 0 -2em;
}
.vjs-default-skin .vjs-time-controls div, .vjs-default-skin .vjs-time-divider span {
	font-size: 1em;
	line-height: 3em;
}

/* Responsive Videos */
.video-wrapper {
    position: relative;
    padding-bottom: 74.25%; /* 4:3 ratio */
    height: 0;
    overflow: hidden;
}
.video-wrapper video,.videoWrapper,.video-wrapper .video-js {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
}
.video-wrapper .video-js, .video-wrapper img.vjs-poster {
    width: 100% !important;
    height: 100% !important; //these need !important because IE wants to set height/width to 100px
    max-width: 100%;
}

responsive-video.css

responsive-video.css responsible for all custom styling. We are commented every part in responsive-video.css file.

.video-wrapper {
    position: relative;
    padding-bottom: 74.25%; /* 4:3 ratio */
/*	padding-top: 30px; /* IE6 workaround*/
    height: 0;
    overflow: hidden;
}

video,.videoWrapper,.video-js {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-js, img.vjs-poster {
    width: 100% !important;
    height: 100% !important; //these need !important because IE wants to set height/width to 100px
    max-width: 100%;
}

We use "mce-button.js" for all our custom js code. Other files are from various plugins. Now i am going to show you some important code form my mce-button.js file

Rev Slider

jQuery(function() {
        //get the checkbox defaults
        var autoplay_default = jQuery('#videojs-autoplay-default').val();
        if ( autoplay_default == 'off' )
            autoplay_checked = ' checked';
        else
            autoplay_checked = '';
        
        var preload_default = jQuery('#videojs-preload-default').val();
        if ( preload_default == 'off' )
            preload_checked = ' checked';
        else
            preload_checked = '';

        
        var form = jQuery('<div id="videoJSpopup">\
        <table id="videoJStable" class="form-table">\
            <tr>\
                <th><label for="videojs-mp4">MP4 Source</label></th>\
                <td><input type="text" name="videojs-mp4" id="videojs-mp4" size="50"><br>\
                <small>Video link .mp4</small></td>\
            </tr>\
            <tr>\
                <th><label for="videojs-google">Google Source</label></th>\
                <td><input type="text" name="videojs-google" id="videojs-google" size="50"><br>\
                <small>Link Google Drive or Photos.</small></td>\
            </tr>\
            <tr>\
                <th><label for="videojs-poster">Poster Image</label></th>\
                <td><input type="text" name="videojs-poster" id="videojs-poster" size="50"><br>\
                <small>Poster image for videos.</small></td>\
            </tr>\
            <tr>\
                <th><label for="videojs-subtitle">Subtitle Url</label></th>\
                <td><input type="text" name="videojs-subtitle" id="videojs-subtitle" size="50"><br>\
                <small>Link Subtitles for video .srt or .vtt</small></td>\
            </tr>\
            <tr>\
                <th><label for="videojs-id">ID</label></th>\
                <td><input type="text" name="videojs-id" id="videojs-id" size="50"><br>\
                <small>Add a custom ID to your video player.</small></td>\
            </tr>\
        </table>\
        <p class="submit">\
                <input type="button" id="videojs-submit" class="button-primary" value="Insert Video" name="submit" />\
        </p>\
        </div>');
        var table = form.find('table');
        form.appendTo('body').hide();
        
        (function() {
     /* Register the buttons */
     tinymce.create('tinymce.plugins.MyButtons', {
          init : function(ed, url) {
               /**
               * Inserts shortcode content
               */
               ed.addButton( 'button_eek', {
                    title : 'Insert shortcode',
                    image : '../wp-includes/images/smilies/icon_eek.gif',
                    onclick : function() {
                         ed.selection.setContent('[myshortcode]');
                    }
               });
               /**
               * Adds HTML tag to selected content
               */
               ed.addButton( 'button_green', {
                    title : 'Add span',
                    image : '../wp-includes/images/smilies/icon_mrgreen.gif',
                    cmd: 'button_green_cmd'
               });
               ed.addCommand( 'button_green_cmd', function() {
                    var selected_text = ed.selection.getContent();
                    var return_text = '';
                    return_text = '<h1>' + selected_text + '</h1>';
                    ed.execCommand('mceInsertContent', 0, return_text);
               });
          },
          createControl : function(n, cm) {
               return null;
          },
     });
     /* Start the buttons */
     tinymce.PluginManager.add( 'my_button_script', tinymce.plugins.MyButtons );
})();

For more option please visit this link: https://codex.wordpress.org/Plugin_API/Filter_Reference/mce_buttons,_mce_buttons_2,_mce_buttons_3,_mce_buttons_4

Admin.js

jQuery(document).ready(function($){
    $('.videojs-color-field').wpColorPicker();
});

We just used only 3 php file ( admin.php, lib.php, player.php ) for Ancok Player.

function curl($url){
		$ch = @curl_init();
		curl_setopt($ch, CURLOPT_URL, $url);
		$head[] = "Connection: keep-alive";
		$head[] = "Keep-Alive: 300";
		$head[] = "Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7";
		$head[] = "Accept-Language: en-us,en;q=0.5";
		curl_setopt($ch, CURLOPT_USERAGENT, 'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/37.0.2062.124 Safari/537.36');
		curl_setopt($ch, CURLOPT_HTTPHEADER, $head);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
		curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, FALSE);
		curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
		curl_setopt($ch, CURLOPT_TIMEOUT, 15);
		curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, 15);
		curl_setopt($ch, CURLOPT_FOLLOWLOCATION, TRUE);
		curl_setopt($ch, CURLOPT_HTTPHEADER, array('Expect:'));
		$page = curl_exec($ch);
		curl_close($ch);
		return $page;
}

I wanna thanks to all of those plugins developer who make my taks easy. Thanks guys!

I wanna thanks to all of those developer who make my taks easy. Thanks guys!

If you need any more help please maill us at ancoknamhay75@gmail.com

Ancok Player

Responsive JwPlayer Plugin for Wordpress

HTML

How To

HEADER

JWPlayer.js

CSS

plugin-styles.css

responsive-video.css

JQUERY

Rev Slider

Admin.js

PHP

JS Credits

CSS Credits

Thank you