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

【问题标题】：Play Pause Video inside a div on a slider在滑块上的 div 内播放暂停视频
【发布时间】：2014-02-07 18:40:40
【问题描述】：

我有一个模仿演示文稿的网站，当单击“下一步”按钮时，图像和视频都会移至下一个。反之，返回按钮。

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

这就是我所做的。

代码

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

【问题讨论】：

标签： jquery html html5-video

【解决方案1】：

您正在尝试在 jQuery 对象上调用 play()。您需要改为在本机视频 DOM 元素上调用它。您可以为此使用 jQuery .get() 函数：

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

或

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

【讨论】：