「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

videoタグの再生終了後にposterを表示させる方法

f:id:pochiweb:20170912223430p:plain

posterの再表示で詰まる

HTML5のvideoタグは使い方も簡単ですし、動画がトップにどーんとあるだけで、サイトの印象を一気に変えることができるので重宝しますよね。

再生のループや待機画像(poster)なんかの設定もHTMLだけで完結できて、とても使いやすく出来ています。

そんなvideoタグですが、先日ちょっと詰まってしまったことがありました。

「アクセス時は自動再生して、再生終了したらループはさせないで、posterを表示させて。」

videoタグには色々と便利なイベントが用意されていたので、その方向で調べるも撃沈。結果的には以下の内容で対応しました。

posterが表示されるのは再生されるまで

早速コードを。

HTML

videoタグ再生後、posterを再表示させる

JS

videoタグの再生後にposterの画像を表示させる

 

ずーっと、どうしたらposterを表示できるのか考えていたのですが、ググっても出てこず。ふと、autoplayをオフにしてた時はposterが表示されていたな、と思い出し、上記のような方法に落ち着きました。

HTML上ではautoplayをオンにしておいて、1度目は再生させて、videoタグに用意されているイベントのendedが発生したタイミングでloadメソッドで再読み込み、読み込み終了後、autoplayをオフに。

こうすることで、videoが読み込まれたけど、再生はされない→posterが表示される、という状況を作ることが出来ました。

実はこの方法にたどり着くまで数日を要していたのですが、終わってみれば処理的には何も難しいことはなかったですね(汗)。

しょっちゅう思うことですが、発想を変える、アプローチを変えるっていうのは本当に大事ですね。思考が凝り固まってないか?常に気にした方がいいなあと感じます。