YouTube、Netflixのようなサイトを作成するJS、WordPressプラグイン

VOD（ビデオ・オン・デマンド）とは毎月定額で映画やドラマ、アニメなどを視聴することができる動画配信サービスのこと。

Netflix、Amazonプライム・ビデオ、日本でもUNEXT、DAZN、Huluなど色々とあるよね。

Prime Video | 映画、TV番組、ライブTV、スポーツを観る

Prime Videoで幅広い種類の映画、TV番組、ライブTV、スポーツを今すぐ視聴。いつでも、どのデバイスでも、高品質なコンテンツをストリーミング再生。Prime Videoに今すぐ登録してストリーミング再生を始めましょう。

「動画を見る」ことばかりに目が行きがちだけど、サイトもサクサクしてる。

そして視覚的／UX的にもユーザの興味を引きつける細かい作り込みが素晴らしい。

マウスオーバーによるサムネイルの拡大・説明文章の表示
マウスオーバーによるプレビュー動画の再生
無限スライド（カルーセル）によるサムネイル表示

これらがサクサクで動く。

シリコンバレーの天才エンジニア、デザイナーの技術と知識の結晶だと思ってる。

相方「NetflixやAmazon primeのような動画配信サイトをサクッと作ってよ」

馬っｗｗ

と……言う心をぐっと我慢して、調べてみた。

有料サービスで調べてみる
1. 企業に依頼して作成してもらった場合（60万円～）
2. Wordpressのテーマ「VideoFlix」を使った場合（3000円程度）
slickを使って自作してみる
まとめ

因みにNetflixは、絶え間ない技術革新によりUXを向上させているので、単にデザインを似せるだけで実現できるものではない。

2015年：アニメはもっと小さなデータに、アクション映画など動きの激しいものは大きめになど、作品ごとにエンコーディングを変える「Per-title encording」を採用
2018年：シーンごとにエンコーディングを変える「Per-shot encording」を採用
近年：「AV1」コーデックを採用し、Per-shot encordingよりもさらに視聴時間を伸ばす

エンコード技術や新規コーデック開発なんて個人には無理！

ここでは「サイトを似せる事」だけに注目する。

有料サービスで調べてみる

ゼロから作ったら大変ということは何となく理解できる。

なので「有料サービス」を調べることで、開発規模や期間の大まかな把握をしておく。

最悪、発注できるしね。

企業に依頼して作成してもらった場合（60万円～）

株式会社ド○マという新潟の会社が「Netflix」のような、VODサービスに適したデザインのサイト立ち上げサービスを行っていると一年前のプレスニュースに出てた。

YouTubeやNetflixのような本格的な動画配信サービスを構築できる『DOUGAMO-ドウガモ』提供開始

株式会社ドルマのプレスリリース（2020年7月29日 16時22分）YouTubeやNetflixのような本格的な動画配信サービスを構築できる『DOUGAMO-ドウガモ』提供開始

導入・制作費用は、60万円+税。

やっぱり高いな……

でも、技術力いるから、これでも破格の値段なんだろうなーー。

ソリューションとして提供可能なデモサイトを発見。

VideoFlix – Premium Video Content WordPress Theme

Premium Video Content WordPress Theme

おお！なんとなく似てる！

だったら、このサイトをそのままパチってみるかーーーー。

WordPressのテーマ「VideoFlix」を使った場合（3000円程度）

上記のデモサイトのコードを読んでみた。

難読化されてないのね、ありがたい！

で、Wordpressのテーマを使っていることが分かった。

で、この会社の自作かな……？

とダメ元でプラグイン名をググってみたら

他人のものじゃんｗｗ

VideoFlix - Netflix-Inspired WordPress Theme with Membership System | WP Themes Like

VideoFlix is a dark interface WordPress theme you can use to create a Netflix-inspired website, with tons of features, such as:

テーマの値段は「$29」。

で、さらに「デモサイト」が公開されているので見てみた。

