jwplayer.js controlbar制御

2023/08/11 03:38

このQ&Aのポイント

ビデオ再生時に、コントールバーを消したり、表示させたりする制御方法が分からずにいます。
マウスオーバー／マウスアウトでの制御方法について、お教えください。
サンプルのようにしたいが、テストソースでうまく動作しないため、解決策を教えてください。

ベストアンサー

jwplayer.js controlbar制御

2011/03/02 15:46

ビデオ再生時に、コントールバーを消したり、表示させたりしたいのですがその制御方法が分からずにいます。（マウスオーバー／マウスアウトでの制御？）サンプルのようにしたいのですが、どうすべきかお教え願えないでしょうか！サンプル http://www.longtailvideo.com/players/ 私のテストソースは、以下となります。 <div id="jwplayer"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div> <script type="text/javascript"> jwplayer("jwplayer").setup({ flashplayer: "player.swf", file: "video01.flv", width: 512, height: 384, skin: "dangdang.swf", image: "video01.jpg", controlbar: "over" }); </script> <noscript><p>JavaScript対応ブラウザで表示してください。</p></noscript>

tsubakuro-gt
お礼率50% (1/2)

JavaScript
回答数1
ありがとう数3

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

yyr446
ベストアンサー率65% (870/1330)

2011/03/03 11:01 回答No.1

　jwplayerで提供されているコントールバーをjavascriptで操作するAPIは提供されてませんね。そのコントロールバーはフラッシュです。 jwplayerのオプションでcontrolbar: "over"を指定するとマウスオーバー／マウスアウトでバーが現われたり消えたりするわけです。controlbar: "over"の時、controlbar.idlehide:" false"が指定されてるとプレーヤーが停止状態の時は非表示になります。これくらいですね http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/12536/configuration-options 　自作したいなら、controlbar: "none"にして、別途javascriptで制御するコントロールバーをjwplayerのjavascript APIを使って作って、jwplayerのイベントハンドラーのAPIと組み合わせて制御する事になります。 ↓制御のサンプル（バーじゃなくてリストですけど） http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/16022/controlling-the-player-using-javascript ↓イベントの利用サンプル http://www.longtailvideo.com/support/jw-player/jw-player-for-flash-v5/16024/listening-for-player-events

質問者

お礼 2011/03/12 20:27

ありがとうございます。今は、以下のようにして再生していますが、再生終了後に出る、info画面を表示させないようにしたいけど、分からずに格闘している状態です！ -----(html)----- <a name="video"></a> ■ビデオ再生(Jwplayer)<br> <center><div id="jwplayer"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div></center> <script type="text/javascript"> var so = new SWFObject("./player.swf","ply","512","384","9"); so.addParam("allowfullscreen","true"); so.addParam("allowscriptaccess","always"); so.addVariable("autostart","flase"); so.addVariable("file","./video01.flv"); so.addVariable("image","./video01l.jpg"); so.addVariable("skin","./dangdang.swf"); so.addVariable("controlbar","over"); so.write("jwplayer"); </script> <ul id="videoimg"> -----(html)----- ・参考 http://tsubakuro.xii.jp/htm/javascript/

関連するQ&A

