あれ、思ったより簡単かも。

 

このサイトでレクチャービデオを購入して頂いた方はご存知かと思うのですが、うちの配信コンテンツでは動画に対して様々な操作を加えることが出来ます。

 

(速度調整、ピクチャー・イン・ピクチャー、チャプター操作等)

 

今となっては当たり前の機能ですが、VimeoやYouTubeと言った外部サイトの埋め込みを使わないで動画配信サービスを作るとなると話が変わってきます。

 

例えるなら、カップ麺をお湯を注いで作るのと、小麦を練る所から作るぐらいの違いです。

 

Samo-shopでは、動画プレイヤーの作成にvideo.jsを活用し、購入した動画をサイト上で視聴できるようにしています。

 

もちろん、Zip形式でのダウンロードも可能です。

 

この仕組みにより、ユーザーは外部サイトを経由することなく、Samo-shop内で動画視聴ができます。

 

今回は、このシステムが出来るまでをシェアしようと思います。

 

Q.何故他のサービスを使わないの？

YoutubeやVimeoと言った他サービスを何故使わないかという話ですが、既存の埋め込みサービスを使用することにいくつか懸念点がありました。

 

YouTubeは規約で商業利用での埋め込みが禁止されているので、動画を売っているこのサイトでは使うことが出来ません。

本サービスの利用には制限があり、以下の行為が禁止されています。

1. 本サービスまたはコンテンツのいずれかの部分に対しても、アクセス、複製、ダウンロード、配信、送信、放送、展示、販売、ライセンス供与、改変、修正、またはその他の方法での使用を行うこと。ただし、（a）本サービスによって明示的に承認されている場合、または（b）YouTube および（適用される場合）各権利所持者が事前に書面で許可している場合を除きます。

引用:Youtube利用規約

 

 

次にVimeoですが、貧乏人に優しくなかったです。

Vimeoには無料プランの「Basic」、月額700円の「Plus」、2000円の「Pro」、5000円の「Business」、7500円の「Premium」があります。(2023年2月時点)

このうち、商用利用可能なプランはPro以降なので、最低でも月2000円はかかることになります。

 

......高くね？

 

まぁ、動画ビジネスで食べたいんだからそれぐらい払えやって話なんですが、世知辛いこの世の中、ケチれるところはとことんケチりたい訳ですよ。

 

んじゃぁ他にどんなサービスがあるんだろうと調べてみると、どれもこれも基本「万」は超える......

人件費か...?

動画置くだけなのに？

 

とまぁ、基本企業を相手にBtoBの商売している法人価格サービスばかりだったので、貧乏人である私は諦めの境地に入りました。

 

さて、でもサイト運営はしたいです。

そこで、自分が欲しい物は何かリストアップしてみました。

 

【欲しいモノ】

・動画を買ってない人にリンクが拡散されない仕組み

・チャプター機能

・再生速度調整

・Pip(ピクチャー・イン・ピクチャー)機能

・メンテナンスがクソ楽

 

....あれ、これ自作できるのでは？

そう思い立ち、自サイトで完結する埋め込みシステムの制作を始めました。

 

Video.jsとの出会い

そもそもの話、最初はYoutubeやVimeoを埋め込めばなんとかなるだろうと思っていたので、開発に必要な知識などの下調べも一切していませんでした。

 

そもそもYoutubeとかってどうやって動画の埋め込み機能を提供しているんだろう？

というレベルだったので、まずは基本の勉強から始まりました。

 

Youtubeの埋め込みコードに含まれているリンクを開くと

(例：埋め込み動画の生リンク)

 

どうやら画面いっぱいに動画プレイヤーを配置して、それを読み込ませることで埋め込みを実装している模様。

 

な〰んだ、めっちゃ簡単じゃん！

画面いっぱいに動画を再生させて、そこにプレイヤー機能をつけてあげれば良いんだ！

 

.....どうやって？

 

そもそも動画プレイヤーってどんな機能を盛り込めば良いの？

 

無数に疑問が湧いてきて、軽く絶望しそうになっている中、とりあえずGoogle先生に「動画プレイヤー　HTML5」と聞いてみました。

 

video.js?　video.jsってなんすか？

 

心の中のリトルひろゆきがその様に話す中、とりあえずVideo.jsを調べます。

 

Video.jsは、HTML5動画プレイヤーを実装することができるJSライブラリです。

とても高機能で、YouTubeで見かける、埋め込み機能、シェア機能、フルスクリーン表示、音量調整など必要な機能が揃っています。

もちろん、見た目のカスタマイズも可能です。

引用：WordPressのための便利帳/YouTubeのようなHTML5動画プレイヤーを実装することができるJSライブラリ「Video.js」

 

 ......これじゃん！

検索一発目にして答えが出てしまったことの虚しさと、先人が残してくれた知恵への感謝の気持ちがごちゃまぜになりながら、このvideo.jsを使ったビデオプレイヤー開発が始まりました。

 

プレイヤーを作るのはクソ簡単

そんなこんなで始まったプレイヤー制作ですが、作ること自体は拍子抜けするほど簡単でした。

一枚の白HTML(PHP) を作成して、video.jsを読み込み、公式が配布しているcssを読み込み、CSSの一部分を埋め込み用に書き換えるだけです。

 

書き換える部分

 

.video-js { 
 position: fixed; 
 top: 0; 
 left: 0; 
 width: 100%; 
 height: 100%; 
 background-color: #000; 
 color: #fff; 
 font-size: 16px; 
 line-height: 1.5; 
 font-weight: normal; 
 font-style: normal; 
 font-family: Arial, Helvetica, sans-serif; 
 box-sizing: border-box; }
}

 

 

これでとりあえず、プレイヤーは完成しました。

めっちゃ簡単！　凄い！！！

 

 

そして、ここに様々な拡張機能を追加していきます。

今回は

・再生速度調整

・残り時間表示の変更(カウントダウン方式に）

を追加しました。

 

  <script>
videojs('video', {
    'playbackRates': [0.25, 0.5, 1, 1.5, 2],
    'controlBar': {
    'remainingTimeDisplay': {
    'displayNegative': false
        }
    },
});
  </script>

あとは、このまま配信コンテンツを見られるサイトに埋め込めば完成！

 

ね、簡単だったでしょ？

結局、システムを作るというより既存のライブラリを使うだけでしたが、カスタマイズ性が豊かで便利なのでオールOKです！