0
#tabsを指定した場合、ビデオは標準タグの宣言であるため、ビデオを見つけることができました。私が間違ったタグを呼んでいるのか、何が起こっているのかは完全にはわかりません。私はJQueryのタブとビデオjsコードを使ってこの機能を利用しています。ユーザーがビデオの視聴を開始し、別のタブを訪れて戻ってくる場合、非選択のタブのビデオは停止する必要があります。しかし、私は正確にどのようにこれを働かせているのか分からない、助けてください。ここで私のコードは、誰かが私が間違って何を言っているかもしれない？jqueryタブでhtml5ビデオを強制的に変更する
<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>
あなたはその上にビデオを表示/隠し、再生/一時停止するためのjQueryイベントをトラップする必要があります – Offbeatmammal
これは意味がありますが、どうですか？ #tabsを呼び出すと、JQueryのUIタブの宣言をキャプチャしていたような印象を受けました。 – bbcompent1