スマホ上でサムネイルに触れると動画プレビューを自動再生する機能の実装

Question

YouTubeアプリや、PornhubやXvideosのようなアダルトサイトでよく実装されている、スマホ画面上でサムネイルに触れると数秒間の動画プレビューが自動再生する機能を実装したいと思っているのですが、やり方が分かりません。

Chromeのdevツールで直接サイトのjavascriptを見てみましたが、初心者ゆえコードを完全には理解出来ず、恐らくtouchstartイベントを使っているのではないか、というところで止まっています。

(※横にそれますが、本家サイトのJavascriptのコードをdevツールで見ても、書き方がいわゆる本やサイトで書かれている書き方と大分違いそれ故に理解しづらいのですが、なぜこのような書き方になっているのでしょうか？　
例えば var n, s, r, l, d, c, f, u = this;のように変数や関数がアルファベット一文字になってるなど)

上記サイトで、どのようにスマホ画面上での擬似的なマウスオーバーイベントおよび動画プレビューの自動再生を実装しているか、お分かりになる方がいればご教示頂けると有り難いです。

Comments

[gentaro]

例に挙げるサイトがサイトだけに釣りっぽく見えるから回答付きにくそうですけど。
別にそこはYouTubeとかでいいよね。

横にそれる部分なんで回答にはしませんが
> 例えば var n, s, r, l, d, c, f, u = this;のように変数や関数がアルファベット一文字になってるなど
「javascript minify」とかで調べてみよう。

[miyaken912]

YouTubeだと同じ機能実装されてないんですよね。アプリなら実装されてるのですが、Webだと実装されてなくて・・
他のサイトも探したのですが、首題のサイト以外に同様の機能を実装しているものが見つからなくてそうしました。
ただ釣りっぽく見えるのはその通りだと思うので、修正したいと思います。

javascript minifyで調べて理解しました！ありがとうございます。

Answer 1

HTMLの<video>タグを使うのが一番簡単かと思います。これならJavaScriptを使わずに任意のサムネイルをつけてその場で動画再生します。もしも的はずれだったらごめんなさい
HTML5のvideoタグで動画のストリーミング配信の仕方を現役エンジニアが解説【初心者向け】