どうも！chuckです。
前回こちらの記事でHTMLのvideoタグについて書きました。
まー、使ってみたはいいものの動かないｗ
しかし今日はリベンジに成功したので書きますヽ(=´▽`=)ﾉ
動かなかった原因
結論から言うと、videoタグにautoplay属性を指定したら動きました。
autoplay : 動画を自動再生する
考えてみれば当然ですよね。videoタグって、動画を埋め込むものであって再生するものではないんですもんね…ヽ(´Д`；)ﾉｱｩｱ…
今回はautoplayという再生指示を出しましたが、他にも再生ボタンなど、何かしら再生をさせるアクションが必要なようです。
せっかくだからなんか作る
せっかくなんで、ちょっとコーディングしましたヽ(=´▽`=)ﾉ
videoタグをメインにして、３つの機能を追加。
１，センタリング機能（画面リサイズ対応）
２，再生・停止ボタン（BootStrapアイコン使用）
３，スマホ対応
できたのがこちら。
http://chuck0523.github.io/front-end-coding/videoTagPractise/index.html
中央に動画が埋め込まれています。画面リサイズにも対応。 動画が常にセンタリングされるようになっていますヽ(=´▽`=)ﾉ
また、再生ボタンと停止ボタンもつけました。
アイコンはみんな大好きBootstrap様より拝借。
スマホで見るとこんな感じ。
動画のセンタリングが止まって、上部に固定されて幅が画面いっぱいに広がります。
まとめ的な
やりました！ついにvideoタグを使うことができました。
最近企業サイトでも、動画を背景に採用しているサイトを見かけます。動画を扱いやすい環境が整ってきましたし、これからは動画コンテンツをサイトに盛り込む機会が増えるのではないでしょうか？？
みなさんもぜひ、試してみてくださいヽ(=´▽`=)ﾉ
書いたコード
参考にしたサイト様
jQueryでvideoタグの再生、停止を操作する方法。jQueryのtrigger()メソッドを使うらしい。
trigger(type, [data]) - jQuery 日本語リファレンス
jqueryのtrigger()についてくわしく
Bootstrapのアイコン一覧。今回は再生アイコンと停止アイコンを利用しました。