在Jquery bx滑块插件中如何找到当前滑块是图像还是视频

Question

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);  
        }  
    });  
});  

Answer 1

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>