VideoFlix – Premium Video Content WordPress Theme

Premium Video Content WordPress Theme

60万円のサービスと同じサイトじゃんｗｗｗ

てか、URLも同じじゃねーか！！

酷すぎる……

何だよ！株式会社ドル○はWordpressのテーマ導入の代行だけで60万円取るのかよｗｗｗ

と心で一瞬思ったが、口に出すのはグッと堪える。

すぐに炎上するからね。

中小企業の技術力はそんなものだろうが、コンテンツ保有会社を相手にビジネスするのは厳しいんじゃ無いかな……。

で、結論。

WordPressのプラグイン「VideoFlix」を使うのが簡単！

slickを使って自作してみる

因みに、そのデモサイトを見て使われているライブラリを確認してみた。

ライブラリ	簡単な説明
theme-my-login.css	ワードプレスで会員制サイトを構築するときに便利なプラグイン
bootstrap.css	WEBサイトやWEBページを効率よく開発するためのWEBフレームワーク
wti_like_post_style.css	「いいね」機能を追加
truemag-rating.css	ビデオ広告、ビデオの自動再生などを兼ね備えたWordpressのプラグイン
animate.css	リッチなUIのWEBサイトを簡単に実装できる
contact-form-7.css	スタイル指定のためのカスタマイズ機能を提供
easy-tab.css	タブ切り替えをおしゃれにする
font-awesome-2.css	ウェブサイトやウェブアプリケーションで、アイコンを表示
slick.css	スライダーJSプラグイン
slick-theme.css	レスポンシブ対応のスライダー
malihu-scroll.css	カスタムスクロールバー
ionicons.css	プレミアムデザインのアイコン。SVGとWebフォント
billboard.css	「チャート」を即座に作成
cactus-video-css.css	ビデオ、チャンネル、プレイリストなど、テーマのすべてのビデオ関連機能を有効にするWordpressのプラグイン
lightbox-style.css	画像クリックで拡大画像を表示できるレスポンシブ対応の代表的スクリプト
priority-nav.css	メニュー項目を移動
jquery.js	JavaScriptを使いやすいように拡張してくれているもの
jquery-migrate.min.js	バージョンアップに伴って削除・変更された関数などの動かなくなった部分の補完をし、コンソールに表示して教えてくれるプラグイン

スライダー（カルーセル）部分は「slick」が肝だと分かった。

実は「カルーセル　スクロール　javascript」などで検索すると、slickが大量に紹介された知ってたけどね。

slick - the last carousel you'll ever need

slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more!

色々とカスタマイズできるが、次のデザインが目的のデザインに近い。

ググって調べるだけなら文系や中学生でもできるので、実際にデモを作ってみる。

ここからが本題。

デモサイトの中身を見てみる

基本部分はデモサイトを真似るに限る。

HTMLだとこのあたり。

    <div class="item-thumb" style="background-image: url(http://videoflix.cactusthemes.com/wp-content/uploads/2017/10/pexels-photo-258804-565x318.jpeg)">
        <div class="top-slide">
            <a class="btn-play-nf btn-play-nf-sm" href="http://videoflix.cactusthemes.com/electro-house-2016-best-festival-party-video-mix-new-edm-dance-charts-songs-club-music-remix/"></a>
        </div>
        <div class="bottom-slide">
                            <span class="like"><i class="ion-heart" aria-hidden="true"></i><span>15</span></span>
                                        <span class="time">3:15</span>
                    </div>
    </div>
    <div class="video-short-intro">
        <div class="main-slide">
            <div>
                <p><a href="http://videoflix.cactusthemes.com/electro-house-2016-best-festival-party-video-mix-new-edm-dance-charts-songs-club-music-remix/">Electro House 2016 Best Festival Party Video Mix | New EDM Dance Charts Songs | Club Music Remix</a></p>
                <p>
                                            <a href="http://videoflix.cactusthemes.com/uploader/netflix/" class="author cactus-info font-size-1"><span>netflix</span></a>
                                                                / <a href="http://videoflix.cactusthemes.com/electro-house-2016-best-festival-party-video-mix-new-edm-dance-charts-songs-club-music-remix/" target="_self" class="cactus-info" rel="bookmark"><time datetime="2017-10-02T08:11:31+00:00" class="entry-date updated">October 2, 2017</time></a>                                    </p>
 ....

