TwitterやFacebookのTLによく使われますね。
スクロールしたら自動で動画が再生されるアレ。

このギミックをjqueryで実装したメモです。

スクリプトを読み込む

jqueryなので、お約束のモジュールいれましょう。
フッタ部分でいいです。

<script src="jquery-1.11.3.min.js"></script>

また、その下にファンクションをいれます。

<script src="jquery-1.11.3.min.js"></script>
<script src="function.js"></script>

jqueryはhttpsを利用してもいいです。
function.jsではなく、function.js内のスクリプトを、そのまま記述してもOKです。

HTMLを記述する

ここではvideoタグを使用します。

<video muted playsinline loop>
<source src="movie.mp4" type="video/mp4">
<img src="movie.png">
</video>

function.jsのスクリプト

function.js内に記述するスクリプトです。

$(window)
.on('scroll resize', function () {
var windowScrollTop = $(window).scrollTop();
var windowInnerHeight = window.innerHeight;

var $video = $('video');
var videoTop = $('video').offset().top;
var videoHeight = $('video').innerHeight();

// videoが停止している、かつvideoが画面内に入ってきた場合、再生処理
if ($video[0].paused && (windowScrollTop + windowInnerHeight > videoTop)) {
$video[0].play();
}

// videoが再生中、かつ画面外に出た場合、停止処理
if (!$video[0].paused && ((windowScrollTop + windowInnerHeight < videoTop) || (windowScrollTop > videoTop + videoHeight))) {
$video[0].pause();
}
})
.trigger('scroll');

ウインドウのスクロール量と高さを取得

var windowScrollTop = $(window).scrollTop();
var windowInnerHeight = window.innerHeight;

videoタグの情報を取得

var videoTop = $('video').offset().top;// videoがページの最上部からどの位置にあるか取得
var videoHeight = $('video').innerHeight();// videoの高さ取得

停止再生を実行

// videoが停止している、かつvideoが画面内に入ってきた場合、再生処理
if ($video[0].paused && (windowScrollTop + windowInnerHeight > videoTop)) {
$video[0].play();
}
// videoが再生中、かつ画面外に出た場合、停止処理
if (!$video[0].paused && ((windowScrollTop + windowInnerHeight < videoTop) || (windowScrollTop > videoTop + videoHeight))) {
$video[0].pause();
}

これで実行できます。

デモ