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

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

新規登録して質問してみよう
ただいま回答率
86.02%
ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

jQueryの「Lity」を使用して、動画をポップアップ・自動再生したい

tanakahanako
tanakahanako

総合スコア11

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0グッド

1クリップ

6949閲覧

投稿2019/08/08 00:45

編集2019/08/08 05:42

前提・実現したいこと

jQueryの「Lity」を使用して、
画像をクリックしたら自作のmp4動画をポップアップ、自動再生したいと思っております。
自分で組んだコードでは、ポップアップ後の自動再生の再生位置がバラバラになってしまいます。
※初回の再生も中途半端な位置から再生されます。再生位置は毎回違って規則性はないように思います。

同じコードをサイト内の色々なページで使用して、どこでも最初から見れるようにしたいです。
毎回ポップアップ後の動画を始めから再生するには、どのように処理すれば良いかご教授頂けますと幸いです。

#ソースコード(HTML)

lang

1 2<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 3<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.css' /> 4<script src='https://cdnjs.cloudflare.com/ajax/libs/lity/1.6.6/lity.js'></script> 5 6 7<a href='#popup' data-lity="data-lity"> <img src='(画像のurl)aaa.PNG' width='200' height='auto' title="aaa動画"/></a> 8 9<div id='popup' class="lity-hide"> 10<video autoplay="true" controls="controls" controlslist="nodownload" height="600" id="video201961115307" poster="" width="800"><source src="(動画のurl)aaa.mp4" autoplay />Your browser doesn&#39;t support video.<br /> 11Please download the file: <a href="(動画のurl)aaa.mp4">video/mp4</a></video> 12</div> 13

試したこと

※コード内の「autoplay="true"」を「autoplay="false"」にした場合も同じでした。

ここにより詳細な情報を記載してください。

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2019/08/08 00:50

動画は自身が所持している動画でしょうか。
m.ts10806

2019/08/08 00:50

あと細かいですが「jQuery」です。
tanakahanako

2019/08/08 05:28

ご返信ありがとうございます。 動画は自身で所持しているものです。 仕事に関わるものなので、公開ができないのですが・・・ >>あと細かいですが「jQuery」です。 ご指摘ありがとうございます。修正いたしました。
m.ts10806

2019/08/08 05:29

すみません。タイトルも調整願います。(タグにあるのでタイトルに書かなくても良いとは思いますが) あとコードはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/help#about-markdown
m.ts10806

2019/08/08 05:41

>マークダウンのcode機能 難しければコード部分を選択し<code>ボタンを押すだけで良いですよ。
m.ts10806

2019/08/08 05:42

何が大事かってこれで行頭のインデントがきちんと反映されたり、ワンクリックでコピペできるようになるので、回答するために正しく再現確認ができるようになります。
tanakahanako

2019/08/08 05:42

すべてが初心者で申し訳ありません。。。 教えていただきありがとうございます!

回答1

1

ベストアンサー

画像がクリックされたときに
動画を最初に戻して再生すればどうでしょうか

JavaScript

1$(function(){ 2 $('a').click(function() { 3 $('#video201961115307').get(0).currentTime = 0; 4 $('#video201961115307').get(0).play(); 5 }) 6});

投稿2019/08/08 06:07

yxt003

総合スコア184

tanakahanako👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

回答へのコメント

tanakahanako

2019/08/08 06:49

できました!!!!!!!! ありがとうございました。 ご相談いただいた方、ありがとうございます。

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

ポップアップ

一般的に、ポップアップは、ウィンドウやアプリケーションに上に浮かぶUIエレメントを指します。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。