単一ページの複数動画について、一方の再生に連動させてもう一方の再生を止める方法。

###前提・実現したいこと
html5のvideoタグで、単独ページ内に2箇所、mp4の動画Aと動画Bを埋め込んでいます。
最初にページを開いた時は動画Aがループで自動再生され、動画Bは停止しています。
それぞれにcontrolsでコントローラーを設置しています。

やりたいことは
動画Bの再生を始めた時、これに連動して動画Aを停止させることです。
動画Bを停止した際に動画Aを再生する必要はありません。

javascriptで制御することになりそうですが
その方面に明るくないため、
何卒、お知恵を拝借させてください。

今ある動画まわりのコードは以下のとおりです。

<div class="mainvisual videoarea">
<video autoplay loop id="video1" muted controls>
  <source src="hogehoge1.mp4" onclick="this.play()" poster="hogehoge1.jpg">
  <p><img src="hogehoge1.jpg" style="width:100%; height:auto"></p>
</video>
</div>
<div class="videoarea">
<video controls id="video2">
  <source src="hogehoge2.mp4" onclick="this.play()" poster="hogehoge2.jpg">
  <p><img src="hogehoge2.jpg" style="width:100%; height:auto"></p>
</video>
</div>

調べてみたこととして
http://chicketen.blog.jp/archives/6539298.html
上記サイトに動画の終了を条件に次の動画を再生させるスクリプトがあり、
これを応用できないかと思いましたが、
イベント名などまだ調べられておらず、実際に自分でコードを書けていません。

m.ts10806

2017/10/04 06:23

調べてみたこと、やってみたことがあれば追記してください。現時点のソースコードもあわせてご提示ください。

n-takahash

2017/10/04 13:55

ご指摘ありがとうございました。コードのほか、参考にした方法も追加することで、無事に解決案をいただくことができました。

行動規範の内容に同意します

回答1件

ベストアンサー

見た感じですと、onClickの引数以外にjavascriptのソースが
使われてなさそうなので。

あまり、きれいではないですがあまり改変のない簡単な方法を一つ
jQueryが必要なソースですが

javascript
1// 要 jQuery
2$(function(){
3  function playVideo(){
4    if($('video2')[0].paused){
5      $('video2')[0].play();
6　　　// video1を同時に制御
7      $('video1')[0].pause();
8    }else{
9      $('video2')[0].pause();
10    }
11  }
12});

html
1<div class="mainvisual videoarea">
2<video autoplay loop id="video1" muted controls>
3  <source src="hogehoge1.mp4" onclick="this.play()" poster="hogehoge1.jpg">
4  <p><img src="hogehoge1.jpg" style="width:100%; height:auto"></p>
5</video>
6</div>
7<div class="videoarea">
8<video controls id="video2">
9  <source src="hogehoge2.mp4" onclick="playVideo()" poster="hogehoge2.jpg">
10  <p><img src="hogehoge2.jpg" style="width:100%; height:auto"></p>
11</video>
12</div>