CODEWITHSUNDEEP
javascriptangularjsvideoionic-frameworkvideo.js
Tushar
Tushar

Reputation: 1123

Video.js : Unable to view fullscreen video

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?

Upvotes: 2

Views: 2411

Answers (2)

Gal Gur
Gal Gur

Reputation: 1

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.

Upvotes: 0

Mir
Mir

Reputation: 126

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

Upvotes: 1

Related Questions