menu
Webを活用してお客様のビジネス課題を解決します。札幌・東京を拠点にWebコンサルティングをコアにした、Web制作・システム開発・サーバ構築会社です。
現場ブログ > 動画配信システム開発

会員限定動画をWebサイトに掲載・配信するシステムって、操作は難しいの?どういう処理が行われているの?運用コストは?

fシェアする
ツイートする
ブックマーク
タイトルとURLをコピー

最終更新日:2020/11/11   公開日:2020/04/04

「Webサイトに動画を掲載したい」というニーズは昨今どんどん高まっています。

そこで、今回は弊社で開発、運営しているJリーグのチーム、大分トリニータの有料動画コンテンツ、トリテンTVの動画開発事例を元に、どんな手順で動画を登録、公開してるのかをご説明します。動画の登録配信手続きは超カンタンに実現しています。

そしその時、システム内部ではどんなツールを使って、どんな処理が行われているのか、という事についても、ノンプログラマーでもわかりやすく説明をしています。プログラマーではない皆さんは、プログラマーに動画配信システムを作って貰えばいいのであって、自分で作る必要はありませんし、技術的な事は細部は知らなくても何ら問題ありまえん。しかし、これから動画サイトを作りたい、という方、ディレクターなどは、何が必要で、どういう処理をしているのかが分かると、いろいろと見通しが利いて、動画配信サイトを制作しやすくなります。

そしてついでに(ある意味これが一番大事)、どれくらいの運用コストがかかっているのかも(結構実は安いを実現!)ご説明します。

ご参考になれば幸いです。

※この記事は2020年3月20日現在公開を最優先しており、少しずつコンテンツを追加しています。そのため、内容が尻切れておりますが、適時追記・編集をしておりますのでご了承下さい。

Webで有料会員限定で動画を配信している「トリテンTV」

「トリテンTV」とは、J1のチームである、大分トリニータの有料コンテンツ「トリテン」の中にある、有料動画を配信しているコーナーです。利用料金は月額税込み330円になっています。

課金自体はキャリア課金に対応しており、ドコモはSPモード決済、auはauかんたん決済、ソフトバンクはSoftbankまとめて支払いという決済方法に対応しています。その他にクレジットカード決済はPay.jpのクレジットカード代行決済に対応しています。

 

動画自体は現在1本あたり数ヶ月間の限定公開にしています。実はこれには運営上の理由がありまして、それは後半でご説明します。

動画を流すためにWordPressを利用

動画を流す上で、当然ですが、動画ファイルは勿論、動画のタイトル、詳細説明文章、サムネイル、動画に付帯した様々なデータを登録する必要があります。

トリテンTVでは標準的なWordPressを利用しており、トリテンTVのみならず、サイト全体のCMSとして利用しています。もはや言うまでもありませんが、WordPressは世界シェアナンバーワンのCMSで、多くの企業、用途で活用されています。

上記の動画ファイルはWordPressから投稿を行っています。ちなみに投稿画面はこんな感じになっています。

WordPress 動画システム開発

見ての通り、とてもカンタンでいくつかのフィールドに情報を登楼するだけの仕掛けです。

 

インフラにはAWSを利用

このシステムはインフラにAWS(Amazon Web Services)を使っています。CDNにはCloudFrontを使っており、効率よくかつ低コストで、有料会員にだけ配信しています。AWSのデメリットは、利用料金が従量課金で、利用するサーバがハイスペック医であればあるほど、使う量が多ければ多いほど利用料記がかさむ、という事です。

例えばEC2(サーバです)の場合、このようにスペックによって料金が異なっています。そしてリージョン、つまり、どの地域にあるサーバを借りるかでも料金は異なってきます。

 

動画は当然何百メガものデータをユーザー一人一人に配信するため、サーバにかなりのパワーが必要で、かつ流し込むデータ転送量も膨れ上がります。この料金がかなり高く、昔は大企業しか事実上出来ない費用感でした。しかし今はかなりお得になっており、特にCDN(AWSではCloudFrot)を使うと、配信コストを相当減らすことが出来るようになっています。ちなみにトリテンTVでは月間数千回動画が閲覧されていますが、現在、技術的な取り組みを進めた結果、AWSの利用コストは数万円まで減らすことが出来ています。

動画を登録から公開までのフローと内部処理はどうなってるの?

