videoタグで動画再生終了時に画面遷移させる【HTML5・JavaScript】

2020年2月16日 HTML5, JavaScript

こんばんわ、株式会社37Designの古田です。

今日はウェブサイトのカスタマイズの作業を行いまいした。

ヘッダー部分の動画を差し込んでいるウェブサイトなのですが、この動画の再生終了時に画面を遷移させてほしいとの依頼がありました。

動画の自動再生

HTML5のタグである<video>タグにて下記のようにソースを指定していました。

<video playsinline muted autoplay loop>
    <source src="hogehoge.mp4">
</video>

基本的には「playsinline」がインライン動画、「muted」が音声を消した状態、「autoplay」が自動再生、「loop」がループ再生ということです。

このように書いてあげることで、「hogehoge.mp4」の動画が自動的に再生される状態だということです。

今回はこの自動再生の動画について動画再生後のページ遷移を行うということで設定を行いました。

基本的には<video>タグのみでやっていく簡単な方法となります。

基本的にはループの解除と遷移先の指定ということで行うことが可能です。

まずはループ再生の解除を行う必要があります。

ループ再生の解除を行わないと動画終了時に再びループ再生が行われるため、ページ遷移のタグが効かなくなります。

なのでまずはループを解除します。

<video playsinline muted autoplay>
    <source src="hogehoge.mp4">
</video>

先ほどの<video>タグから「loop」の文字の削除を行いました。

これでループは解除されます。

ブラウザで確認してもループ再生はされていないはずです。

そしてその次は遷移先のウェブページであるURLを記述してあげます。

具体的には下記の記述をしてあげるということですね

onended="location.href='https://37design.co.jp';"

onendedで再生終了時という意味になります。

また、location.href=’遷移先URL’;ということでURLを指定してあげると、再生終了時にロケーションが切り替わるという命令を出すことが可能です。

上記の例では弊社URL（37design.co.jp）になっていますが、遷移先URLに変更することを忘れないようにしましょう。

最終的には下記のように記述します。

<video playsinline muted autoplay onended="location.href='https://37design.co.jp'; ">
    <source src="hogehoge.mp4">
</video>

これで、HTML中の埋め込み動画「hogehoge.mp4」の再生完了がトリガーとなって、現在のURLから「https://37design.co.jp」へ遷移するということが実現できました。

なかなか使いどころは難しいかもしれませんが、このように遷移させることが可能ですので、覚えておけばいいかと思います。

ランディングページなどで、動画終了時に遷移させたい場合などにも使えるんじゃないでしょうか。

今回は作業としてはもう少し複雑な作業となったのですが、このようにウェブサイトの中でもHTML5とJavaScriptを使っていろんな仕掛けを作ってあげることが可能です。

お問い合わせ