posterのタイミングでクラス変更

前提・実現したいこと

お世話になっております。
javascriptの件で困っていて知恵を貸して頂ければと思っています。

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

やりたい事としてはvideoタグでposterになったタイミングで適応クラスを変えたいのですが、やり方がいまいちわからない状態です。

経緯としては動画の一部を表示の上でposterは全てを写したく、clip-pathを用いたのですが、poster側にも適応されるために困っております。

該当のソースコード

html
1<video poster="common/img/top.png" muted controlslist="nodownload" autoplay src="common/data/sample.mp4" id="video">
2				<source src="common/data/sample.mp4" type="video/mp4"/>
3		</video>
4

css
1#video{
2	margin: 0 auto;
3	max-width: 595px;
4	clip-path: inset(0 30% 0 30%);
5}
6
7

javascript
1$( window ).ready(function(){
2		var video = document.getElementsByTagName('video')[0];
3		video.addEventListener('ended', function() {
4    video.load();
5    video.autoplay=false;
6}, false);
7	});
8

試したこと

https://teratail.com/questions/61997

上記だと少しずれるので目的を達成できず、目的としてはifreamの方が向いている気もしたので試みましたが、知識不足で画像の表示が上手くいきませんでした。
動的な部分の知識が疎いために発生していると思うので、大変申し訳ないのですが、ご助言頂けたら幸いです。

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

したい事としては動画の一部分を表示の上、動画終了後画像を表示する事がしたい状況です。
もし、こうした方が良いと言うののがあれば、ご意見頂ければ助かります。

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

回答1件

ベストアンサー

意図が汲み取りにくいですが、要は「動画再生中はclip-pathを適用し、動画再生が終了したら適用させない」ということでしょうか？

ご提示のhttps://teratail.com/questions/61997の質問のやり方がほぼ適用できると思うのですが、何か不都合があるのでしょうか？

html
1<video 
2  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217" 
3  id="video" class='playing'
4  muted autoplay controlslist="nodownload">
5  <source src="https://www.w3schools.com/html/mov_bbb.mp4"  type="video/mp4" />
6</video>

css
1#video {
2  margin: 0 auto;
3  max-width: 595px;
4}
5
6.playing {
7  clip-path: inset(0 30% 0 30%);
8}

$(window).ready(function() {
  const video = document.querySelector('#video');

  video.addEventListener('ended', function() {
    $(video).removeClass('playing')
  }, false);
});