SHOEISHA iD

パスワードを忘れた場合はこちら

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

  • 新規
    会員登録
  • 新規会員登録

ニュース

記事

デブサミ・デブスト

書籍

新着記事一覧を見る

連載記事

人気記事の執筆者

渡部 拓也

水無瀬 あずさ

柳井 政和

上田 瀟逸（ハリネズミ）

奥村 康晃（株式会社NTTデータ）
イベント
イベント

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

講演資料・動画まとめページ

Developers Summit 2026・Dev x PM Day 講演資料まとめ

Developers Boost 2025 講演資料まとめ

Developers X Summit 2025 講演資料まとめ

Developers Summit 2025 FUKUOKA 講演関連資料まとめ

Developers Summit 2025 KANSAI 講演関連資料まとめ

Developers Summit 2025 Summer 講演資料まとめ

翔泳社では、「独習」「徹底入門」「スラスラわかる」「絵で見てわかる」「一年生」などの人気シリーズをはじめ、言語や開発手法、最新技術を解説した書籍を多数手がけています。プロジェクトマネジメントやチームビルティングといった管理職向けの書籍も豊富です。

ITエンジニアとしてのスキルアップ・リスキリングに、ぜひお役立てください。

書籍に関する記事を見る

'); googletag.cmd.push(function() { googletag.pubads().addEventListener('slotRenderEnded', function(e) { var ad_id = e.slot.getSlotElementId(); if (ad_id == 'div-gpt-ad-1659428980688-0') { var ad = $('#'+ad_id).find('iframe'); if ($(ad).width() == 728) { var ww = $(window).width(); ww = ww*0.90; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/728+","+ww/728+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/728+","+ww/728+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/728+","+ww/728+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/728+","+ww/728+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(90*ww/728)+"px;width:"+728+"px;}", 0 ); } else { if ($(window).width() < 340) { var ww = $(window).width(); ww = ww*0.875; var style = document.createElement("style"); document.head.appendChild( style ); var sheet = style.sheet; sheet.insertRule( "#div-gpt-ad-1659428980688-0 iframe {-moz-transform: scale("+ww/320+","+ww/320+");-moz-transform-origin: 0 0;-webkit-transform: scale("+ww/320+","+ww/320+");-webkit-transform-origin: 0 0;-o-transform: scale("+ww/320+","+ww/320+");-o-transform-origin: 0 0;-ms-transform: scale("+ww/320+","+ww/320+");-ms-transform-origin: 0 0;}", 0 ); sheet.insertRule( "#div-gpt-ad-1659428980688-0 div{ height:"+(180*ww/320)+"px;width:"+320+"px;}", 0 ); } } } }); }); } else { document.write('
'); document.write('
'); }
今日からできる！ 動画配信基盤システム構築

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

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

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

ここまでの振り返り

　本連載も第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/

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

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

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

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます
  • ・翔泳社の本が買える！
    500円分のポイントをプレゼント

メールバックナンバー

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

NEXT

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

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

もっと読む

この記事の著者

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

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

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

この著者の最近の執筆記事

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

この記事をシェア

CodeZine（コードジン）
https://codezine.jp/article/detail/21095 2025/03/28 11:00
" ); }

おすすめ

アクセスランキング

  1. 1
    パナソニックはなぜ開発環境の「文房具化」に挑んだのか──グループ横断で進めた開発環境改革の舞台裏
  2. 2
    プログラミング問題集「Exercise」シリーズ全5冊が3/10まで半文公開　C++、JS、Pyhon、Go、Rustもあり
  3. 3
    GitHub Copilot BusinessとProでClaudeとCodexが利用可能に
  4. 4
    GitHub CopilotがClaude Opus 4.1、GPT-5、GPT-5-Codexの非推奨を発表
  5. 5
    Google Workspaceで直近発表された新機能をまとめて紹介
  1. 6
    Google WorkspaceでGeminiチャット共有機能が組織向けに拡大 NEW
  2. 7
    VSCodeでPHP開発環境を構築しよう
  3. 8
    Cursor、同社テクニカルサポート対応の75%以上で「Cursor」を利用していると紹介 NEW
  4. 9
    Chromeが2週間ごとに新バージョンをリリースへ、2026年9月から適用 NEW
  5. 10
    Perplexity、複数のAI機能を単一のシステムに統合する「Perplexity Computer」リリース

