JSで要素を順番に処理をしたい

前提・実現したいこと

HPを作っていて、

①最初にローディング画像が表示される。その画像は３秒後にフェードアウトする
②ローディング画像がフェードアウト後に、ビデオが再生
③ビデオ再生が終わったら、ビデオが消える
その後、コンテンツが表示される

ということをやりたいのですが、
当方、JS初心者で、参考サイトを見て作っているのですが、うまくいきません。

①画像３秒後フェードアウトと、③ビデオを消すはうまくいくのですが、
②のビデオが再生ができません。
videoタグにautoplayをつけず、【$(".video").play();】で再生を制御できるかと思ったのですがだめでした。

上手くいく方法をお教えいただければと思います。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

html
1<body>
2
3
4	<img class="loading-img" src="loading-img.jpg" >
5	<video class="video" src="video.mp4" playsinline muted oncontextmenu="return false;"></video>
6	<div class="contents">
7		コンテンツコンテンツコンテンツコンテンツコンテンツ
8	</div>
9	
10	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
11	<script>
12		$(function() {
13			const promise = new Promise(function(resolve, reject){
14				//１番目：ローディング画像を３秒後にフェードアウト
15				setTimeout(function() {
16					$('.loading-img').fadeOut();
17					resolve();
18				}, 3000);
19			});
20			promise.then(function(){
21				//２番目：ローディング画像がフェードアウト後にビデオが再生
22				$(".video").play();
23			}).then(function(){
24				//３番目：ビデオ再生が終わったら、ビデオが消える
25				$(".video").css("opacity", "0");
26			});
27		});
28	</script>
29</body>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryオブジェクトには play() というメソッドはありません。
element にはあります。

HTMLMediaElement.play() - Web API | MDN

手っ取り早い解決として$(".video")[0].play()としてみるのはどうですか？

投稿2021/10/15 06:33

Lhankor_Mhy

総合スコア36960

cc-taishi

2021/10/15 08:08 編集

ありがとうございます！再生されました！ただ、再生が始まると同時に【$(".video").css("opacity", "0");】が発火してしまうようで、動画が消えていってしまいます。 promise.then(function(){ //②：ローディング画像がフェードアウト後にビデオが再生 $(".video")[0].play() }).then(function(){ //③：ビデオ再生が終わったら、ビデオが消える $("#page-loader-video").css("opacity", "0"); }); ここらへんの記述が間違っているのでしょうか？＞＜

Lhankor_Mhy

2021/10/15 08:24

イベントを拾うしかないと思います。 https://developer.mozilla.org/ja/docs/Web/API/HTMLMediaElement/ended_event

cc-taishi

2021/10/15 10:03

ありがとうございます！助言と参考サイトをもとに、以下のようにやったらうまく処理できました。 $(function() { const promise = new Promise(function(resolve, reject){ //①：ローディング画像を３秒後にフェードアウト setTimeout(function() { $('.loading-img').fadeOut(); resolve(); }, 3000); }); promise.then(function(){ //②：ローディング画像がフェードアウト後にビデオが再生 $(".video")[0].play(); }); }); //③：ビデオ再生が終わったら、ビデオが消える const video = document.querySelector('.video'); video.addEventListener('ended', (event) => { $(".video").css("opacity", "0"); });

行動規範の内容に同意します