setTimeoutが効かない

実現したいこと

画面幅1024px以下では動画を自動再生し、終了後に画面から消えて次のコンテンツが表示される

発生している問題・分からないこと

画面幅を設定しないものは正常に動作するのに、画面幅をwindow.matchMedia('(max-width: 1024px)').matches)で指定したものは、setTimeoutメソッドの中身だけが効かない

該当のソースコード

jQuery

1【正常に動作しているもの】 2$(function(){ 3 const opVideo = $('#opv').get(0); 4 $('#opv-wrap').fadeIn(1000); 5 6 opVideo.addEventListener('loadedmetadata', function() { 7 const playTime = opVideo.duration * 1000 - 1000; 8 9 setTimeout(function(){ 10 $('#opv-wrap').fadeOut(1000, function(){ 11 $('.slider_left').fadeIn(1000); 12 }); 13 }, playTime); 14 15 }); 16 17});

jQuery

1【setTimeout(function(){});の中身が動作していないもの】 2$(window).on('load resize', function(){ 3 if (window.matchMedia('(max-width: 1024px)').matches){ 4 const opVideo = $('#opv-sp').get(0); 5 $('#opv-wrap-sp').fadeIn(1000); 6 7 opVideo.addEventListener('loadedmetadata', function() { 8 const playTime = opVideo.duration * 1000 - 1000; 9 10 setTimeout(function(){ 11 $('#opv-wrap-sp').fadeOut(1000, function(){ 12 $('.main_visual').fadeIn(1000); 13 }); 14 }, playTime); 15 16 }); 17 18 } else { 19 $('#opv-wrap-sp').css('display','none'); 20 } 21});

試したこと・調べたこと

上記の詳細・結果

setTimeoutメソッドより上の関数は動いています。
画面幅を指定していない方はsetTimeoutメソッドも含め全て動いているので、何が悪いのかがわかりません。

補足

特になし