离子/角度离子滑动视频延迟加载

时间:2017-04-13 06:25:38

标签: javascript angularjs ionic-framework ionic-view

我正在尝试做一个类似转盘但有视频的应用。问题是当我在html标签中加载视频时,它会立即加载所有视频,这不是一件好事,因为如果我有很多视频,它会很慢。我尝试在$ ionicSlides.slideChangeEnd事件上加载视频,但它只更改了第一个视频。

是否存在像延迟加载离子幻灯片视频的库?我现在有点失去了如何解决问题。感谢任何提示。

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>

0 个答案:

没有答案