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の動画プレイヤーをモーダルウィン ...
-
-
videoタグで表示させた動画をjQuery&CSSでフローティングビデオ対応させる方法
Web上の動画をFloatingVideo対応したいという要望を受けた。ページ上 ...
-
-
Video.jsで再生速度及び音量の設定状況をブラウザに保存させる方法(videojs-persist)
Video.jsで再生速度及び音量を変更してもページ更新・遷移すると設定状況がリ ...
-
-
JavaScriptの動画プレイヤー用ライブラリ「Video.js」の利用方法
サイト内でYoutube等の動画サイトの埋め込みタグは使用せず、mp4ファイルか ...
-
-
Video.jsで動画プレイヤーのシークバーを非表示にし早送りさせない方法
Video.jsで動画を早送りさせないようシークバーを非表示にしたい。ただ、オプ ...