Video.js：无法查看全屏视频

Question

我正在使用Ionic 开发一个应用程序，并且允许用户上传视频。所以为了播放视频我集成了Video.js库。

但是当我尝试全屏播放视频时，我遇到了闪烁问题，即当我点击/单击全屏按钮时，它会全屏显示大约 100 毫秒，然后返回正常屏幕。

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 指令

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

那么我应该怎么做才能解决这个闪烁的问题呢？

Answer 1

试试这个，希望对你有帮助。 player.requestFullscreen();