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の動画プレイヤーにVTTファイルで字幕機能を実装する方法
Video.jsの動画プレイヤーに字幕機能を実装したい。調べたところVTT(Vi ...
-
-
VideoBoxでyoutubeの埋め込みをポップアップ表示させる方法
youtubeの埋め込みリンクをLightboxみたいにポップアップ表示させる方 ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Plyr」の利用方法
先日JavaScriptの動画プレイヤー用ライブラリ「Video.js」を試した ...
-
-
ボタンをクリック時にVideo.jsの動画プレイヤーをモーダルウィンドウ表示させる方法
ボタンやリンクをクリックした際、Video.jsの動画プレイヤーをモーダルウィン ...