html内に動画を埋め込んで配信する方法
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
を記述してアップロードしておく。
関連記事
-
-
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
- 画像をドラッグ&ドロップでアップロードする方法