contentAWS+hls.jsでストリーミング再生(その1)AWSS3ElasticTranscoderhls.js動画を配信するためにhls.jsを使ってみました。動画を扱ったのが初めてだったので、まとめておきます。ストリーミング再生?HLS??ストリーミング再生とは、本当に簡単に言うと「動画ファイルを細切れにして、ちょっとずつ読み込んで再生する方法」です。動画(でかい)を一括で読み込んで再生すると、データの取得に時間がかかりますし、もし途中で見るのをやめるような場合はその分無駄が生じます。ストリーミング再生では、細切れにされた動画を順番に取得して再生するので、動画を読み込みながら再生をすることが可能です。見なかった分のデータは取得しないので、一括で動画データを取得する方法と比べると、そういった意味では効率がいいと言えます。HLSはHTTPを使用してストリーミング再生するプロトコルです。Streamingの略で、Appleが開発した動画配信のプロトコルです。HLSはプレイリストファイル(.m3u8)とセグメントファイル(.ts)ファイルで構成されます。セグメントファイルは動画を細切れにしたもので、プレイリストファイルにはセグメントファイルをどの順番で再生するかなどの情報が書かれています。・firebase:ストリーミング再生するフロント側の場所1.動画を用意する動画はmp4形式のものを用意しました(というか作ってもらった)。専用のバケットを作成し、動画をアップロードします。TranscoderでHLS形式に変換したものを入れる予定です(現段階ではフォルダの中身は空です)。Transcoderでmp4の動画をHLS形式に変換します。変換するまでにやることは1.パイプラインを作成する2.ジョブを実行するです。Pipelineをクリックします。作成するpipelineに関する設定をします。Name:パイプラインの名前。見て目的がわかるような名前がいいと思います。Bucket:HLS形式に変換する動画ファイルを格納しているS3バケットの名前。上記1で作成したものを指定します。Role:このパイプライン用のロール。特別な事情が無ければ、デフォルトのままでOKです。Playlists以下の項目は変換後のファイルに関するものです。・Bucket:変換したファイルを格納するバケット名。Class:S3のストレージクラスを指定します。Redundancy(低冗長化)から選択できますが、今回はデフォルトのままStandardにしました。Thumbnailsはサムネイルに関する項目です。・Bucket:パイプラインに送信したジョブのサムネイルを保存する用のS3バケット名を指定します。Class:S3のストレージクラスを指定します(上と同じです)。その他の項目はデフォルトのままです。詳しくは公式ドキュメントをご覧ください。Pipelineを押すとパイプラインが作成されます。次はジョブを作ります。今回はこのように設定しました。・Pipeline:先ほど作成したパイプラインを指定します。Transcoderが生成するファイル名の先頭につける値です。今回はS3バケット内のhls_sampleというフォルダにHLS形式のファイルを出力したいので、そのように入力しています。Key:S3のバケットにアップロードした、変換したいファイルの名前です。・Preset:この変換で使用するプリセットです。今回はHLSに変換したいので、HLS_400Kを選びました。※HLSのエンコーディング等に関することはこちらが参考になりました。Duration:セグメントファイルの最長時間です。1~60秒の間の値を指定します。Key:出力されるファイル(セグメントファイル、プレイリスト両方)の名前になります。Key+連番.tsというファイル名で保存されます。その他の値はデフォルトです。詳しくは公式ドキュメントをご覧ください。Jobをクリックします。時間がかかりますが、ステータスがCompleteになれば完了です。アウトプット先に指定したS3のバケットを確認してみると、いますね。プレイリストファイルである.m3u8ファイルと、4つのセグメントファイル(.ts)が作成されました。これでmp4ファイルからHLS形式のファイルに変換することができました。ありがとうございます。最近Android始めました。upLoginユーザーは見つかりませんでした。