Im trying to do an app that is like a Carousel but with videos. The problem is when I load the video in the html tag it loads all videos at once which is not a good thing because its gonna be slow if I have lots of videos. I tried to load the videos on the $ionicSlides.slideChangeEnd event but it only changes the first video.
Is there any libraries like a lazy loading for videos for ion-slides? Im kinda lost right now on how to solve the problem. Any tips are appreciated thanks.
controller.js
.controller('Ctrl', function($scope, $ionicModal) {
var videos = [{
id: 1,
videoUrl: 'videos/video1.mp4'
}, {
id: 2,
videoUrl: 'videos/video2.mp4'
}, {
id: 3,
videoUrl: 'videos/video3.mp4'
}, {
id: 4,
videoUrl: 'videos/video4.mp4'
}];
$scope.options = {
loop: false,
direction: 'horizontal',
speed: 500,
pagination: false
}
$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
// data.slider is the instance of Swiper
$scope.slider = data.slider;
});
$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
console.log("Change Start");
});
$scope.$on("$ionicSlides.slideChangeEnd", function(event, data){
var v =document.getElementById("myvideo");
$scope.activeIndex = data.slider.activeIndex;
$scope.previousIndex = data.slider.previousIndex;
v.src = videos[data.slider.activeIndex].videoUrl;
v.load();
v.play();
});
});
video.html
<ion-content scroll="false">
<ion-slides options="options" slider="data.slider">
<ion-slide-page ng-repeat="video in videos">
<video id="myvideo" loop autoplay class="video-js" webkit-playsinline >
</video>
</ion-slide-page>
</ion-slides>
</ion-content>
将 preload="none" 添加到您的视频并删除自动播放属性。
<video id="myvideo" loop preload="none" class="video-js" webkit-playsinline ></video>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.