勉強したことのメモ

webプログラマ見習いが勉強したことのメモ。

html内に動画を埋め込んで配信する方法

   

Webページ内にYoutubeとかを用いずに、動画ファイルを配信したいというケースがあった。メディアサーバやストリーミングサーバがいるのかと思いきや、HTML5でいけるらしい。

 

■サンプル

http://sample.taitan916.info/video/

 

■ソース

 

■その他

・Basic認証には注意

Basic認証がかかっているディレクトリ内でvideoタグを使った際に、再生できなかった。

以下方法で対処は可能。

userとpassのところはBasic認証のユーザ&パスワードを入れる。

 

・mp4が安定みたい

PCだと基本的に問題ないけど、スマホやタブレットの場合に動画の拡張子によって再生できなかったりする場合があるらしい。mp4だと基本的に全ての環境で再生できるとのこと。

 

・サーバの設定が必要な場合もあり

htaccessで、

を記述してアップロードしておく。

 - HTML

  関連記事

110126-HTML5_Logo
navタグ

デザイナーさんより受け取ったファイルにて navという見慣れないタグがあったので ...

110126-HTML5_Logo
Content Security Policyの設定

Content Security Policyの設定をする事があった。Conte ...

110126-HTML5_Logo
fieldsetタグ

システムの機能追加時に<fieldset>という 見たこと無いタグが ...

110126-HTML5_Logo
thead/tbody/tfootタグについて

テーブルのソートで何気なく使った<thead>と<tbody& ...

110126-HTML5_Logo
ajaxを使わずに非同期っぽくsubmitする

ajaxを使わずに見た目はページ遷移せず、 画像を含めたformをsubmitし ...

110126-HTML5_Logo
formで送信後にアンカータグをつけたい

formでGETもしくはPOSTで送信し、その後のURLにアンカータグをつけたか ...

images
mp3ファイルのアップロードと再生方法

mp3ファイルをformでアップロードしたかったのと、Webサイト上で再生したか ...

110126-HTML5_Logo
formのテキストボックスやテキストエリアにサンプルの値を表示させる

テキストボックスでplaceholderという 見かけない記述があったのでメモ。 ...

110126-HTML5_Logo
WebStorageについて

HTML5で規定されている、Webブラウザ内部のKVS(キーバリュー型データスト ...

110126-HTML5_Logo
htmlのarticle

コーダーさんから渡されたソースに<article>という 記述があり ...