実績

playbody · 動画販売・ストリーミングサービス

外付けハードディスクに散らばっていた映画・講義動画(約 46GB)を、ポイントで購入・所有して視聴するストリーミングサービスに移しました。アップロード・GPU エンコード・暗号化ストリーミング・720p~4K の画質選択・管理画面までを構築し、デプロイ中もサービスを止めずに運用しています。

動画の販売・視聴チャネル

以前

動画が外付けハードディスクに保管され、販売・視聴できる場がない

以後

映画 16 本・講義 3 シリーズ 39 講を移行し、ポイント購入 → 所有 → 720p~4K 視聴まで一つのサービスで運用

デスクトップの視聴画面。中央のプレーヤーに再生バーと画質メニュー(自動・4K・QHD・1080p・720p)が開いており、右にシリーズの話数一覧が視聴済み・視聴中の表示とともに並び、下に同じ分類の講義ポスター 4 枚がある。

画面はお客様情報保護のため、同じ機能をモックデータで再構成したものです。

デスクトップ・モバイルの画面を実際にご覧いただけます playbody.net
クライアント
映像コンテンツ運営会社
業界
メディア · 教育
実施
2026
期間
2026年10月制作 · 稼働中
領域
製品開発
  • Next.js · Mantine
  • PostgreSQL
  • レジューム対応アップロード
  • GPU エンコード(H.264 · HEVC)
  • 暗号化 HLS
  • ポイント決済
  • blue/green 無停止デプロイ

背景

動画はありましたが、外付けハードディスクの中にありました。販売するには決済が、視聴するには端末や回線の 状態に合った画質が、守るにはダウンロードを防ぐ仕組みが必要でした。動画が増えても手間が増えない仕組みも求められていました。

開発内容

  • 視聴 — 画質は自動で選ぶか、720p · 1080p · QHD · 4K から直接選びます。 続きから再生と次の話が同じプレーヤー内でつながり、全画面が解除されません
  • 購入と所有 — ポイントをチャージし、動画・シリーズごとに設定したポイントで購入すると、そのまま所有し続けられます
  • Web とモバイル — デスクトップでもモバイルでもアプリのように使えるよう、下部タブ・詳細ポップアップ・ポスター画面をそれぞれ最適化しました

モバイル画面 3 枚。左は続きから視聴と分類別ポスターが並ぶホーム、中央は所有価格と保有ポイントを示し購入ボタンがある詳細、右はチャージ金額と決済手段を選ぶポイントチャージ画面。

  • 管理者 — レジューム対応アップロードで大きな原本を上げると、原本を一度だけデコードして H.264 · HEVC の画質段階を GPU で作り、セグメントごとに暗号化したストリーミングファイルとして書き出します。動画ごとの価格と公開状態もここで設定します

管理者のアップロード・エンコード画面。上に登録動画 58 本(映画 16 · 講義 39 · 予告編 3)、エンコード待ち、保存容量、無停止デプロイのカードがあり、下の表に動画ごとの分類・画質段階・エンコード進捗・価格・公開状態が記されている。

結果

2026 年 10 月に構築し、現在稼働中です。外付けハードディスクの映画 16 本と講義 3 シリーズ 39 講(約 46GB)を 移行しました。新しいバージョンはまず待機側のサーバーで立ち上げて状態を確認してから切り替えるため、デプロイ中も 視聴が途切れません。