html5のvideoタグを使ってページ内にある動画の切り替えをしたいです

Question

前提・実現したいこと

html5のvideoタグで1ページに複数の動画があり、再生中の動画を止めると違う動画が再生という風にしたいのですが上手くいきません･･･

該当のソースコード

<div class="videoarea" style="width:400px;">
<video autoplay id="video1" controls>
<source src="1.mp4">
</video>
</div>
<div class="videoarea" style="width:400px;">
<video controls id="video2" style="width:100%;" src="hero02.mp4">
<source src="2.mp4">
</video>
</div>

<script>
$(function(){
	function playVideo(){
		if($('video2')[0].pause){
			$('video2')[0].play();
			$('video1')[0].pause();
		}else{
			$('video2')[0].pause();
		}
	}
});
</script>

試したこと

調べてみたこととして同じような質問
https://teratail.com/questions/95002
のようにソース書いたのですが、上手く行きませんでした･･･
お詳しい方教えて頂ければ幸いです。

Answer 1

playVideo()をどこからも呼んでいないからじゃないですかね・・・

---

• 2018/10/27追記

function playVideo(){
    for(let i = 0; i < $('video').length; ++i) {
        $('video')[i].play();
    }
}

$('video').on('play', playVideo);

これでいいんじゃないでしょうか。
pause()呼んでますが、連動して再生したいのならいちいち止める必要もないでしょうし・・・

Comments

[summy]

ご回答ありがとうございます！
どのように記述すれば動きますでしょうか･･･。

[退会済みユーザー]

遅くなりましたがコード追記しました。