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

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

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

拡大する

※PCのbit数が64bit専用となります。
※バージョン情報は更新されることがありますので、画像と同バージョンではない場合があります。



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

拡大する

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


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

拡大する

※必ずデスクトップに設置し、"ffmpeg" の名称にしてください。


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

拡大する

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


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

拡大する

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


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

拡大する

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

拡大する

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


7.実行後は、手順4で配置した "contents" フォルダ内に、変換元のファイル名が付与されたフォルダが自動生成されます。

拡大する

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

拡大する

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

拡大する

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

拡大する

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

4.タグ2:お客様の動画を貼るホームページ・ソース内の <body> ~ </body> の間に貼ってください。

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


9.FTPクライアントツールを使い、弊社指定のサーバに接続し、生成された"video"フォルダ(今回の例では)をアップロードしてください。

拡大する

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


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

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