videoタグの再生終了後にposterを表示させる方法
posterの再表示で詰まる
HTML5のvideoタグは使い方も簡単ですし、動画がトップにどーんとあるだけで、サイトの印象を一気に変えることができるので重宝しますよね。
再生のループや待機画像（poster）なんかの設定もHTMLだけで完結できて、とても使いやすく出来ています。
そんなvideoタグですが、先日ちょっと詰まってしまったことがありました。
「アクセス時は自動再生して、再生終了したらループはさせないで、posterを表示させて。」
videoタグには色々と便利なイベントが用意されていたので、その方向で調べるも撃沈。結果的には以下の内容で対応しました。
posterが表示されるのは再生されるまで
早速コードを。
HTML
JS
ずーっと、どうしたらposterを表示できるのか考えていたのですが、ググっても出てこず。ふと、autoplayをオフにしてた時はposterが表示されていたな、と思い出し、上記のような方法に落ち着きました。
HTML上ではautoplayをオンにしておいて、1度目は再生させて、videoタグに用意されているイベントのendedが発生したタイミングでloadメソッドで再読み込み、読み込み終了後、autoplayをオフに。
こうすることで、videoが読み込まれたけど、再生はされない→posterが表示される、という状況を作ることが出来ました。
実はこの方法にたどり着くまで数日を要していたのですが、終わってみれば処理的には何も難しいことはなかったですね（汗）。
しょっちゅう思うことですが、発想を変える、アプローチを変えるっていうのは本当に大事ですね。思考が凝り固まってないか？常に気にした方がいいなあと感じます。
