html5 動画共有サイトを使用せずHTML5で動画をサイトに埋め込む方法

Article views168 VIEW

3cc0f663 s - html5 動画共有サイトを使用せずHTML5で動画をサイトに埋め込む方法動画共有サイト(Youtubeやニコニコ動画、Dailymotion)を使わず動画を公開したい時がある。

例えば会員限定で動画を公開したい場合だ。

Youtubeの限定公開使えば良いじゃないって話だが、今回は一旦置いておく。

サーバーに動画ファイルを起きURLを記入してみたのだが・・・

やっぱりYoutubeの埋め込み動画の様にページ内で再生できる様にした方がユーザー的にも便利だし、映像を見るためにワンクッションあるのも面倒くさいな。 

昔ならFlashを使用して再生出来るように設定していたと思うが(僕はその時代の人間では無いので詳しい事は解りません。) 
今やFlashはMacやiPhoneでは再生できない。

じゃあ最近流行りのHTML5で何とかならんか??と思いやり方を探したら、あっさり見つかりました。

しかも実装方法メチャクチャ簡単です。

実装方法は続きを読む
 

ヘッダーに記入



ヘッダーの記入はこれだけです。

表示したい部分に記入


すると・・・



これで表示出来ました。
あっさり簡単。

autoplayの部分には色々設定が出来るようで

  • preload
  • poster
  • controls

があるようです。
詳しは参考にしたサイトを御覧ください。

参考にしたサイト

HTML5のVIDEOタグで動画を再生&旧IEなどではFlashで再生を同一ソースでやってみた html5media

Pocket
pinit fg en rect gray 28 - html5 動画共有サイトを使用せずHTML5で動画をサイトに埋め込む方法
line88x20 - html5 動画共有サイトを使用せずHTML5で動画をサイトに埋め込む方法
[`evernote` not found]

Leave a Comment

CAPTCHA