我正在使用Ionic
开发一个应用程序,并允许用户上传视频。因此,为了播放视频,我集成了Video.js
库。
但是当我尝试在全屏播放视频时,我遇到了闪烁的问题,当我点击/点击全屏按钮时,它会在全屏上播放大约100 in,然后回到正常屏幕。
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>
视频指令
(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
};
});
})();
那么,我该做些什么来解决这个闪烁的问题呢?
发布于 2016-05-10 06:21:13
试试这个,希望它能帮到你。player.requestFullscreen();
https://stackoverflow.com/questions/37129107
复制相似问题