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

2015/04/15

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

■サンプル

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

■ソース

<html>
<head>
<style>
video {
	width: 480px;
	height: 270px;
}
</style>
</head>
<body>
	<video src="test.mp4" preload="none" onclick="this.play();" poster="test.jpg" controls>
		videoタグ非対応時に表示されるテキストはここに書く。
	</video>
</body>
</html>

■その他

・Basic認証には注意

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

以下方法で対処は可能。

<video src="http://user:pass@hoge.com/test.mp4"></video>

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

・mp4が安定みたい

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

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

htaccessで、

AddType video/mp4 .mp4

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

- HTML

: IE11でSB Admin2のログインページの表示がおかしい

ダッシュボードや管理画面を作成する際、SB Admin2を使うことが多い。ダッシ ...

: クロスドメインな状況でiframeがIEのみ挙動がおかしくなる場合

iframeで別のドメインのサイトを表示させた場合に、firefoxやchrom ...

: ajaxを使わずに非同期っぽくsubmitする

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

: オブジェクトタグ/エンベットタグ

<object> <embed> 見たこと、聞いたことが ...

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

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

: 画像の一部分のみリンクを設定する方法

画像を表示させて、その画像の一部分のみにリンクを張りたかった。画像を重ね合わせた ...

: htmlのarticle

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

: スマホでページ内リンクからGoogleMapアプリを開く

スマホでWebページにあるリンクをクリックした際にGoogleMapアプリを表示 ...

: Content Security Policyの設定

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

: readonlyについて

日付ピッカーとかをテキストボックスに入れた際に、ピッカー入力とあわせて直接入力 ...

PREV: VPSにメールサーバを導入する方法
NEXT: 画像をドラッグ&ドロップでアップロードする方法

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

関連記事