アクセスランキング

  1. 1
    パナソニックはなぜ開発環境の「文房具化」に挑んだのか──グループ横断で進めた開発環境改革の舞台裏
  2. 2
    プログラミング問題集「Exercise」シリーズ全5冊が3/10まで半文公開　C++、JS、Pyhon、Go、Rustもあり
  3. 3
    GitHub Copilot BusinessとProでClaudeとCodexが利用可能に
  4. 4
    GitHub CopilotがClaude Opus 4.1、GPT-5、GPT-5-Codexの非推奨を発表
  5. 5
    Google Workspaceで直近発表された新機能をまとめて紹介
  6. 6
    Google WorkspaceでGeminiチャット共有機能が組織向けに拡大 NEW
  7. 7
    VSCodeでPHP開発環境を構築しよう
  8. 8
    Cursor、同社テクニカルサポート対応の75%以上で「Cursor」を利用していると紹介 NEW
  9. 9
    Chromeが2週間ごとに新バージョンをリリースへ、2026年9月から適用 NEW
  10. 10
    Perplexity、複数のAI機能を単一のシステムに統合する「Perplexity Computer」リリース
  1. 1
    GitHub CopilotがClaude Opus 4.1、GPT-5、GPT-5-Codexの非推奨を発表
  2. 2
    【速報】ITエンジニア本大賞 2026、技術書部門とビジネス書部門の大賞が決定！
  3. 3
    「LTSとSTS」　～マンガでプログラミング用語解説
  4. 4
    GitHub、Markdownで目標を記述することでタスクを自動実行する「Agentic Workflows」公開
  5. 5
    「否定された」と感じさせないコードレビューの作法。チームを育てるテキストコミュニケーションとは？
  6. 6
    「REPL」　～マンガでプログラミング用語解説
  7. 7
    Claude Skillsとは？ AIエージェント開発における新たなベストプラクティスをやさしく解説
  8. 8
    C++の新機能を理解する──静的なoperator()／operator[]と多次元対応operator[]など言語仕様の強化
  9. 9
    最新バージョン.NET 10/Visual Studio 2026の登場が、開発者にいかなる価値をもたらすか──「ECHO 2025」開催
  10. 10
    Apple、2026年4月からiOSアプリの新SDK対応を必須化

イベント

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

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

メールバックナンバー

アクセスランキング

  1. 1
    パナソニックはなぜ開発環境の「文房具化」に挑んだのか──グループ横断で進めた開発環境改革の舞台裏
  2. 2
    プログラミング問題集「Exercise」シリーズ全5冊が3/10まで半文公開　C++、JS、Pyhon、Go、Rustもあり
  3. 3
    GitHub Copilot BusinessとProでClaudeとCodexが利用可能に
  4. 4
    GitHub CopilotがClaude Opus 4.1、GPT-5、GPT-5-Codexの非推奨を発表
  5. 5
    Google Workspaceで直近発表された新機能をまとめて紹介
  1. 6
    Google WorkspaceでGeminiチャット共有機能が組織向けに拡大 NEW
  2. 7
    VSCodeでPHP開発環境を構築しよう
  3. 8
    Cursor、同社テクニカルサポート対応の75%以上で「Cursor」を利用していると紹介 NEW
  4. 9
    Chromeが2週間ごとに新バージョンをリリースへ、2026年9月から適用 NEW
  5. 10
    Perplexity、複数のAI機能を単一のシステムに統合する「Perplexity Computer」リリース

アクセスランキング

  1. 1
    パナソニックはなぜ開発環境の「文房具化」に挑んだのか──グループ横断で進めた開発環境改革の舞台裏
  2. 2
    プログラミング問題集「Exercise」シリーズ全5冊が3/10まで半文公開　C++、JS、Pyhon、Go、Rustもあり
  3. 3
    GitHub Copilot BusinessとProでClaudeとCodexが利用可能に
  4. 4
    GitHub CopilotがClaude Opus 4.1、GPT-5、GPT-5-Codexの非推奨を発表
  5. 5
    Google Workspaceで直近発表された新機能をまとめて紹介
  6. 6
    Google WorkspaceでGeminiチャット共有機能が組織向けに拡大 NEW
  7. 7
    VSCodeでPHP開発環境を構築しよう
  8. 8
    Cursor、同社テクニカルサポート対応の75%以上で「Cursor」を利用していると紹介 NEW
  9. 9
    Chromeが2週間ごとに新バージョンをリリースへ、2026年9月から適用 NEW
  10. 10
    Perplexity、複数のAI機能を単一のシステムに統合する「Perplexity Computer」リリース
  1. 1
    GitHub CopilotがClaude Opus 4.1、GPT-5、GPT-5-Codexの非推奨を発表
  2. 2
    【速報】ITエンジニア本大賞 2026、技術書部門とビジネス書部門の大賞が決定！
  3. 3
    「LTSとSTS」　～マンガでプログラミング用語解説
  4. 4
    GitHub、Markdownで目標を記述することでタスクを自動実行する「Agentic Workflows」公開
  5. 5
    「否定された」と感じさせないコードレビューの作法。チームを育てるテキストコミュニケーションとは？
  6. 6
    「REPL」　～マンガでプログラミング用語解説
  7. 7
    Claude Skillsとは？ AIエージェント開発における新たなベストプラクティスをやさしく解説
  8. 8
    C++の新機能を理解する──静的なoperator()／operator[]と多次元対応operator[]など言語仕様の強化
  9. 9
    最新バージョン.NET 10/Visual Studio 2026の登場が、開発者にいかなる価値をもたらすか──「ECHO 2025」開催
  10. 10
    Apple、2026年4月からiOSアプリの新SDK対応を必須化