質問編集履歴

1 コードと、参考にしたページを追加しました。

canvas-takahash

canvas-takahash score 5

2017/10/04 15:47  投稿

単一ページの複数動画について、一方の再生に連動させてもう一方の再生を止める方法。
###前提・実現したいこと
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
上記サイトに動画の終了を条件に次の動画を再生させるスクリプトがあり、
これを応用できないかと思いましたが、
イベント名などまだ調べられておらず、実際に自分でコードを書けていません。
  • JavaScript

    24247 questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • HTML5

    6212 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る