タグの意味を教えて
ウェブサイト（自分のホームページ）でｆｌｖファイルを再生したくて　 http://www.jeroenwijering.com/?item=JW_FLV_Player　から JW FLV MEDIA PLAYER 3.14　をダウンロードしてきました。サンプルｈｔｍｌも同梱されていましたので、一応再生は出来るようなったのですが、もう少し詳しくタグの意味を知りたいのです。動画を扱うのが初めての素人でして不甲斐ない質問ですが宜しくお願いします。サンプルｈｔｍｌタグは次のようになっています。 <div id="container"><a href="http://www.macromedia.com/go/getflashplayer">Get the Flash Player</a> to see this player.</div> <script type="text/javascript" src="swfobject.js"></script> 　　<script type="text/javascript"> var s1 = new SWFObject("mediaplayer.swf","mediaplayer","300","170","7"); s1.addParam("allowfullscreen","true"); s1.addVariable("width","300"); s1.addVariable("height","170"); s1.addVariable("file","video.flv"); s1.addVariable("image","video.jpg"); s1.write("container"); 　　</script> 質問１ var s1 = new SWFObject("mediaplayer.swf","mediaplayer","300","170","7"); ここに記載されてる値（"300","170","7")と s1.addVariable("width","300"); s1.addVariable("height","170"); ここに記載されてる値（"300""170"）の違いは何ですか？また値"7" は何の値でしょう？質問２ s1.write("container") これはどの様な役目をしていますか？
- ベストアンサー
- ホームページ作成ソフト
js　ロールオーバーについて
初めまして。javascriptについてお聞きします。下記HTMLのように、メニューを<ul>で並べております。 javascriptで<li>にマウスオーバーした時に、内包しているクラスの.dateのフォント色を変えようと、jsを下記のように書きました。するとマウスオーバーしている<li>の.dateだけではなく、全ての.dateのフォント色が変化してしまいました。色々試しましたが、上手くいきません。マウスオーバーしている部分にだけ、変化させるにはどうしたら良いでしょうか。どうぞよろしくお願いいたします。 ■js $(function(){ $(".Menu li").mouseover(function(){ $(".date").css("color","white"); }).mouseout(function(){ $(".date").css("color","black"); }); }); ■html <div class="Menu"> <li> <p class="date">2012/3/13</p> <p>テキストテキストテキストテキスト</p> </li> <li> <p class="date">2012/3/12</p> <p>テキストテキストテキストテキスト</p> </li> <li> <p class="date">2012/3/11</p> <p>テキストテキストテキストテキスト</p> </li> </div>
- ベストアンサー
- JavaScript
jQuery.jsを使ったhtml外部読み込み
教えてください。現在Jqueryを使用して外部htmlを読み込ませようとしていますが、うまくいきません・・・ ■本体html <head> <script src="js/jquery-1.8.3.min.js"></script> </head> <body> <script type="text/javascript" src="sample.js"></scrip> <div id="sample"></div> </body> ■sample.js // JavaScript Document $(function(){ $("#sample").load("sample.html"); }); ■読み込ませるsample.html　特に設定なしこのような感じですが、全然読み込めません。。。 javascriptを外部リンクにしているのは、読み込むhtmlが複数ある為、 headの見栄えが悪くなるからという個人的な意見です・・・済みませんがお知恵をお貸しください！！
- 締切済み
- JavaScript
複数のswfを同時に制御したい。
flash、javascript等について質問です。制作環境はflash8 professional パブリッシュはflashplayer7～8です。 [やりたいこと] 全く同じswfを使った多数の音楽プレイヤーを制御したい。 [仕様] htmlのtableにて、全く同じswfを配置。タグでswf?artistID=1のように変数を渡すことで、アーティストごとに外部mp3やjpgを読み込み再生する。 [問題点] アーティスト1を再生したまま、アーティスト2を再生すると、アーティスト1が再生されたままアーティスト2の再生が始まってしまう。(同時に2曲重なって再生されてしまう) [自分で試してみたこと] --javascriptでやってみる-- アーティスト1の再生ボタンを押すと、htmlに変数「1」を渡す。アーティスト2の再生ボタンを押すと、javascriptでhtmlの変数を使い、再生中のswfを制御(音楽を停止)したい。・変数は渡せても、再生中のswfを制御できない。 --localconnectionでやってみる-- 制御する側と、制御される側で、別のswfを作らなくてはならず、今回のような状況だと不可能だと思われるのです。 --sharedobjectでやってみる-- アーティスト1の再生ボタンを押すと、変数「1」を”playID”に保存。アーティスト2の再生ボタンを押すと、変数「2」を”playID”に上書き保存。この時、アーティスト1はenterFrame等で”playID”と”artistID”を比較。 ”playID”は「2」になっているので停止させる。・getLocal()は書き込んだswfからしか最新の数値を参照できないらしく、アーティスト2からのgetLocal()は「2」になっていても、他のswfがenterFrame等で呼び出しても最新の数値が呼び出せなかった。 --mouselistenerで強引にやる-- mousedownで全プレイヤーを停止したのち、再生マウスが乗っていたプレイヤーを再生する。・mouselistenerはswf領域から外れると使えないので、他のswfは何も変化させることはできない。 -　-　-　-　-　-　-　-　-　-　-　-　-　-　-　-　-　-　- このような状況です。フルフラッシュなら簡単なことなのですが、SEO対策等もあり、table等で配置という仕様です。どなたか何か分かる方がいらっしゃいましたらご教示頂けると幸いです。よろしくお願いいたします。
- ベストアンサー
- Flash
途中のjavascriptを後で読み込ませるには？
こんにちは現在htmlファイルで <html> : <body> : AAAAAAAAAAAAAA AAAAAAAAAAAAAA <div> <script type="text/javascript"> <script type="text/javascript" src="http://hogehoge.com/hoge.js"></script> <noscript>ブラウザのjavascript機能をONにしてご覧ください</noscript> </div> : BBBBBBBBBBBBBBBB BBBBBBBBBBBBBBBB : </body> </html> のような形のソースを入れているのですが、これだとjavascriptのソースの読み込みが終わるまで、次のソースをみることができません。（実はこのjavascript部分がある動画サーバーからの埋め込みソースで、　２、３秒くらいかかってしまうのです）１）javascriptを早く読み込む方があれば教えてください。もしくは２）ページを表示してからjavascript部分を読むようにするには　　どうすれば良いのか教えてください。　　（これだとページのあとからjavascript部分が表示されるので、　　　ストレスが無いので・・・）ちょっとしたアドバイスでもよいので、宜しくお願いします。
- ベストアンサー
- JavaScript
js 引用符
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>サンプル</title> </head> <body> <div id="a"></div> <script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript" src="moment.js"></script> <script src="fastclick.js"></script> <script> $(function(){ var retinaSwitch = window.<span class="searchword">devicePixelRatio</span>; if(retinaSwitch == 1) { $('#container').html('Retinaディスプレイではありません'); } else if(retinaSwitch == 2) { $('#container').html('Retinaディスプレイです'); } }); </script> </body> </html> javascriptのコードなのですがWebサイトからコピペした文章が上手く反映されません。引用符関係のイージーミスだとは思うのですが、ちょっとドツボに嵌っているので、ご指摘頂ければと思います。
- ベストアンサー
- JavaScript
innerHTMLに入れたリンクが反応しない
どのジャンルで質問しようか迷ったのですが、ここでお願いします。次のようにしてマウスオーバーした時にリンクが現れるようにしたのですが、たしかにyahooのリンクは現れたのですが、クリックしても反応がありません・・・どうすればリンクを機能させることができるのでしょうか？ <STYLE TYPE="text/css">  </STYLE> <SCRIPT language="JavaScript"></SCRIPT> <div id="sample" class="sample" onMouseOver="do_sample()">ココ</div>
- ベストアンサー
- JavaScript
AC_RunActiveContent.jsの設定
AC_RunActiveContent.jsの設定 Flash CS3を使用しております。フォルダ名"flash"にswfとAC_RunActiveContent.jsを入れていますが、「このページでは "AC_RunActiveContent.js" が必要です。」と出てしまい再生されません。パプリッシュした時の状態では正常に再生されているので、"flash"フォルダに移動させた後の設定が間違っているのかと思いますが、原因が見つかりません。下記がhtmlです。 <head> ～省略～ <script type="text/javascript">AC_FL_RunContent = 0;</script> <script src="AC_RunActiveContent.js" type="text/javascript"></script> </head> <body> <p> <script type="text/javascript"> if (AC_FL_RunContent == 0) { alert("このページでは \"AC_RunActiveContent.js\" が必要です。"); } else { AC_FL_RunContent( 'codebase', 'http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0', 'width', '900', 'height', '300', 'src', './flash/main', 'quality', 'high', 'pluginspage', 'http://www.macromedia.com/go/getflashplayer', 'align', 'middle', 'play', 'true', 'loop', 'true', 'scale', 'showall', 'wmode', 'window', 'devicefont', 'false', 'id', './flash/main', 'bgcolor', '#ffffff', 'name', './flash/main', 'menu', 'true', 'allowFullScreen', 'false', 'allowScriptAccess','sameDomain', 'movie', './flash/main', 'salign', '' ); //end AC code } </script> </p> 宜しくお願いします。
- ベストアンサー
- Flash
onclick属性に外部jsと外部cssの記載方法
表題の通りclickイベントを付与したいのですが、記載方法が分からなくて困っています。例） <div id="sample1"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='block'; document.getElementById('sample1').style.display='none'">ぴーしー</a> <link rel="stylesheet" type="text/css" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </div> <div id="sample2" style="display:none"> <a href="javascript:void(0);" onclick="document.getElementById('sample2').style.display='none'; document.getElementById('sample1').style.display='block'">もばいる</a> </div> 上記のままだと更新ボタンを押さないと反映されなかったので、onclick属性にjquery.mobileを付与したいと思いまして。toggle,appendToなども試しましたが、挙動がおかしかったので、有志の方、代換え方法や助言をお願いします。
- 締切済み
- JavaScript
javascript　解析タグのコメントアウト
XHTMLではなく、HTMLに貼るときにのコメントアウトで、以下をどうすればよいのでしょうか？ <script type="text/javascript" src="http://i.yimg.jp/images/analytics/js/ywa.js"></script> <script type="text/javascript"> var YWATracker = YWA.getTracker("XXXX"); YWATracker.addExcludeProtocol("file:"); YWATracker.submit(); </script> <noscript> <div><img src="http://by.analytics.yahoo.co.jp/p.pl?a=XXXX&js=no"; width="1" height="1" alt="" /></div> </noscript> ------------------------- 例１  例２ //<![CDATA[ //]]> 例３　どっちでも良い。
- ベストアンサー
- JavaScript