超!A&G+をサイドバーで見るJetpack Feature
ビデオを表示するデモを見て閃いた!
超!A&G+のデジタルラジオ表示してみよう。
ソース
jetpack.future.import("slideBar"); jetpack.slideBar.append({ // Listen for click events on the icon onReady: function(slide) $(slide.icon).click(function() { let video = $(slide.doc).find("#video"); // set src if we don't have video if (!video.attr('src')) video.attr('src', 'http://www.uniqueradio.jp/agplayer/player.html'); // Slide open to show videos, but only stay open if we have videos slide({ size: 392, persist: true }); }), width: 400, html: <> <style><![CDATA[ body { margin: 0; } iframe { width: 387; height:380px; border: none; } ]]></style> <body> <iframe id="video"></iframe> </body> </> });
別に、
jetpack.future.import("slideBar"); jetpack.slideBar.append({ onReady: function(slide) $(slide.icon).click(function() { slide({ size: 392, persist: true }); }), width: 400, url: 'http://www.uniqueradio.jp/agplayer/player.html' })
でも動くが、firefox起動すると自動的に読み込みしてしまうので、アイコンクリックしたら読み込み開始するようにしてみた。
iframeのsrc追加という苦し紛れな方法です。
あと、30秒くらいで画が消えてしまうので、スクロールバー動かして再描画しなきゃいけないのが残念。