勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

HTML内に動画(mp4ファイル)を埋め込んで配信する方法

   2024/01/13  HTML

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

 

サンプル

https://taitan916.info/sample/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="https://user:pass@hoge.com/test.mp4"></video>

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

mp4が安定みたい

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

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

htaccessで以下を記述してアップロードしておく。

AddType video/mp4 .mp4

 - HTML

  関連記事

フォームでカラーコードを入力したい際にプラグイン無しでピッカー機能を搭載する方法

あるフォームの項目でカラーコードを入力したいというケースがあった。だいぶ前に同じ ...

FileReader APIを用いて画像をアップロードせずにサムネイル表示

以前にFile APIを用いてファイル名やサイズ、形式(拡張子)を取得するメモを ...

Content Security Policyの設定

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

フォームのresetについて

<input type="reset">についてクリックしたら 初期 ...

metaタグでSEO

同じページに複数項目があり、その項目によって SEO対策を行う、というものがあっ ...