Question

如果我指定了#tabs它会找到视频，我认为视频是一个标准的标签声明。我不完全确定我是在拨打错误的标签还是发生了什么事。我正在使用JQuery选项卡和video-js代码来支持此功能。我想如果用户开始观看视频并希望通过访问另一个标签返回到该视频，则未选择的标签中的视频应该停止。但是，我不确定如何使这个工作，请帮助。这是我的代码，也许有人可以告诉我我做错了什么？

<html>
<head>
  <link href="http://vjs.zencdn.net/5.18.4/video-js.css" rel="stylesheet">
  <!-- If you'd like to support IE8 -->
  <script src="http://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Video Library</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#tabs" ).tabs();
  } );
  $('#tabs').on('click', function() {
  $("my-video").each(function () { this.pause() });
});
  </script>
  </head>
<body>
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">About us</a></li>
    <li><a href="#tabs-2">Features</a></li>
    <li><a href="#tabs-3">Fabrics</a></li>
    <li><a href="#tabs-4">Special Fabrics</a></li>
    <li><a href="#tabs-5">Standard Fabrics</a></li>
    <li><a href="#tabs-6">Care Instructions</a></li>
    <li><a href="#tabs-7">How It's Made</a></li>
    <li><a href="#tabs-8">Women's Coats</a></li></ul>
  <div id="tabs-1"><br>
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="imgs/about_factory.jpg" data-setup="{}">
    <source src="sources/about-our-factory.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  </div>
    <div id="tabs-2">
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="imgs/coat_features.jpg" data-setup="{}">
    <source src="sources/coat-features-coat-profile.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video></div>
  <div id="tabs-3">
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="imgs/fabrics.jpg" data-setup="{}">
    <source src="sources/cotton-fabrics.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  </div>
  <div id="tabs-4">
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="imgs/specialty_fabrics.jpg" data-setup="{}">
    <source src="sources/specialty-fabrics.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  </div>
  <div id="tabs-5">
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="imgs/coat_fabrics.jpg" data-setup="{}">
    <source src="sources/fabrics.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  </div>
  <div id="tabs-6">
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="imgs/care_instructions.jpg" data-setup="{}">
    <source src="sources/how-to-care-for-your-lab-coat.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  </div>
  <div id="tabs-7">
    <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="imgs/how_its_made.jpg" data-setup="{}">
    <source src="sources/how-we-make-your-lab-coat.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  </div>
  <div id="tabs-8">
  <video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="imgs/womens_coats.jpg" data-setup="{}">
    <source src="sources/womens-coats.mp4" type='video/mp4'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>
  <script src="http://vjs.zencdn.net/5.18.4/video.js"></script>
</div>
</body>
</html>

Answer 1

您可以将一个函数附加到选项卡的初始化，这些选项卡会在选项卡更改时触发，以允许您循环并暂停每个视频：

$(function() {
  $( "#tabs" ).tabs({
    activate: function( event, ui ) {  $(".video-js").each(function (i,obj) { this.pause() })  }
  });
} );

或者您可以为标签激活添加事件绑定：

$(function() { 
  $( "#tabs" ).on( "tabsactivate", function( event, ui ) { $(".video-js").each(function (i,obj) { this.pause() })  } );
});

请注意，视频的选择器位于课程上，而不是示例问题中的ID

强制html5视频在jquery选项卡上停止更改

1 个答案: