在Jquery bx滑塊插件中如何找到當前滑塊是圖像還是視頻

Question

如何找到當前滑塊是 bx 滑塊中的圖像或視頻。

如果是視頻，則視頻必須重新加載，如果是圖像，則不要重新加載。 但是我使用的是當我轉到下一個滑塊時重新加載圖像和視頻。

javascript:

$(document).ready(function(){  
    $(".bxslider").bxSlider({  
        onSlideNext: function(){  
            var iframe = $("#frameid").attr('src');  
            $("#frameid").attr('src', iframe);  
        }  
    });  
});  

Answer 1

使用$(ELE).prop('tagName')獲取元素的 tagName。 <video>有 tagName VIDEO而<img>有 tagName IMG 。 因此，您可以在此基礎上執行不同的操作。

或者使用.is('video')來檢查目標元素是否是視頻，因為您只想重新加載video 。

所以你可以寫成：

$(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：如果您只想從頭開始播放video ，我建議您使用

// Set video to start.
video.currentTime = 0;
// If the video has autoplay requirement.
video.play();

由於這不會再次加載視頻，而只是將視頻設置為其起點，因此重新加載視頻不會花費額外的流量。

片段：

 // 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>