前へ次へと移動できる動画再生機能を実装した

この記事は 驚異のFANZA女優検索 Advent Calendar 2021 の 15 日目の記事です。

動画再生

FANZAと言えば動画。動画再生に関しては本家にもない機能が欲しくて自分で作った。このサービスの中で最も頑張った所の一つだ。

iframeで動画再生

女優APIの中に動画のリンクがある。htmlでiframeを使って動画のリンクをsrcに書けば、これでもう動画は再生出来る。簡単。動画をHPに置いて再生出来るようにしたいだけならこれで十分。実際作品ページはこれで実装している。

<iframe src="@(Model.SampleMovieSpURL)"></iframe>

沢山の動画がある場合は再生時に実体化する

女優ページのように作品一覧があって、その作品毎に動画がある場合、全部iframeで置くのは問題がある。iframeを複数に設定すると単純に重い。作品数が多ければもう激重ぷんぷんまるだ。複数iframe 重いでググると一杯出てくる。ポピュラーな方法はiframeをsrcからdata_srcに変えてクリック時にjavascriptでsrcに戻す方法だ。これで一覧で並んでいても実体はクリックした時だけになる。

<iframe data-src="@(Model.SampleMovieSpURL)"></iframe>

//javascriptでdata-srcをsrcに変える
element.setAttribute('src', attribute);

lityでポップアップ

どうせクリック時に再生する仕組みにするなら、再生ボタンを置いてそれをクリックするとポップアップして再生したいと思った。調べた感じだと、Lityを使うと良い感じにポップアップ再生してくれそうなので使ってみた。まあ悪くない感じになった。

動画再生でポップアップで次へ

ただ静止画はクリックするだけで次の画像に行くけれど、動画はクリックして次の動画に行く機能がない。これは本家FANZAにもないけれど、個人的にはポップアップ再生時に次へ行く機能が欲しいと思った。思ったので作った。Lityを改造するよりも、もうポップアップ部分を全部書いた方が良さそうだと思ったので、ゼロから作ることにした。

次へ前へ移動できる部分を自作

実際に次の動画をクリックする外見はhtmlで次へと前への hrefを作るだけで良い。ただクリック時の実装のデータの仕込みはサーバー側でC#でやっている。先ず次へを実装するには、1動画ずつ前への動画と次の動画を設定する必要がある。全ての作品に動画があればprevに1個前、nextに1個後を足せば良い。後は最初の動画の前は最後の動画、最後の動画の次は最初の動画とすれば完成だ。ただ、全作品に動画があるわけではないので、prevが1個前とは限らない。動画があるものだけで前へ次へを作らればならない。後は実際にクリックされた時にjsで新しい動画を読み直している。先読みすると不安定になるのでクリック時に今の動画は破棄して、クリックされた動画を作っている。

動画サイズが複数ある

さて、ポップアップ再生の仕組みは、これ以外にも問題がある。DMM.comの商品検索APIを見ると、動画は4サイズ分用意されている。つまり画面サイズによって動画サイズは変える方が望ましい。特にスマホは大きい動画だと横が切れてしまう。そこでサイズを変えたらそのサイズに最適な動画になるようにした。CSSを使うことによってレスポンシブに出来る。この方法はYoutubeのように動画サイズが決まっている場合にうまくいく。これを作る時まで気づいていなかったがDMMが提供する動画のサイズは結構マチマチだ。

iframeレスポンシブ

色々cssを設定して試してみたが、どんなサイズでも良い感じにやるのは無理だった。とりあえず大きい動画サイズ、横720と560はそのまま出して、それ以下の場合は、positionを使う方法が一番マシにはなった。これでも元々も動画のサイズによって、またブラウザのサイズによって黒い帯が広かったりしてイマイチだったりするが、これ以上は分岐で個別対応していくしかないかなーと言う感じだ。

.iframeMovieL {
    width: 720px;
    height: 480px;
}

.iframeMovieM {
    width: 560px;
    height: 360px;
}

.iframeMovieS {
    position: relative;
    width: 100%;
    padding-top: 64.28%;
}

.iframeMovieS iframe {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

他の画像読み込みなどがあると動画再生は不安定になる

また動画は様々な原因で不安定になる。例えば同一ページに画像が沢山ある場合、全画像を読み込むまで動画再生は安定しない、再生出来たとしても止まるみたいなこともある。これを回避する方法は画像を減らす以外はないと思う。実際にこのために一覧表示の最大表示数を減らした。ネットワークが遅いとさらに問題があるかもしれない。

一度に複数の動画を実体化すると不安定になる

またブラウザの画面サイズを変えた場合に動画もそのサイズ合わせたものに変わるようにしていたが、これをするには複数のサイズの動画を実体化する必要がある。しかし2個以上実体化すると不安定になる。なのでサイズ変更時は動画がなくなるのを許容した。

次の動画のビジュアルが欲しくなった

で、一応完成して、動画も安定化してきたので、実際に使ってみたら、やっぱり次へ前へ移動は便利だった。ただ不満も出てきた。折角前や次の動画に行けるのに、その動画がどんな内容か分からない。つまり文字だけでなくビジュアルが欲しくなった。そこで前へ次へと表記するだけでなくパッケージも置くようにした。さらに前へ次へだけでなく10個ぐらいから選べるようにもしたくなったが、今回はそこまではやっていない。

まとめ

動画はかなりデリケートで大量の女優を相手にしたり、複数同時に相手にしたりするとすぐに機嫌が悪くなる。やはり動画は一人だけに注力してその女優のことだけを考えないと怒られるようだ。というわけで前へ次へと移動できる動画再生機能を是非使ってみてほしい。くれぐれも浮気はしないように。