This script is working on pc
- I have video in my slider which works on my pc but when i tried to test my website on my smartphone(Galaxy Note 3)...it doesnt owrk...the video must play when the page loads when document is ready or active slide is video...
Html
<div class="flexslider" id="slider">
<ul class="slides">
<li id="slide1">
<video id="myVideo" src="Videos/New York City - Time Lapse.mp4" style="width:100%;"></video>
<div class="flex-caption text-center">
<h1 class="head">Time To Grow Your Business !</h1>
<div class="line">
<hr>
</div>
<div class="parWrap">
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis.</p>
<button type="button" class="shareHead animated flipInY">Share <span class="glyphicon glyphicon-heart"></span> Heart</button>
</div>
<button type="button" class="playPause">Pause</button><br>
</div>
</li>
<li id="slide2">
<img src="Images/Slider Images/image1.jpg" class="img-responsive">
<div class="flex-caption text-center">
<h1 class="head">Time To Grow Your Business !</h1>
<div class="line">
<hr>
</div>
<div class="parWrap">
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis</p>
<button type="button" class="shareHead animated flipInY">Share <span class="glyphicon glyphicon-heart"></span> Heart</button>
</div>
</div>
</li>
<li id="slide3">
<img src="Images/Slider Images/image2.jpg" class="img-responsive">
<div class="flex-caption text-center">
<h1 class="head">Time To Grow Your Business !</h1>
<div class="line">
<hr>
</div>
<div class="parWrap">
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis</p>
<button type="button" class="shareHead animated flipInY">Share <span class="glyphicon glyphicon-heart"></span> Heart</button>
</div>
</div>
</li>
<li id="slide4">
<img src="Images/Slider Images/image3.jpg" class="img-responsive">
<div class="flex-caption text-center">
<h1 class="head">Time To Grow Your Business !</h1>
<div class="line">
<hr>
</div>
<div class="parWrap">
<p class="paragraph">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis.</p>
<button type="button" class="shareHead animated flipInY">Share <span class="glyphicon glyphicon-heart"></span> Heart</button>
</div>
</div>
</li>
</ul>
</div>
## Script ##
- The video is playing when I click the play button...but how the script works it must autoplay on some conditions not when i click...that works on pc properly only on mobile devices it doesnt work
$(document).ready(function(){
var active_id = $('.flex-active-slide').attr('id');
//if the active slide is the video slide...
if( active_id == "slide1"){
//play the video and pause the slider
myVideo.play();
$('.flexslider').flexslider("pause");
//when the video has ended, go to the next slide and play the slider
myVideo.onended = function(){
$('.flexslider').flexslider("next");
$('.flexslider').flexslider("play");
}
}
myVideo.pause();
setTimeout(function () {
myVideo.play();
}, 150);
});
