Question

我需要在每次点击li标签时更改html5视频标记

结构是

<div class="flexslider">
  <ul class="slides">
    <li>
      <video>
        <source type="video/mp4" src="http://techslides.com/demos/sample-videos/small.mp4">
      </video>
    </li>
    <li>
      <video>
        <source type="video/mp4" src="http://techslides.com/demos/sample-videos/small.mp4">
      </video>
    </li>
    <li>
      <video>
        <source type="video/mp4" src="http://techslides.com/demos/sample-videos/small.mp4">
      </video>
    </li>
    <li>
      <video>
        <source type="video/mp4" src="http://techslides.com/demos/sample-videos/small.mp4">
      </video>
    </li>
  </ul>
</div>

<ul id="resultsBox">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
</ul>

因此，当我点击一个时，应该启动视频的第一个li，然后当我点击两个时，那么第一个视频应该是暂停或停止，视频的第二个li应该开始，等等......

我试过像这样的jquery ......

jQuery("#resultsBox li").on('click', function (e) {
    jQuery(".flexslider .slides").contents().find("video").get(0).play();
});

我只播放第一个视频而不播放其他视频。其次，我曾尝试过每个功能，但到目前为止还没有工作。

提前感谢。

Answer 1

您遇到的一个问题是您的回调函数（在click事件发生时调用）不会使用有关单击哪个视频的信息，它只是尝试查找第一个视频并播放它。 / p>

一种解决方法是收听视频元素本身的点击并调用＆＃34;播放＆＃34;在它上面：

jQuery("video").on('click', function (e) {
  this.play();
});

如果您真的需要听取li元素的点击次数，那么您只需要在其中找到该视频（在点击的对象上使用find），然后调用play()在它上面：

jQuery(".flexslider li").on('click', function (e) {
    jQuery(this).find("video")[0].play();
});

注意：我已更改为.flexslider，因为您发送的HTML没有与其他选择器匹配的内容，但如果需要，您可以在那里更新。

这是一个工作示例，以防您想要玩游戏：

https://jsfiddle.net/9s57L492/

Answer 2

使用此代码：

jQuery("#resultsBox li").on('click', function (e) {
 let itemIndex = jQuery(this).index();
jQuery(".flexslider li").eq(itemIndex).siblings('li').find('video').pause();

   jQuery(".flexslider li").eq(itemIndex).find("video").play();
});

Answer 3

<div class="flexslider">
    <div class="slides">
        <li id="one">
            <video controls>
                <source type="video/mp4" src="########sample.mp4">
            </video>
        </li>
        <li id="two">
            <video controls>
                <source type="video/mp4" src="########sample.mp4">
            </video>
        </li>
        <li id="three">
            <video controls>
                <source type="video/mp4" src="########sample.mp4">
            </video>
        </li>
    </div>
</div>
<ul class="resultsBox">
    <li data-target="one">One</li>
    <li data-target="two">Two</li>
    <li data-target="three">Three</li>
</ul>

<script>
$(document).ready(function(){
    $(".resultsBox li").on("click", function(event){
        var targetId = $(this).data("target");
        var targetElement =  $("#" + target + " video");
        if(!targetElement.paused) {
            $("video")[0].pause()
            targetElement[0].play(); 
        }
    });
});
</script>

在每次点击活动中进行视频播放/暂停

3 个答案: