在滑块上的div内播放暂停视频

Question

我有一个模仿演示文稿的网站，其中当单击“下一步”按钮时，图像和视频都会移动到下一个。反向用于后退按钮。

问题是，当单击“下一步”按钮时，我正在努力播放视频。如何在单击下一个按钮时在下一页上播放视频（并在当前页面上暂停视频），并在单击“后退”按钮时对上一页进行同样的操作？

这就是我所做的。

代码

  <div class="example1">
        <video  class="example1" width="220" height="180" controls  false>
          <source src="./files/videos/myvideo.mp4" type="video/mp4">
        </video>

        <div style="clear:float ;height: 10px;"></div>
        <span class="presented">Presented by: </span>
        <a href="#" class="presenter black">A Presenter</a>
        <span class="slide-count">Slide <strong>3 of 6</strong></span> 
  </div>

JS

$(document).ready(function(e) {


    var $curr = $( "#start" );
    $curr.css( "height" , "" );

    $( ".back" ).click(function() {
      $curr = $curr.prev();
      var styles = {
          display: "block"
        };

        var default_styles = {
          display: "none"
        };
      $( "div.example" ).css( default_styles );
      $curr.css( styles );
    });


    $( ".forward" ).click(function() {

      $curr = $curr.next();
    var styles = {
          display: "block"
        };

        var default_styles = {
          display: "none"
        };
      $( "div.example" ).css( default_styles );
      $curr.css( styles );
    });


    var $curr1 = $( "#start1" );
    $curr1.css(  "height" , "" );

    $( ".back" ).click(function() {
      $curr1 = $curr1.prev();
      var styles = {
          display: "block"
        };

        var default_styles = {
          display: "none"
        };
      $( "div.example1" ).css( default_styles );
      $curr1.css( styles );
    });


    $( ".forward" ).click(function() {

      $curr1 = $curr1.next();
    var styles = {
          display: "block"
        };

        var default_styles = {
          display: "none"
        };
      $( "div.example1" ).css( default_styles );
      $curr1.css( styles );

      //$curr1.children('video').play();
      //$curr1.children('video').attr({'autoplay':'true'});


    });






});

我在jQuery中尝试过但无法正常工作

  $curr1.children('video').play();
  $curr1.children('video').attr({'autoplay':'true'});
  $("#example2 video.example1").play();

Answer 1

您正试图在jQuery对象上调用play()。您需要在原生视频DOM元素上调用它。您可以使用jQuery .get()函数：

$curr1.children('video').get(0).play();

或

$curr1.children('video')[0].play();