How to find the current slider is an image or a video in bx slider.
If it is a video then the video has to reload if it is an image then do not reload. But I am using that the image and video both are reloaded when I go to the next slider.
javascript:
$(document).ready(function(){
$(".bxslider").bxSlider({
onSlideNext: function(){
var iframe = $("#frameid").attr('src');
$("#frameid").attr('src', iframe);
}
});
});
Use $(ELE).prop('tagName')
to get the element' tagName. <video>
has tagName VIDEO
while <img>
has tagName IMG
. So you can then do different actions base on that.
Or use .is('video')
to check if target element is video, as you only want to reload video
.
So you can write as :
$(document).ready(function(){
$(".bxslider").bxSlider({
onSlideNext: function() {
var $target = $("#frameid");
// Another way
// if ($target.prop('tagName') === 'VIDEO') {
if ($target.is('video')) {
var iframe = $target.attr('src');
$target.attr('src', iframe);
}
}
});
});
PS: If you just want the video
to play from start, I'd suggest use
// Set video to start.
video.currentTime = 0;
// If the video has autoplay requirement.
video.play();
As this won't load the video again but just set video to its start point, it won't cost additional traffic to reload the video.
Snippet:
// TagName console.log($('#im').prop('tagName')); console.log($('#vi').prop('tagName')); // .Is console.log($('#im').is('video')); console.log($('#vi').is('video'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <img id="im"/> <video id="vi"></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.