Add Fullscreenbutton Mediaelemnt.js HTML5 Videos

Hi,

This code should work. Just add it it in the functions.php file.

add_action('wp_footer', 'ava_custom_script');
function ava_custom_script(){
	?>
	<script type="text/javascript">
		(function($) {	
			$(document).ready(function() {
				//activate html5 video player
				if($.fn.avia_html5_activation && $.fn.mediaelementplayer)
				$(".avia_video, .avia_audio", container).avia_html5_activation({ratio:'16:9', features: ['playpause','progress','current','duration','tracks','volume',
				'fullscreen']});
			});
		})(jQuery);
	</script>
	<?php
}

It will override the theme’s default player options.

Best regards,
Ismael

Hi,

Thanks for the update.

I can reproduce the issue on my end. Please replace the code with this one.

add_action('wp_footer', 'ava_custom_script_reload_video');
function ava_custom_script_reload_video(){
	?>
	<script type="text/javascript">
		(function($) {	
            var isMobile = false;

            if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && 'ontouchstart' in document.documentElement)
            {
                isMobile =  true;
            }
            else
            {
                isMobile =  false;
            }

			$(window).on('load', function() {
            // -------------------------------------------------------------------------------------------
            // html 5 videos
            // -------------------------------------------------------------------------------------------
            $.fn.avia_html5_activation_mod = function(options)
            {	
                var defaults =
                {
                    ratio: '16:9'
                };

                var options  = $.extend(defaults, options);
                
                // if(isMobile) return;
                
                this.each(function()
                {
                var fv 			= $(this),
                    id_to_apply = '#' + fv.attr('id'),
                    posterImg 	= fv.attr('poster');
                

                fv.mediaelementplayer({
                    // if the <video width> is not specified, this is the default
                    defaultVideoWidth: 480,
                    // if the <video height> is not specified, this is the default
                    defaultVideoHeight: 270,
                    // if set, overrides <video width>
                    videoWidth: -1,
                    // if set, overrides <video height>
                    videoHeight: -1,
                    // width of audio player
                    audioWidth: 400,
                    // height of audio player
                    audioHeight: 30,
                    // initial volume when the player starts
                    startVolume: 0.8,
                    // useful for <audio> player loops
                    loop: false,
                    // enables Flash and Silverlight to resize to content size
                    enableAutosize: false,
                    // the order of controls you want on the control bar (and other plugins below)
                    features: ['playpause','progress','current','duration','tracks','volume', 'fullscreen'],
                    // Hide controls when playing and mouse is not over the video
                    alwaysShowControls: false,
                    // force iPad's native controls
                    iPadUseNativeControls: false,
                    // force iPhone's native controls
                    iPhoneUseNativeControls: false,
                    // force Android's native controls
                    AndroidUseNativeControls: false,
                    // forces the hour marker (##:00:00)
                    alwaysShowHours: false,
                    // show framecount in timecode (##:00:00:00)
                    showTimecodeFrameCount: false,
                    // used when showTimecodeFrameCount is set to true
                    framesPerSecond: 25,
                    // turns keyboard support on and off for this instance
                    enableKeyboard: true,
                    // when this player starts, it will pause other players
                    pauseOtherPlayers: false,
                    poster: posterImg,
                    success: function (mediaElement, domObject, instance) { 
                    
                    //make the medialement instance accesible by storing it. usually not necessary but safari has problems since wp version 4.9
                    $.AviaVideoAPI.players[ fv.attr('id').replace(/_html5/,'') ] = instance;
                    
                        setTimeout(function()
                        {
                            if (mediaElement.pluginType == 'flash') 
                            {	
                                mediaElement.addEventListener('canplay', function() { fv.trigger('av-mediajs-loaded'); }, false);
                            }
                            else
                            {
                                fv.trigger('av-mediajs-loaded').addClass('av-mediajs-loaded');
                            }
                                
                            mediaElement.addEventListener('ended', function() {  fv.trigger('av-mediajs-ended'); }, false);  
                            
                        },10);
                        
                    },
                    // fires when a problem is detected
                    error: function () { 
                
                    },
                    
                    // array of keyboard commands
                    keyActions: []
                    });
                        
                    });
                }
        
				//activate html5 video player
                if($.fn.avia_html5_activation_mod && $.fn.mediaelementplayer) {
                    $('.avia-video, .avia-audio', 'body').each(function() {
                        var container = $(this);
                        var video = container.find('.avia_video');
                        container.empty();
                        video.clone().appendTo(container).addClass('reloaded');
                        container.find('.reloaded').avia_html5_activation_mod({ratio:'16:9'});
                    });
                }
			});
		})(jQuery);
	</script>
	<?php
}

Best regards,
Ismael

Hi,

The videos are playing when I check the page and there’s the full screen icon. I also rechecked it on my own installation. (see private field)
There is no available filter for it, unfortunately, and you can’t stop the default script from initializing without removing it directly from the script file.

Best regards,
Ismael

Hi,

It didn’t work when I retested it but I found the bug. Please try the script again.

// https://imgur.com/a/DUVHjGn

Best regards,
Ismael

Hi,

Great, glad you got it working :-)

Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,

@hooman: We cannot find the html5 video in the front page. Where did you add it? You might have to directly modify the avia_html5_activation function in the themes/enfold/js/avia.js file, and add the “fullscreen” parameter in the the features array.

features: ['playpause','progress','current','duration','tracks','volume'],

Best regards,
Ismael