あまり見かけない
動画再生の形のサンプル

このページはスマートフォンでご覧ください。

< Wondersブログへ戻る
close

あまり見かけない動画再生の形

サムネイルをタップしてみましょう

色々な動画を貼っておきます。「観ながら記事を見る」ということを試してみてください。(動画と文章の関係性が全く無いので役に立つかわかりませんが......)

サムネイルをタップすると、画面上部にYouTubeプレイヤーが生成されます。生成されたプレイヤーをタップすることで動画を再生することができます。大変残念なことに、ユーザーにはサムネイルとプレイヤーに計2回タップしてもらう必要があります。

ユーザーの意思以外では動画を再生することができない仕様になっています。なので、サムネイルタップ→自動再生ということは僕の知っている限りでは不可能です。(※一定の条件下においては可能になってきているようです。)

動画再生時のスマホの向きはどっち派?

あなたはスマートフォンで動画を観るとき、スマートフォンを縦のまま観ますか?スマートフォンを横にして観ますか?

僕の場合、YouTubeアプリを開いて動画を観るときは、横向きにして最大化して観ます。Webブラウザを開いて、Webページ内に埋め込まれているような観る予定が無かった動画を観るときは、縦のまま最大化せずに数秒だけ再生します。(その動画に含まれるコンテンツが最初から興味を持っているものであれば、横向きにして拡大して観ます。)

そもそも僕はスマートフォンのWebブラウザ上では動画を再生することはあまりしません。

スマートフォンWebブラウザで感じる動画再生の苦痛

僕がスマートフォンのWebブラウザ上で動画を再生しない、最大の理由は「動画に拘束されてしまう」からです。

動画再生中は画面に表示された範囲以外見ることができません。画面の自由を奪われてしまうので、よっぽど気になる動画でなければいつも無視しています。

モーダル表示→動画再生というものが標準化していますが、動画の情報とテキストの情報を両方同時に得たい欲がある僕にとっては地獄のような仕様です。

この機会に一度、モーダルだけにとらわれずに最適な再生方法を考えてみるのも良いですね!

僕の悩みを解決した動画再生方法

既にこのページで動画を再生している方の中で既にお気づきの方はいるのではないでしょうか?実はこの再生方法は全く新しいものではありません。

YouTubeの公式アプリが既にこのスタイルで実装しているのです。YouTubeにはとんでもなく強力な関連動画機能があります。動画を閲覧しながら次の動画を探せてしまう回遊を止められなくなってしまう最凶のUIです。

こんな素晴らしいUIをWebページに持ってきたらどうなんだろ、と思ったのが今回のサンプルになります。多くのユーザーがアプリに慣れてしまっているはずなので、外部サービスを埋め込む際には、公式アプリをリスペクトしてアプリに寄せていくのも快適なブラウジングを助ける材料になるのではないでしょうか?

個人で運営しているエンタメ系ブログにも同様の実装をしてみたところ、滞在時間が大きく改善したように思います。(正確なデータを出せるほどのアクセスが無いことと、機能を追加した時期が曖昧なので自信を持って断言できませんが...!)

今回実装をしてみて、自分の中ではメディアサイトに限り「アリ!」だと感じました。皆様はどのように感じられましたでしょうか?