それでは、登録から公開まで、どのような処理を行っているのか、順を追ってご説明します。当然ですが、システム的な内部処理を知らなくても、オペレーターはカンタンに動画を登録する事が出来ます。

動画を登録する

まず、公開したい動画が完成すると。WordPressの管理画面にログインし、動画情報を登録します。

WordPress 動画システム開発

当然ですが、動画の公開には公開予約が出来るようにしてあります。特にしてしない場合は、即時公開され、ずっと公開され続けます。

WordPress 動画システム開発

マウスをクリックすると、カレンダーが立ち上がって日付を指定出来ます。

これらの動画情報は内部的にはサーバのMySQLというデータベースに格納されます。また、動画ファイル自体はWordPressのメディアディレクトリに格納されます。

動画データのチェックと処理

このデータベースに対して、phpのプログラムが毎分チェックに行き、新しい動画情報が登録されていないかをチェックします。

動画情報が存在していた場合、それらの情報を取得すると同時に、メディアディレクトリから動画ファイルを取得し、AWS S3に格納します。S3とは、Amazon Simple Storage Serviceの略で、クラウドストレージです。カンタンに言うとハードディスクです。Sが三つなのでS3という名称なんですね。つまり動画ファイルを一度別の場所に移すわけです。

awss3

 

そして別のS3に格納した動画ファイルを、AWS Elastic Transcoderを使って、HLSフォーマットに変換します。この時、念のための元の動画ファイル(MP4ファイル等)もコピーして保管しておきます。そしてHLSフォーマットに変換し終えた動画ファイルをS3にまた保管する訳です。

 

どうしてHLSフォーマットに変換するかというと、これによって動画をストリーミングでユーザーに配信する事が出来、ユーザーに動画をダウンロードされる事を防ぐことが出来るからです。

もう少し技術的な説明については、スタッフブログのこの辺もサクッとご覧いただければと思いますが、わからなくても何の問題もありません。

 

この処理が終わった後、今度はサムネイル画像を自動で取得します。トリテンTVでは管理画面から好きなサムネイル画像を指定アップロードする事が出来ます。そしてもしサムネイル画像を指定しない場合は、動画再生開始1秒後の画像を自動でサムネイル表示するようにしています。このヘンの仕組みはYouTubeとほぼ同じです。このサムネイルも同じMySQLというデータベースに格納されます。

WordPress 動画システム開発

これで一連の動画のシステム処理は終了です。

次に、動画ファイルをユーザーに見せるためのシステムが走ります。

まずあらかじめ登録してある、ユーザーに見せるための動画ページのHTMLテンプレートを呼び出します。

そして、今まで処理取得したデータを呼び出し、それをHTMLテンプレートに入れ込んで、ユーザーに見せるための配信用HTMLを作成します。以下のようなのが出来る訳です。ちなみに本物はこれ。

WordPress 動画システム開発

クリックすると全景が出ます

そしてこのHTMLがMySQLというデータベースに格納され、公開日まで静かに出番を待つことになるわけです。

この一連の処理が内部で終わると、「ちゃんと処理しましたよ~」とあらかじめ決められた担当者に、念のため処理終了を知らせるメールが届きます。具体的にはこんな内容です。

 

 

最終的にサイトにこのファイルが、有料会員に呼び出されますと。AWS CloudFlont を通じて

cloudfront

 

 

動画の配信コストは?

では、これらの動画の配信コストはどのくらいかかっているのでしょう?実は様々な技術的な工夫、そしてインフラであるAWSの進化によって、現状はかなりおさえられるようになりました。例えばトリテンTVの場合ですと、月に数百メガバイト(5分~10分前後)で月数万円で済むようになっています。これはCDNとしてCloufdfrotというAWSの機能を使っているからです。

 

WordPressに限らず、汎用的なCMSをカスタマイズして、低コストで動画配信を行いたい方は、お気軽にご相談ください。

CONTACT

CONTACT

会員だけに動画を配信したい、有料で動画を配信したい、という御要望を、低コスト高品質で実現します。お気軽にお問い合わせ下さい。

ご相談・お問い合わせする

CONTACT

会員だけに動画を配信したい、有料で動画を配信したい、というご相談はお気軽にお問い合わせください。代表の田中が直接応対させて頂きます。

ご相談・お問い合わせする