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でYoutube動画を取り扱う方法
Video.jsでYoutube動画を取り扱いたい。具体的にはVideo.jsの ...
-
-
Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、位置をランダムに変更する方法
Video.jsで表示させた動画プレイヤーに指定したテキスト表示し、さらにそのテ ...
-
-
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...
-
-
WordPressにて記事内で動画(mp4)ファイルの再生する方法
WordPressでyoutube等の動画サイトの埋め込みタグではなく、mp4フ ...
-
-
vimeoの動画URLからサムネイル画像用URLを取得する方法(oEmbed API)
vimeoの動画URL(https://vimeo.com/xxxxx)からサム ...