###前提・実現したいこと
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
上記サイトに動画の終了を条件に次の動画を再生させるスクリプトがあり、
これを応用できないかと思いましたが、
イベント名などまだ調べられておらず、実際に自分でコードを書けていません。
回答1件
あなたの回答
tips
プレビュー