[ 急ぎ:video タグで埋め込んだmp4 動画をColorbox で自動再生する方法]
videoタグで埋め込んだ動画をjqueryのColorboxでポップアップ表示⇒再生ボタンを押して動画が再生できるところまではできたのですが、ポップアップで開いた動画を自動再生するには、下記どこを追記・修正すればいいでしょうか。どなたかご教示ください。
スクリプト:
<script>
$(document).ready(function(){
$(".inline").colorbox({inline:true});
$("#click").click(function(){
$('#click').css({"background-color":"#f00", "color":"#fff", "cursor":"inherit"}).text("Open this window again and this message will still be here.");
return false;
});
});
</script>
HTML:
<!--サムネイル-->
<a class="inline" href="#inline_content">
<img src="images/common/xx.png">
</a>
<!--インライン-->
<div style="display:none">
<div id="inline_content">
<video autoplay controls width="640" height="480">
<source src="images/index/japanese.mp4" type="video/mp4">
<p>ご利用のブラウザはvideo タグによる動画の再生に対応していません。</p>
</video>
</div>
</div>
よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
こんにちは
やったことはないのですが、Colorboxはこれ(↓)でしょうか?
http://www.jacklmoore.com/colorbox/
もしそうなら、ドキュメントによると表示時にcallbackが呼ばれる仕組みになっているようですので、これを利用してvideo要素をplayメソッドで実行すればよさそうですね。
※ ご提示のサンプルでは、$('#click')に対応する要素が見当たらず、また、何を意図しているのかも不明なので、別個に作成しました。
※ 動画(mp4)のサンプルは、以下のサイト様から借用しています。
http://www.htmq.com/
※ video要素の制御に関しては、以下を参考にしています
https://developer.mozilla.org/ja/docs/Web/HTML/U …
※ fx51およびIE11で動作確認しています。
※ CSSなどは最低限の仮設定です。
※ 回答欄ではソースのURL部分が短縮表示されてしまうと思いますのでご注意ください。
<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
html, body { width:100%; height:100%; }
#cboxOverlay {
position:absolute; top:0;
width:100%; height:100%;
background-color:#666;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.2. …
<script src="https://cdn.jsdelivr.net/colorbox/1.6.4/jquery.c …
</head>
<body>
<article>
<h3>mp4表示のテスト</h3>
<p><a href="#video" id="test">
<button type="button" value="start">表示</button>
</a></p>
</article>
<article style="display:none;">
<video id="video" preload="auto" width="320" height="240">
<source src="http://htmq.com/html5/sample/sample.mp4" />
</video>
</article>
<script type="text/javascript">
$("#test").colorbox({
inline: true,
onComplete: function(){$("video").get(0).play();}
});
</script>
</body>
</html>
fujillin様
詳細な回答ありがとうございます。
また、実際のコードの具体例や参考URLまで記載いただき、本当にありがとうございます。
教えていただいた上記コードを元にコードを修正したところ、無事自動再生ができました。本当に助かりましたm(_ _)m!!
親切丁寧に教えていただき心より感謝申し上げます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
createElementで作成した要素を...
-
関数の引数を動的に変えたい
-
VideoBoxのカスタマイズ
-
iframe内のリンクが飛ばないの...
-
getElementByIdの戻り値がnull...
-
テキストエリア内の一部の文字...
-
背景色を透明化
-
新しいウィンドーでJavascript...
-
console.log結果をhtmlで表示し...
-
JAVAスクリプトについて
-
初歩的なソースで質問です
-
クリックで色変更後に既に変更...
-
前回の質問の続き function mov...
-
表示・非表示のスクリプトで、...
-
セレクタの指定について質問です
-
前回の質問の続き function mou...
-
それぞれにオンマウス動作
-
要素を指定の場所に追加
-
フラッシュの様に
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
MAX関数を使ってからLEFT JOIN...
-
前回の質問の続き function mov...
-
前回の質問の続き function mou...
-
読み込んだQRコードをフォーム...
-
javascriptテキストBOX色を元に...
-
背景色を透明化
-
iframe内のリンクが飛ばないの...
-
createElementで作成した要素を...
-
IFRAMEの表示/非表示を切り替え...
-
removeEventListenerについて
-
クリックで色変更後に既に変更...
-
removeAttribute()メソッドで削...
-
console.log結果をhtmlで表示し...
-
javascriptでオブジェクトの重...
-
タブで開いてさらにタブ内をア...
-
jQueryで特定id以外の下にある...
-
指定したパスが現URLに含まれて...
-
折りたたみ部分にアンカーでリ...
-
前回の質問の続き
-
jQueryのアコーディオンメニュ...
おすすめ情報