Video.js : Unable to view fullscreen video

Question

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 });
                    });

                    $('button.vjs-fullscreen-control').on('click', function(e) {
                        e.preventDefault();
                        console.log('FullScreen Clicked');
                        player = videojs('aboutmeVideo');
                        if (player.isFullscreen()) {
                            player.exitFullscreen();
                        } else {
                            player.requestFullscreen();
                        }
                    });
                    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?

Answer 1

Try this, Hope it will help you. player.requestFullscreen();

Answer 2

Odds are that vjs adds its own click handler to the vjs-fullscreen-control button causing your click handler to run after vjs sets the video to run in fullscreen mode, toggling it off rather than on (or the other way around).

Try removing your click handler altogether.