HLS形式による動画のオンデマンド配信 をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
* ＨＬＳ形式による動画のオンデマンド配信 [#d7b00a77]
**準備 [#wda4c543]
1. 配信したい動画を準備する。（ここでは mp4 形式で保存）~
2. [[ffmpeg:https://www.ffmpeg.org/]] をダウンロードし，...
3. 上記フォルダーでコマンドプロンプトを起動する。（フォル...
**動画の変換（mp4 から HLS へ） [#ab647faa]
1. コマンドプロンプトから，次のコマンドを入力する。~
> ffmpeg -i [動画ファイル名].mp4 -c:v copy -c:a copy -f ...
※ この場合のセグメントタイムは９秒なので，１０分の動画な...
**Ｗｅｂサーバーへの配置 [#m1e37de1]
1. 作成された全てのファイル（［動画ファイル名]連番.tsと，...
2. HTMLファイル中に，次のように指定する。~
<video src="http://.../[動画ファイル名].m3u8" ></video>
※ ＨＬＳ対応ブラウザ（Safari と Edge）は，これで再生可能...
** hls.js の実装 [#p3c270cd]
※ hls.js を使うと，ＨＬＳ非対応のブラウザにも配信が可能に...
1. hls.js を[[提供サイト:https://www.jsdelivr.com/?query=...
2. HTMLファイル中に，次のように指定する。~
<script src="hls.js"></script>
<video id="video_smaple" controls>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video_smaple');
var hls = new Hls();
hls.loadSource('./[動画ファイル名].m3u8');
hls.attachMedia(video);
}
</script>
※ １行目を <script src="https://cdn.jsdelivr.net/npm/hls....
*** [[サンプル動画:http://www.hayasi.name/kanon/stream/sn...
終了行:
* ＨＬＳ形式による動画のオンデマンド配信 [#d7b00a77]
**準備 [#wda4c543]
1. 配信したい動画を準備する。（ここでは mp4 形式で保存）~
2. [[ffmpeg:https://www.ffmpeg.org/]] をダウンロードし，...
3. 上記フォルダーでコマンドプロンプトを起動する。（フォル...
**動画の変換（mp4 から HLS へ） [#ab647faa]
1. コマンドプロンプトから，次のコマンドを入力する。~
> ffmpeg -i [動画ファイル名].mp4 -c:v copy -c:a copy -f ...
※ この場合のセグメントタイムは９秒なので，１０分の動画な...
**Ｗｅｂサーバーへの配置 [#m1e37de1]
1. 作成された全てのファイル（［動画ファイル名]連番.tsと，...
2. HTMLファイル中に，次のように指定する。~
<video src="http://.../[動画ファイル名].m3u8" ></video>
※ ＨＬＳ対応ブラウザ（Safari と Edge）は，これで再生可能...
** hls.js の実装 [#p3c270cd]
※ hls.js を使うと，ＨＬＳ非対応のブラウザにも配信が可能に...
1. hls.js を[[提供サイト:https://www.jsdelivr.com/?query=...
2. HTMLファイル中に，次のように指定する。~
<script src="hls.js"></script>
<video id="video_smaple" controls>
<script>
if(Hls.isSupported()) {
var video = document.getElementById('video_smaple');
var hls = new Hls();
hls.loadSource('./[動画ファイル名].m3u8');
hls.attachMedia(video);
}
</script>
※ １行目を <script src="https://cdn.jsdelivr.net/npm/hls....
*** [[サンプル動画:http://www.hayasi.name/kanon/stream/sn...
ページ名:
![[PukiWiki]](image/penguin-ubuntu.png "[PukiWiki]")
