我正在尝试做一个类似转盘但有视频的应用。问题是当我在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>