我已经用Ionic Framework构建了一个应用程序,其中我有几个我想玩的视频。为此,我创建了一个类似于类别的结构,您可以通过单击导航到视频播放器的视频标题来访问每个不同的视频,这是一个包含视频标签的简单html页面
<video controls style="background:#000;width:100%;" playsinline></video>
在我的视频播放器控制器中,我有一个逻辑,将正确的视频放在看起来像的标签中
function ($scope, $rootScope, $stateParams, $filter) {
$scope.video = $filter('getById')($rootScope.videos, $stateParams.videoId);
$scope.videoUrl = 'video/' + $rootScope.category + '/' + $stateParams.videoId + '#t=0';
$scope.playVideo = function(){
var vidURL = $scope.videoUrl;
var myVideo = document.getElementsByTagName('video')[0];
myVideo.src = vidURL;
myVideo.load();
myVideo.play();
}
$scope.playVideo();
}
基本上一切都适用于前15个视频播放,一旦我播放超过15个视频,播放图标变为“禁止”,如果它已被禁用,并且无法再播放视频,除非我关闭应用并再次打开它。
这只发生在设备上,从浏览器和iOS模拟器都可以很好地工作
xcode错误日志中没有错误出现。
看起来应用程序可以在同一视图中加载15个视频的限制。
我还尝试将视频放入iframe而不是视频标签
<div class="player" style="background: #000; ">
<iframe src="{{videoUrl}}" width="100%" style="background: #000; position: absolute; height: 100vh" autoplay="0" playsinline></iframe>
</div>
在这种情况下,错误不会发生,但我无法播放视频内联(因为我无法在iframe的内容中插入playsinline标记)
任何想法/建议将不胜感激
IOS不允许超过15个视频标签,我们有相同类型的问题,要解决此问题需要清除视频参考。请使用以下代码。
$('video').each(function(){
var vd = $(this)[0];
vd.pause();
vd.src="";
vd.load();
$(this).remove();
});