質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

3回答

1087閲覧

videoタグコンテンツの初期表示を再生終了時点の動画を表示したい

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2018/02/17 07:48

編集2018/02/19 05:00

実現したいこと

こちらの動画コンテンツ(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ページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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
kszk311

総合スコア3404

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/02/17 08:05

そうですね、もちろんposterに再生終了後の画像を置けばよいのですが、Videoタグとjavascriptを活用して何か方法はありますでしょうか。
kszk311

2018/02/17 08:36

posterを使用した内容ではないです、また追記しましたのでご確認いただければと思います。
退会済みユーザー

退会済みユーザー

2018/02/20 02:45

video.currentTime -= 0.1;では 最後の画像表示となりませんでした。
退会済みユーザー

退会済みユーザー

2018/02/20 04:23

また、初期読み込み時にvideoタグを操作するためにはどのようにすべきでしょうか。
guest

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kszk311

2018/02/20 15:09

しばらく返信できずにすみません。解決できたようで何よりです。
退会済みユーザー

退会済みユーザー

2018/02/21 01:11

いえいえ、アドバイスのおかげで理解することができました。 ありがとうございました。
guest

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

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問