I have developed an application using the Ionic Framework that includes multiple videos for playback. To organize these videos, I created a category system where users can click on a video title to access the corresponding video player page. The video player page contains a simple HTML structure with a video tag:
<video controls style="background:#000;width:100%;" playsinline></video>Within the video player controller, I implemented logic to display the correct video in the tag:
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();
}Everything works smoothly for the first 15 videos played, but after that, the play icon becomes disabled and no further videos can be played without restarting the app.
https://i.sstatic.net/5H2J6.jpg
This issue only occurs on devices, as it functions correctly in browsers and iOS simulators.
No errors are reported in the Xcode log.
It appears there is a limitation of loading only 15 videos in the same view within the app.
I attempted to use an iframe instead of the video tag:
<div class="player" style="background: #000; ">
<iframe src="{{videoUrl}}" width="100%" style="background: #000; position: absolute; height: 100vh" autoplay="0" playsinline></iframe>
</div>While this resolved the error, I encountered difficulties playing the video inline due to the inability to include the playsinline tag within the iframe content.
Any suggestions or insights would be greatly appreciated.