HTML内に動画(mp4ファイル)を埋め込んで配信する方法
2024/04/25
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
関連記事
-
-
Video.jsでテーマを指定して動画プレイヤーのデザインを変更する方法
Video.jsで動画プレイヤーのデザインを変更したい。調べたところWordPr ...
-
-
YouTubeの埋め込み動画をjQuery&CSSでフローティングビデオ対応させる方法
以前にvideoタグで表示させた動画をjQuery&CSSでフローティン ...
-
-
Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法
Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、さらにそのテ ...
-
-
YouTube埋め込み動画が再生終了したタイミングでJavaScriptの処理を実行させる方法
YouTube埋め込み動画が再生終了した際に、あらかじめ登録してあるJavaSc ...
-
-
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...