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

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

2015/04/15 2024/04/25 HTML 動画関連

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

1 サンプル
2 ソース
3 その他

サンプル

ソース

<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 動画関連