PC&スマートフォン HLS配信の説明
~ Windows PCでの設定方法 ~
イメージ画像
手順説明 JS版

この手順は、Windowsでの方法です。

1.先ずはこちらのリンクから、下記の手順でffmpegをダウンロードしてください。

拡大する

※①を選択し、お使いのPCのbit数に応じた②を選択し、③を選択後に、④のDownload Build をクリックします。



2.ダウンロード完了後に解凍し、デスクトップ上に配置します。

拡大する

※解凍が完了すれば、元の圧縮ファイルは不要です。


3.フォルダ "ffmpeg-2019***" の名称を半角英数の "ffmpeg" に変更します。

拡大する

※必ず "ffmpeg" の名称にしてください。


4.動画コンテンツ(変換元動画)が入ったフォルダを、デスクトップに配置します。

拡大する

※例で "contents" というフォルダ名ですが、特に決まりはありません。


5.こちらの「HLS動画配信用ツール」にアクセスし、変換用のバッチファイルを生成します。

拡大する

~バッチファイル生成の流れ~
・入力欄に必要事項を入力してください。
・入力後に「実行」ボタンをクリックします。
・この例では、"start.bat" ファイルが生成され、ダウンロードが開始します。


6.ダウンロード完了に、"start.bat" を、デスクトップ上に配置し、実行してください。

拡大する

・次のような警告が出たら、「実行」をクリックしてください。

拡大する

※実行後に動画変換を開始します。
※コンテンツの容量が小さい場合は、一瞬画面がチラっとすれば変換が完了しています。


7.実行後は、手順4で配置した "contents" フォルダ内に、手順5で指定した名称のフォルダが自動生成されます。

拡大する

・生成されたフォルダ内に、変換後の動画コンテンツが保存されます。

拡大する

8.こちらの「HLS動画配信用ツール2」にアクセスし、お客様のホームページに貼るための、メタタグを生成します。

拡大する

~メタタグ生成の流れ~
1.入力欄に必要事項を入力してください。
2.入力後に「実行」ボタンをクリックすると、次のタグが表示されます。

拡大する

~「実行」の結果~
3.タグ1:お客様の動画を貼るホームページ・ソース内の <head> ~ </head> の間に貼ってください。
※タグ1は貼らなくても動画再生は可能ですが、ブラウザサイズに合わせた縮小は行わず、お客様が指定したサイズで固定します。

4.タグ2:お客様の動画を貼るホームページ・ソース内の <body> ~ </body> の間に貼ってください。
※cssの知識をお持ちの方は、cssファイル内に追記することも可能です。

5.JavaScriptソース:「ファイルを保存」ボタンをクリックし、手順7で生成した "video" フォルダ内に保存してください。


9.FTPクライアントツールを使い、弊社指定のサーバに接続し、"video" フォルダをアップロードしてください。

拡大する

※例では、FFFTPを使いアップロードしています。
※例の "video" というフォルダ名は、アップロード前やアップロード後に関わらず、半角英数であれば名称を自由に変更可能です。
※複数のコンテンツをアップロードする場合は、フォルダ名の重複や上書きを避けるため、各々違う名称にしてください。


・ホームページに貼付けた例として、動画の掲載例をご覧ください。

※引き続き、他のコンテンツ変換を行う場合は、「手順4」から行ってください。