超!A&G+をサイドバーで見るJetpack Feature

ビデオを表示するデモを見て閃いた!
超!A&G+のデジタルラジオ表示してみよう。


agqr

ソース

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秒くらいで画が消えてしまうので、スクロールバー動かして再描画しなきゃいけないのが残念。