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

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

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

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

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

4834閲覧

videoタグを使い4つの動画をスライドショーさせながらクリックで再生させたい。

t-maekawa

総合スコア44

HTML5

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

JavaScript

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/07/18 11:29

編集2016/07/20 12:56

動画を公開しようと考えているのですが、1つではなく
4つの動画をスライドショーで自動切換えさせながら
クリックをすると該当の動画が再生され、動画が終了すると
もとのスライドショーに戻る、というのを作成したいと考えています。
いろいろと検索をしましたが、なかなか思うような結果が得られずとまっています。
ご存知の方おられましたら、どうがよろしくお願いいたします。

参考としたサイトは
http://creative.staff.mynavi.jp/haken/feature/webtech/0002.html

となります。
私が書いたコードは

<body> <div id="playList"> <p style="cursor:pointer" onClick="clickfunc(262);">ユース社員1</p> <p style="cursor:pointer" onClick="clickfunc(265);">男子社員1</p> <p style="cursor:pointer" onClick="clickfunc(263);">ユース社員2</p> <p style="cursor:pointer" onClick="clickfunc(264);">男子社員2</p> </div> <div id="video"> <video width="160" height="120" controls autobuffer> <p>このブラウザでは対応しておりません。IE9/Forefox/Chrome/Safari等をご利用ください。</p> <source src="http://dogo459.com/csm_movie/douga/1/free/1_free_262.mp4"> </video> </div> <!--#include virtual="/ssi/remark.html"--> </body>

<script type="text/javascript" src="jquery-1.7.1.js"></script> <script type="text/javascript"> function clickfunc(value) { var tag = '<video width="160" height="120" controls autobuffer><p>このブラウザでは対応しておりません。IE9/Forefox/Chrome/Safari等をご利用ください。</p>'; tag += '<source src="http://dogo459.com/csm_movie/douga/1/free/1_free' + value + '.mp4">'; $("#video").html(tag); } </script> コード

となります。

正直素人で見よう見まねでやってます。
基本的なところが間違っているかもしれませんが
よろしくお願いいたします。

スライドショーのようにして、クリックして該当の動画が再生、という風にしたいのですが、
同様の方法を書いたものが見つからず、プレイリストであれば上記のサイトがありましたので
やってみようかと考えました。

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

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

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

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

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

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

kei344

2016/07/18 12:51

具体的に何を参考にして、どこが求めているものと違ったのか、また、ご自身で書かれたコードを質問文に追記いただいたほうが回答を得られやすいと思います。
退会済みユーザー

退会済みユーザー

2016/07/21 02:33 編集

スライドショーの種類がわからないと「DOMを使えば?」ということしか言えません
guest

回答1

0

ベストアンサー

直接の回答ではありませんが、スライダー系のライブラリを導入して、それをビデオ再生に対応させるほうが手早いと思います。

【【くるくる】カルーセルを実装できる評価が高いjQueryプラグイン5選 | Creive【クリーブ】】
http://creive.me/archives/10461/

【高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた | 株式会社LIG】
http://liginc.co.jp/web/js/jquery/158379

ビデオを使ったデモもあります。(オートスライドにはしていませんが、出来なくは無いと思います)

【FlexSlider 2】
http://flexslider.woothemes.com/video.html

投稿2016/07/24 12:56

kei344

総合スコア69364

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

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

t-maekawa

2016/07/24 13:23

ありがとうございます。試してみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問