Unable to view fullscreen video

[tushargosalia]

I'm developing an application using Ionic and in that I'm allowing user to upload videos. So for playing videos I have integrated Video.js library.

But when I try to play video in fullscreen, I'm experiencing flickering issue i.e. when I tap/click on fullscreen button causes it to go on full screen for like 100ms then come back to normal screen.

Video.html

<ion-view view-title="Video">
    <ion-content class="padding">
        <input type="file" name="file" accept="video/*;capture=camera" tg-file-select id="fileSelect">
        <h3>Upload Video</h3>
        <video class="video-js vjs-default-skin vjs-big-play-centered" width="640" height="240" videojs></video>
        <div class="row">
            <button type="button" class="button button-assertive" ng-click="uploadVideo()" style="margin: auto;">Upload Video</button>
        </div>
    </ion-content>
</ion-view>

Videojs Directive

(function() {
    'use strict';
    angular.module('starter')
        .directive('videojs', function($sce) {
            var linker = function(scope, element, attrs) {
                var player;
                attrs.type = attrs.type || "video/mp4";

                var setup = {
                    'techOrder': ['html5', 'flash'],
                    'controls': true,
                    'preload': 'auto',
                    'autoplay': false,
                    'fluid': true
                };

                attrs.id = "aboutmeVideo";
                element.attr('id', attrs.id);
                player = videojs(attrs.id, setup, function() {
                    var source = { type: "video/mp4", src: $sce.trustAsResourceUrl("somefileURL") };

                    this.src({ type: attrs.type, src: source.src });
                });

                scope.$on('NEW_VIDEO', function(event, videoURL) {
                    videojs('aboutmeVideo').src({ type: 'video/mp4', src: videoURL });
                });
            };
            return {
                restrict: 'A',
                link: linker
            };
        });
})();

So what should I do to resolve this flickering issue?

[gkatsev]

Some of the libraries like Ionic end up including the fastclick library in the distribution, that tends to cause havoc with our buttons.

[tushargosalia]

Thanks for reply..so is there any way I can get rid of this flickering issue?

[gkatsev]

I just realized we already had another issue about this: #2887. But the way to fix it is to have ionic (or if you're also using angular, it seems like angular 1.5 disabled this, maybe (angular/angular.js#6251)) not do the whole "fastclick" thing. There isn't a good way of fixing it on videojs's side.

[hirenkv]

Hello,

I am also facing same issue with video js on ionic. Any help will be appreciated.

[vinothyada]

I am also facing same issue..

[dylanjha]

Holy hell this took me forever to figure out

[MikeSperone]

In the event anyone else still has to use fastclick with videojs, and comes across this issue (as I did)...
I was able to remove the buttons from fastclick's handler by adding a classname of needsclick to all the buttons. The trick though, was that you need to add that to the span inside the button element, not the button itself.

I was able to fix it by adding the following 2 lines to my playerReady callback function:

    const playButtons = videoNode.parentNode.querySelectorAll('button span.vjs-icon-placeholder');
    playButtons.forEach(b => b.className += ' needsclick');

Where videoNode is your videojs target node. Not sure this will fix all the buttons in videojs, but it got all the buttons I needed to fix.