読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

HTML5のvideoタグが使えたよー!ついでに再生・停止ボタンとスマホ対応も実装

HTML jQuery

どうも!chuckです。

前回こちらの記事でHTMLのvideoタグについて書きました。

 

chuckwebtips.hatenablog.com

 

まー、使ってみたはいいものの動かないw

 

しかし今日はリベンジに成功したので書きますヽ(=´▽`=)ノ

 

 

動かなかった原因

結論から言うと、videoタグにautoplay属性を指定したら動きました。

autoplay : 動画を自動再生する

 

考えてみれば当然ですよね。videoタグって、動画を埋め込むものであって再生するものではないんですもんね…ヽ(´Д`;)ノアゥア…

今回はautoplayという再生指示を出しましたが、他にも再生ボタンなど、何かしら再生をさせるアクションが必要なようです。

 

せっかくだからなんか作る

せっかくなんで、ちょっとコーディングしましたヽ(=´▽`=)ノ

videoタグをメインにして、3つの機能を追加。

1,センタリング機能(画面リサイズ対応)

2,再生・停止ボタン(BootStrapアイコン使用)

3,スマホ対応

 

できたのがこちら。

f:id:chuck0523:20150711115857p:plain

http://chuck0523.github.io/front-end-coding/videoTagPractise/index.html

 

中央に動画が埋め込まれています。画面リサイズにも対応。 動画が常にセンタリングされるようになっていますヽ(=´▽`=)ノ

 

 また、再生ボタンと停止ボタンもつけました。

f:id:chuck0523:20150711115748p:plain

アイコンはみんな大好きBootstrap様より拝借。

 

スマホで見るとこんな感じ。

 

f:id:chuck0523:20150711115759p:plain

動画のセンタリングが止まって、上部に固定されて幅が画面いっぱいに広がります。

 

 

まとめ的な 

やりました!ついにvideoタグを使うことができました。

最近企業サイトでも、動画を背景に採用しているサイトを見かけます。動画を扱いやすい環境が整ってきましたし、これからは動画コンテンツをサイトに盛り込む機会が増えるのではないでしょうか??

みなさんもぜひ、試してみてくださいヽ(=´▽`=)ノ

 

書いたコード

gistfe4fd851f85b80d5c301

 

参考にしたサイト様

wonderdesigners.com

jQueryでvideoタグの再生、停止を操作する方法。jQueryのtrigger()メソッドを使うらしい。

 

trigger(type, [data]) - jQuery 日本語リファレンス

jqueryのtrigger()についてくわしく

 

getbootstrap.com

Bootstrapのアイコン一覧。今回は再生アイコンと停止アイコンを利用しました。