</div>

</div>

<div>

<p><a href="http://videoflix.cactusthemes.com/electro-house-2016-best-festival-party-video-mix-new-edm-dance-charts-songs-club-music-remix/">Electro House 2016 Best Festival Party Video Mix | New EDM Dance Charts Songs | Club Music Remix</a></p>

<p>

<a href="http://videoflix.cactusthemes.com/uploader/netflix/" class="author cactus-info font-size-1"><span>netflix</span></a>

/ <a href="http://videoflix.cactusthemes.com/electro-house-2016-best-festival-party-video-mix-new-edm-dance-charts-songs-club-music-remix/" target="_self" class="cactus-info" rel="bookmark"><time datetime="2017-10-02T08:11:31+00:00" class="entry-date updated">October 2, 2017</time></a> </p>

....

JSは「videoflix/js/script.js」などに設定オプションが書いてある。

    var videoLikeThisSlick = function () {
        $('.video-like-this').slick({
            infinite: true,
            slidesToShow: 3,
            slidesToScroll: 3,
            speed: 300,
            dots: false,
            variableWidth: true,
            rtl: check_rtl,
            responsive: [{
                breakpoint: 1555,
                settings: {
                    slidesToShow: 5,
                    slidesToScroll: 1,
                }
            }, {
                breakpoint: 1300,
                settings: {
                    slidesToShow: 4,
                    slidesToScroll: 1
                }
            }, {
....

var videoLikeThisSlick = function () {

$('.video-like-this').slick({

infinite: true,

slidesToShow: 3,

slidesToScroll: 3,

speed: 300,

dots: false,

variableWidth: true,

rtl: check_rtl,

responsive: [{

breakpoint: 1555,

settings: {

slidesToShow: 5,

slidesToScroll: 1,

}

}, {

breakpoint: 1300,

settings: {

slidesToShow: 4,

slidesToScroll: 1

}

}, {

....

うん、よく分からん。

slickの各オプションの意味は次のとおり。

オプション	意味
infinite	スライドのループを有効
slidesToShow	一度に表示するスライド数
slidesToScroll	スライドした際にスクロールされるスライド数
speed	スライドやフェード時のアニメーション速度(ミリ秒)を指定
dots	ナビゲーション用ドットの有効無効
variableWidth	スライドの要素の幅をcssで設定するか？
responsive	ブレイクポイントと設定オブジェクトが含まれたオブジェクトの配列を指定
centerMode	前後のスライドちょい見せ

じゃぁslick使ってデモ作ってみるかーー。

vimioを使ってプレビュー表示を行ってみる

動画はVimeoに置いて管理したいらしい。

Vimeo（ヴィメオ）とは、2004年11月に開設された動画共有サイト。

ググったら「froogaloop2.min.js」や「player.js」を使って、Vimeoのプレビューの仕組みが実現できるらしい。

GitHub - vimeo/player.js: Interact with and control an embedded Vimeo Player.

Interact with and control an embedded Vimeo Player. - vimeo/player.js

サンプル見て作ったら、複数動画を並べるとマウスホバーで最後の動画しかプレビューされなかった。

悩んでいたら、stackoverflowに全く同じ質問を発見。

Play vimeo videos on mouse hover

I have four vimeo iframes in a page. I want to play the video on mouseover and pause the video on mouseout. The following code works, but only for the last vide...

$('.product-card-media').mouseover(function(){
var player = $("#" + this.id);
        froogaloop = $f(player[0].id);
        froogaloop.api('play');
        player.mouseout(function(){
            froogaloop.api('pause');
        });
});

$('.product-card-media').mouseover(function(){

var player = $("#" + this.id);

froogaloop = $f(player[0].id);

froogaloop.api('play');

player.mouseout(function(){

froogaloop.api('pause');

});

で、できたものをCodePenに置いてみた。

ブラウザ上でHTML、CSS、JavaScriptのコードを記述し、リアルタイムで表示を確認しながら開発をすることができるサービスね。

今まで使ったこと無かったけど便利じゃん！

See the Pen
by nehori (@nehori6)
on CodePen.

サムネイルにマウスアイコンが乗ると、自動的にプレビューがスタートする。

画像／動画を使ってプレビュー表示を行ってみる

Vimeoで作ってみたが、iframeで呼び出すとスライド（カルーセル）がマウスドラッグで動作しない。

iframeの中のコンテンツに対してマウス操作の命令が行ってしまっているのだろう。

これUX的に実現できてない……駄目じゃん。

まあ、そうだよね。

次に、iframeではなく自サーバ上のビデオ／画像を使う形で対応してみる。

JSは次のようになる。

$(document).on({
    mouseenter:function(){
        $(this).addClass('on');
        $(this).find('.v')[0].currentTime = $(this).find('.v')[0].initialTime || 0;
        $(this).find('.v')[0].play();
    },
    mouseleave:function(){
        $(this).removeClass('on');
        $(this).find('.v')[0].pause();
    }
},'.stage');

$(document).on({

mouseenter:function(){

$(this).addClass('on');

$(this).find('.v')[0].currentTime = $(this).find('.v')[0].initialTime || 0;

$(this).find('.v')[0].play();

mouseleave:function(){

$(this).removeClass('on');

$(this).find('.v')[0].pause();

}

},'.stage');

HTMLは次のとおり。

<div class="slider-3">
      <article>
        <div class="stage expand">
        <a href="https://www.youtube.com/watch?v=1">
        <video class="v" loop poster="/img/thumbnail1.png" width="400" height="225">
        <source src="./video1.mp4">
        </a>
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
        </div>
      </article>
      <article>
        <div class="stage expand">
        <a href="https://www.youtube.com/watch?v=2">
        <video class="v" loop poster="/img/thumbnail2.png" width="400" height="225">
        <source src="./video2.mp4">
        </a>
	<div class="mask">
		<div class="caption">It's fresh !</div>
	</div>
        </div>
      </article>
</div>

</a>

<div class="caption">It's fresh !</div>

</div>

</article>

</a>

<div class="caption">It's fresh !</div>

</div>

</article>

</div>

著作権フリーなコンテンツを用意するのが面倒だからCodePenのデモはないけど、サクサク感は出てた。

マウスが重なるとサムネイル画像・ビデオを拡大する

デモサイトを見ると、マウスホバーでサムネイルが大きくなる。

それを実現するのはCSS。

video {
	-webkit-transition: all 1s;
	transition: all 1s;
}
.expand video:hover{
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}

video {

-webkit-transition: all 1s;

transition: all 1s;

}

.expand video:hover{

-webkit-transform: scale(1.2);

transform: scale(1.2);

}

HTMLは次のように書く。

<div class="expand">
<video class="v" loop poster="/img/xxx.png" width="400" height="225">
<source src="./xxxxx.mp4">
</div>

</div>

これは簡単に実現できた。

何となく似てきた！

マウスが重なると画像上に文字が表示される

ググったら、これも情報がある。

でも、前述のサムネイル画像の拡大と相性が悪く両立できなかった。

.expand {
	overflow:		hidden;
	position:		relative;
}
.expand .mask {
	width:			100%;
	height:			100%;
	top:			0;
	left:			0;
	position:		absolute;
	opacity:		0;
	background-color:	rgba(0,0,0,0.4);
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
.expand:hover .mask {
	opacity:		1;
}
.expand .caption {
	text-align: 		center;
	padding-top:		90px;
	color:			#fff;
}