在jquery选项卡更改时强制html5视频停止_Html_Video_Jquery Ui Tabs

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

html video

在jquery选项卡更改时强制html5视频停止,html,video,jquery-ui-tabs,Html,Video,Jquery Ui Tabs,我的印象是，如果我指定#tabs，它会找到视频，因为它似乎是一个标准的标记声明。我不能完全确定我是不是打错了标签或者发生了什么。我正在使用JQuery选项卡和视频js代码来支持这个功能。我在想，如果一个用户开始观看一个视频，并希望通过访问另一个选项卡返回到该视频，那么未选中选项卡中的视频应该停止。但我不太清楚该怎么做，请帮忙。这是我的密码，也许有人能告诉我我做错了什么 <html> <head> <link href="http://vjs.zencdn.net

我的印象是，如果我指定#tabs，它会找到视频，因为它似乎是一个标准的标记声明。我不能完全确定我是不是打错了标签或者发生了什么。我正在使用JQuery选项卡和视频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>


视频库
$（函数（）{
$（“#制表符”）.tabs（）；
} );
$（'#制表符'）。在（'单击'，函数（）上）{
$（“我的视频”）.each（函数（）{this.pause（）}）；
});












若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器


若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器


若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器


若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器


若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器


若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器


若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器


若要查看此视频，请启用JavaScript，并考虑升级到Web浏览器

您可以为选项卡的初始化附加一个功能，当选项卡更改时，该功能将触发，以允许您循环并暂停每个视频：

$(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上

您需要捕获jQuery事件，以便在该选项卡上显示/隐藏和播放/暂停视频确定，这是有意义的，但如何操作？我的印象是，如果我调用了#tabs，就会捕获jqueryui选项卡声明。