Ionic/Angular 离子幻灯片视频延迟加载

Question

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>

Answer 1

将 preload="none" 添加到您的视频并删除自动播放属性。

<video id="myvideo" loop preload="none" class="video-js" webkit-playsinline ></video>