実現したいこと
こちらの動画コンテンツ(19秒)を読み込ませると、初期表示時は、00秒時点の画像が表示されますが、
こちらの表示を再生終了(19秒)時点の画像を表示したい。
html
1<video controls autoplay width="100%" height="100%" id="chvid0"> 2 <source src="data/A1/A1.mp4" class="change"> 3</video>
videoタグにどういったものを記載すれば解決しますでしょうか。
よろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答3件
0
再生終了時点の画像を用意しておいて
終了時に、画像を表示させるというやり方なら
http://kimagureneet.hatenablog.com/entry/2016/10/25/114957
多分こんな感じでいけるのではと思います。
html
1<video controls autoplay width="100%" height="100%" id="chvid0"> 2 <source src="data/A1/small_p2_target_decaying_infinite.mp4" class="change"> 3</video> 4<img src="再生後の画像" alt="" data-video-id="chvid0"> 5
javascript
1var video = document.getElementById('chvid0'); 2 3video.addEventListener('ended', function() { 4 5 video.style.display = 'none'; 6 7 var videoID = video.id; 8 $('img[data-video-id="'+videoID+'"]').css('display', 'block'); 9});
それか、全てJSで制御するなら
javascript
1var video = document.getElementById('chvid0'); 2 3video.addEventListener('ended', function() { 4 5 //一時停止 6 video.pause(); 7 //微妙に少しだけ巻き戻す 8 video.currentTime -= 0.1; 9});
画像の用意はいらないです。
試してないのでなんとも言えないですが…
投稿2018/02/17 07:55
編集2018/02/17 08:33総合スコア3404
0
ベストアンサー
いただきましたコメントを参考に下記によって、対応できました。
js
1 if ($(this).get(0).tagName == 'VIDEO') { 2 var video = $(this).get(0); 3 if ($(this).hasClass('keep')) { 4 video.addEventListener('loadedmetadata', function () { 5 video.currentTime = video.duration; 6 }); 7 } 8 video.load(); 9 }
投稿2018/02/20 10:57
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/21 01:11
0
いただきました回答を参考にし、以下方法で実現はできました。
js
1function changeUser(dir) { 2 $('.change').each(function () { 3 //タグ取得 4 var tag = $(this).get(0).tagName; 5 changeTag = 'src'; 6 7 var chSrc = $(this).attr(changeTag).split('/'); 8 var chpath = $(this).attr(changeTag).replace(chSrc[1], dir); 9 10 if (tag == 'VIDEO') { 11 $(this).attr(changeTag, chpath); 12 var video = $(this).get(0); 13 video.load(); 14 video.currentTime = 100; 15 console.log(video.currentTime); 16 video.pause(); 17 } 18 else if (tag == 'IMG' || tag == 'IFRAME') { 19 $(this).attr(changeTag, chpath); 20 }
ただし、下記の時間指定が微妙になります。
js
1video.currentTime = 100;
何か良い案があれば教えてください。
投稿2018/02/20 02:48
退会済みユーザー
総合スコア0
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/02/17 08:05
2018/02/17 08:36
退会済みユーザー
2018/02/20 02:45
退会済みユーザー
2018/02/20 04:23