SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

今日からできる! 動画配信基盤システム構築

【Webブラウザでストリーミング動画配信:前編】MP4プログレッシブダウンロードによるストリーミング再生を実現しよう

今日からできる! 動画配信基盤システム構築 第4回

  • X ポスト

 インターネットを利用した動画配信は、ブロードバンドの普及とともに急速に発展し、今や多くの人々がたくさんの動画コンテンツを視聴しています。各関連技術は発展と収束を繰り返し、昔は難解だった動画配信技術もデファクトスタンダードが確立されつつあります。本連載ではインターネットを利用したストリーミング動画配信技術についてわかりやすく紹介し、誰でも、簡単に、動画配信ができることを伝えていこうと思っています。第4回となる本記事では、ストリーミング配信をWebブラウザ上で再生し、パラメータチューニングを行うことでどのようにユーザー体験に変化が生じるかを実際に見ていきます。

  • X ポスト

ここまでの振り返り

 本連載も第4回目となりました。第1回ぶりの登場です。お久しぶりです、合同会社DMM.comの矢野(@yanoshi)です。

 ここまでの連載で動画のファイル形式や圧縮方法等について解説してきました。第3回の終盤では、簡易的なHTTPサーバーを構築し、動画配信を実現しています。

 前回の記事ではツールを利用した再生を行っていたので、ピンとは来ない人もいるかも知れませんが、実はWebブラウザから動画を再生させることがすでに可能となっています。ここからはWebブラウザからのストリーミング再生をしてみましょう。

Webブラウザで動画をストリーミング再生してみる

おさらい

 前回の記事にて下記コマンドでHTTPサーバーの立ち上げを行いました。

$ python3 -m http.server 8000

 そして下記コマンドを用いてffplayを利用し、動画再生を行いました。

$ ffplay http://localhost:8000/chapter3_faststart.mp4

 この動画ストリームを今度はWebブラウザで再生してみましょう。

簡易的なHTMLファイルを用意する

 下記のようなHTMLファイル(index.html)を用意し、chapter3_faststart.mp4 と同じディレクトリに設置します。

<!DOCTYPE html>
<html>
  <head>
    <title>Test streaming player</title>
  </head>
  <body>
    <video src="chapter3_faststart.mp4" controls></video>
  </body>
</html>

 「http.server」はRangeリクエストに対応していないため、このままだとシーク操作(動画の特定の位置にジャンプすること)ができません。そのためRangeリクエストに対応しているサードパーティPythonモジュールをインストールして利用します。今回は「RangeHTTPServer」を利用することにしました。

 下記のようにインストールします(環境によってはsudoが必要な事があります)。

$ pip3 install rangehttpserver

 下記のように起動します。

$ python3 -m RangeHTTPServer

ブラウザで開いて再生してみる

 下記URLにアクセスしてみましょう。

http://localhost:8000/

 どうでしょうか? 再生されましたね。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
ストリーミングに最適なMP4ファイルとは

この記事は参考になりましたか?

  • X ポスト
今日からできる! 動画配信基盤システム構築連載記事一覧

もっと読む

この記事の著者

矢野 完人(合同会社DMM.com)(ヤノ マサヒト)

 2016年にDMM.comへ新卒入社。CTO室に配属され、新規事業立案や動的画像リサイズエンジンのR&D等に従事。2017年に動画サービスを司る部署(現:動画配信開発部)に異動し、配信基盤グループにて設計・開発・運用・マネジメントなどさまざまな業務を行う。現在はメディア基盤開発部 部長とし...

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
CodeZine(コードジン)
https://codezine.jp/article/detail/21095 2025/03/28 11:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング