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

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

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

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

jQuery

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

Q&A

解決済

1回答

9500閲覧

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

tanakahanako

総合スコア11

ポップアップ

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

jQuery

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

0グッド

1クリップ

投稿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"」にした場合も同じでした。

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

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

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

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

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

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

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

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

回答1

0

ベストアンサー

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

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

2019/08/08 06:49

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.37%

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

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

質問する

関連した質問