私は私のビデオプレーヤーで再生をクリックすると、それは私がカスタムHTML5でビデオプレーヤーを作成しようとしていると私はそれがページ上の両方のビデオを果たしているトップ動画で再生押すとページ

Question

に両方のビデオを果たしています。あなたは私はあなたが私が書いたCSSとJavaScriptを見ることができます提供jsfiddleリンクで見てみる場合は

<!--Video 1--> 
<section id="wrapper"> 
    <div class="videoContainer"> 
     <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" > 
      <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" /> 
      <p>Your browser does not support the video tag.</p> 
     </video> 
     <div class="caption">Video1</div> 
     <div class="control"> 
      <div class="btmControl"> 
       <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div> 
       <div class="progress-bar"> 
        <div class="progress"> 
         <span class="bufferBar"></span> 
         <span class="timeBar"></span> 
        </div> 
       </div> 
       <!--<div class="volume" title="Set volume"> 
       <span class="volumeBar"></span> 
       </div>--> 
       <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div> 
       <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div> 
      </div> 
     </div> 
    </div> 
</section> 

<!--Video 2--> 
<section id="wrapper"> 
    <div class="videoContainer"> 

     <video id="myVideo" controls preload="auto" poster="http://s.cdpn.io/6035/vp_poster.jpg" width="380" > 
      <source src="http://html-testing.github.io/2/videos/mikethefrog.mp4" type="video/mp4" /> 
      <p>Your browser does not support the video tag.</p> 
     </video> 
     <div class="caption">Video2</div> 
     <div class="control"> 
      <div class="btmControl"> 
       <div class="btnPlay btn" title="Play/Pause video"><span class="icon-play"></span></div> 
       <div class="progress-bar"> 
        <div class="progress"> 
         <span class="bufferBar"></span> 
         <span class="timeBar"></span> 
        </div> 
       </div> 
       <!--<div class="volume" title="Set volume"> 
       <span class="volumeBar"></span> 
       </div>--> 
       <div class="sound sound2 btn" title="Mute/Unmute sound"><span class="icon-sound"></span></div> 
       <div class="btnFS btn" title="Switch to full screen"><span class="icon-fullscreen"></span></div> 
      </div> 

     </div> 
    </div> 
</section> 

：http://jsfiddle.net/BannerBomb/U4MZ3/27/

ここに私のHTMLです：

は、ここに私のjsfiddleです。

Answer 1

私は何が起こっているかを説明しますので、それは非常に長い時間がかかるだろうと変更するので、多くのコードがあります。

あなたはクラスセレクタで選択する要素（複数可）のクラスやアニメーションを行うされているほぼすべてのあなたのイベントの上。両方の動画で共有されている要素を選択しているため、1つしかクリック/ホバーされていないときに両方の動画に影響します。

$('.btnPlay').on('click', function() { playpause(); }); 

.btnPlay（どちらかからのビデオ）のいずれかをクリックしたときにここでは、一時停止機能を呼び出しています。

$(this)またはthisをクリックしたビデオと、親/子セレクタの組み合わせを選択するだけで、クリック/ホバーされたビデオのアクションを実行していることを確認する必要があります。あなたは間違ってやっている

カップルの事：

1. Idsはユニークですが、あなたは両方のvideoid="myVideo"を与えることはできませんが、彼らは異なるIDや同じクラスが必要です。あなたが書いたあなたのJSで
2. 、IDSは、したがって、あなただけとにかくそのidを持つ最初の要素をつかんでいる一意であるため、実行することはできませんvideo = $("#myVideo")後video[0]。 video[0]はいくつかのコードでうまく動作しますが、idセレクタには適切な場所がありません。

親/子セレクタを使用して、正しいビデオを選択していることを確認するか、コードをコピーして2番目のビデオに対して別々に実行することをおすすめします（最初のコードを修正し、セレクターは#myVideoを使用していません）。

あなたはこのフィドルを見れば私はあなたのコマンドは、それを選択されない第二.videoContainer内のすべてのクラスの後に「2」を追加しました。

http://jsfiddle.net/U4MZ3/30/