Video.js:无法查看全屏视频
Video.js : Unable to view fullscreen video
我正在使用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将视频设置为全屏模式运行后,点击处理程序运行,将其关闭而不是打开(或相反)。
尝试完全删除您的单击处理程序。
相关文章:
- 为什么可以'我在视频js中查看HLS
- html5视频播放器和视频js之间的关系
- 使用视频js功能触发多个视频
- 视频.js 请求安卓 4 上的全屏
- 如何在使用视频JS时动态加载视频URL
- 大视频.js在 Rails 路由错误中
- 播放嵌入式YouTube视频JS
- 显示视频JS的视频持续时间
- 视频.JS - 一次在确切时间触发多个事件
- 在实例化时检查视频.js对象的更好方法
- 关闭浏览器控制台中的视频.js警告
- 视频.js - 使其以不同的大小响应
- 我的视频js Vast 播放器无法加载视频闪光广告
- 在iPad上播放的视频-JS问题(仅声音)
- 视频.js最后一帧图像
- 触摸设备中的视频JS播放器覆盖按钮
- 在页面的 ajax 加载部分上初始化视频.js播放器
- 使用 ng-repeat angularjs 视频 js 显示 Vimeo VideoJS
- 大视频.js - 检查浏览器是否支持,背景图像回退
- 视频.js - 更新字幕/字幕