HTML上において同時動画再生

実現したいこと

Videoタグで埋め込んだ下記二つのファイルどちらか再生を押すと、
同時に再生を始めたい。

html
1<video controls autoplay width="100%" height="100%" id="chvid0">
2 <source src="data/A1/A1-1.mp4" class="change">
3</video>
4<video controls autoplay width="100%" height="100%" id="chvid1">
5 <source src="data/A1/A1-2.mp4" class="change">
6</video>

現状

どちらもautoplayのタグをいれることで、HTMLを開いたと同時に二つのコンテンツを同時再生している。
理想は、どちらもまずは再生せず、再生を押下することで同時再生を行いたい。

Javascriptでどのように書けばよいか教えていただきたく思います。

よろしくお願いいたします。

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

回答1件

出来が悪くてすいません。時間があったらより簡単なプログラムを書きます。

こちらの仕組みですがビデオの上に透明な層を上から貼り、その部分をクリックされるとビデオが停止する仕組みになっております。
参考までにご使用ください。

css
1<style type="text/css">
2.video-wrap {
3    position: relative;
4}
5.video-btn {
6    content: "";
7    position: absolute;
8    top:0;
9    left:0;
10    right:0;
11    bottom:40px; /*コントローラー分下部に余白を*/
12    cursor: pointer;
13}  
14</style>

HTML
1<div class="video-wrap">
2    <video controls autoplay loop width="100%" height="100%" id="video0" class="chvid">
3        <source src="http://bitcoin-with.com/codecamp/test-movie.mp4">
4    </video>
5    <div class="video-btn" id="video-btn0"></div>
6</div>
7
8<div class="video-wrap">
9    <video controls autoplay loop width="100%" height="100%" id="video1" class="chvid">
10        <source src="http://bitcoin-with.com/codecamp/test-movie.mp4" class="change">
11    </video>
12    <div class="video-btn" id="video-btn1"></div>
13</div>

JavaScript
1<script>
2  //video要素の取得
3  // var video = document.getElementsByClassName('chvid');
4  var video0 = document.getElementById('video0');
5  var video1 = document.getElementById('video1');
6  //videoボタンの取得
7  var video_btn0 = document.getElementById('video-btn0');
8  var video_btn1 = document.getElementById('video-btn1');
9  // var video_btn = getElementsByClassName('video-btn');
10  //状態保存
11  var btn_status = 0;
12
13  //画面クリックで再生・ポーズ
14  video_btn0.addEventListener('click', function () {
15    if(btn_status === 0) {
16      video0.play();
17      video1.play();
18      btn_status = 1;
19    }else {
20      video0.pause();
21      video1.pause();
22      btn_status = 0;
23    }
24  });
25
26    video_btn1.addEventListener('click', function () {
27    if(btn_status === 0) {
28      video0.play();
29      video1.play();
30      btn_status = 1;
31    }else {
32      video0.pause();
33      video1.pause();
34      btn_status = 0;
35    }
36  });
37</script>