Javascript Parserエラー

Question

私はポスターとCSS再生オーバーレイボタンを持つHTML5ビデオを持っています。私はそれがポスターと再生オーバーレイボタンを再び表示するように終了したら、ビデオを読み込むようにしようとしています。

私は次のコードを試しましたが、最後の行にParserエラーが表示されます。誰かが私を助けて、私が間違っていることを教えてください！

$(document).ready(function() { 
    $('.video').parent().click(function() { 
    if ($(this).children(".video").get(0).paused) { 
     $(this).children(".video").get(0).play(); 
     $(this).children(".playpause").fadeOut(); 
    } else { 
     $(this).children(".video").get(0).pause(); 
     $(this).children(".playpause").fadeIn(); 
    } 
    }); 

    var video= $(".video").get(0); 
    video.addEventListener('ended',function() { 
    video.load(); 
    $(".playpause").show();        
    }, false); 
}); 

Answer 1

setTimeout()コール内clickハンドラ内if文をラップし、

Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause(). 

エラーを防ぐために。

はHow to prevent "The play() request was interrupted by a call to pause()" error?

$(document).ready(function() { 
 
    $('.video').parent().click(function() { 
 
    var vid = $(this).children(".video").get(0); 
 
    setTimeout(function() { 
 
    if (vid.paused) { 
 
     vid.play(); 
 
     $(this).children(".playpause").fadeOut(); 
 
    } else { 
 
     vid.pause(); 
 
     $(this).children(".playpause").fadeIn(); 
 
    } 
 
    }) 
 
    }); 
 

 
    var video= $(".video").get(0); 
 
    video.addEventListener('ended',function() { 
 
    video.load(); 
 
    $(".playpause").show();        
 
    }, false); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
click<br> 
 
<span class="playpause">play pause</span> 
 
<video controls class="video" poster="https://placehold.it/350x150" src="https://nickdesaulniers.github.io/netfix/demo/frag_bunny.mp4"></video> 
 
</div>