jQuery スクロールで表示領域に入ったら動画を再生させたい

Question

お世話になります。

jQueryで、スクロールで表示領域に入ったら動画を再生させたいのですが、うまくいきません。

<video id="bgvid" width="100%" loop muted controlslist="nodownload"  preload="metadata" muted autoplay playsinline>
 <source src="images/movie.mp4" type="video/mp4"> 
 </video>

<script type="text/javascript">	
$(function(){
	var $video = $('video');
  $(window).scroll(function (){
    $('video').each(function(i){
      var imgPos = $(this).offset().top;    
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + windowHeight/3){
      $video.play();
    });
  });
	});	
</script>	

動画は上から2つめのボックス（要素）になっております。

また、表示領域に入ったら動画を数秒後に再生させたく、delayやsetTimeoutを組み合わせてみましたがうまく動かなかったので、どなたかご教授いただければ幸いです。

Answer 1

$video.play();

ここを

$video.get(0).play();

にしたら動きそうな気がするのですがいかがでしょうか？？
こういう問題じゃない感じですかね？????

---追記

if (scroll > imgPos - windowHeight + windowHeight/3){
      $video.get(0).play();
}

多分ifの部分をこのようにすれば動く気がします・・・
ifのとじ} と、 .get(0) の追加です。

こっちで動作確認できます。
https://jsfiddle.net/spadeLoves/fbzgno18/

Comments

[pentaroh]

返信ありがとうございます。
上記の方法で試してみましたが、結果は変わりありませんでした…。
もう少しほかの方法を模索してみますー。

[Spade]

こちらだと動いている感じなのですが・・・ちょっと見ていただけますか？？
https://jsfiddle.net/spadeLoves/fbzgno18/

[pentaroh]

spade様

テストページもありがとうございます！
上記の方法で動作しました！
助かりました。ありがとうございました。

[Spade]

よかったです！
jqueryのオブジェクトだと.play()が使えないみたいなので、.get(0)を挟んでJSの生のオブジェクトを取ってこないといけないみたいです！参考までに！

[pentaroh]

そうだったんですね。勉強になりました。ありがとうございます。