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

Video.js : Unable to view fullscreen video

本文关键字:视频 js Video      更新时间:2023-09-26

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

但当我尝试在全屏中播放视频时,我遇到了闪烁问题,即当我点击/点击全屏按钮时,会导致它在全屏上持续100毫秒,然后返回正常屏幕。

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

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

试试这个,希望它能帮助你。player.requestFullscreen();

有可能vjs在vjs全屏控制按钮中添加了自己的点击处理程序,导致在vjs将视频设置为全屏模式运行后,点击处理程序运行,将其关闭而不是打开(或相反)。

尝试完全删除您的单击处理程序。