急いでいます！

[急ぎ] videoタグで埋め込んだmp4 動画をColorboxで自動再生する方法

解決済

質問者：konyagayamada
質問日時：2017/03/07 18:35
回答数：1件

[ 急ぎ：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>

よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1ベストアンサー

回答者： fujillin
回答日時：2017/03/08 15:01

こんにちは

やったことはないのですが、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>

- 0
- 件

通報する

この回答へのお礼

fujillin様
詳細な回答ありがとうございます。
また、実際のコードの具体例や参考URLまで記載いただき、本当にありがとうございます。
教えていただいた上記コードを元にコードを修正したところ、無事自動再生ができました。本当に助かりましたm(_ _)m！！
親切丁寧に教えていただき心より感謝申し上げます。

通報する

お礼日時：2017/03/09 09:27

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！