Home

読み込み中...

埋め込みQuikTimeをJavaScriptで操作する

2010/10/05

このエントリーをはてなブックマークに追加

情報源

Appleの公式ドキュメント。たいていはここで事足りる(英語)。

ライブラリ

Appleが公式に配布しているライブラリがある。

よく分からないURLだけど、利用規約に同意してダウンロード、解凍するとAC_Quicktime.jsというものをゲット出来る。これが意外に便利でIEとかFirefoxだとかをあまり気にしなくてすむようになる。

使い方は以下の通り。

<html>
  <head>
      <script type="text/javascript" src="jquery.js">
      <script type="text/javascript" src="AC_Quicktime.js">
      <script type="text/javascript">
         $(function() {
          var source = './test.mov';
          var qt = QT_GenerateOBJECTText(source, '100%', '16', '', 'obj#id', 'qt-player-object', 'emb#id', 'qt-player-embed', 'autoplay', 'true', 'enablejavascript', 'true', 'postdomevents', 'true');

          $('#qt').html(qt);
         });
      </script>
  </head>
  <body>
    <div id="qt"></div>
  </body>
</html>

Tips

QuickTimeは現在表示されてるもののみ有効となるもよう。つまり、プレーヤーのstyleにdisplay: none;を設定して非表示にしつつ再生とかは不可能みたい。また、position: absolute;とかしつつtopやleftで画面外に飛ばしても同じこと。CSSをうまく駆使したらいけるかもしれないけど、そもそもセキュリティ確保のために、そういう仕様になっていることを考えるとそのやり方は適切じゃないかも。

上述のことから、QuickTimeを表示してすぐ再生とではうまくいかない場合がある(QuickTimeがまだ表示されていないかもしれない)。

$('#qt').show();
$('#qt').play();

そんなときは、setTimeoutで処理を少しあとに実行する。これをやるとたいていうまくいく。

$('#qt').show();
setTimeout(function() {
  $('#qt').play();
}, 100);

IEでは同じsourceのものを何度も挿入できないという不具合に出会った。そういうときは全てのsourceを一意にするため、以下のような苦肉の策を用いる。

var id = 0;
var source = ('test.mov' + '?' + (id++))

バグ

にも書かれているが、Windows + Firefoxで音声を再生するとqt_endedは適切に呼ばれない。何かマウスで画面をクリックすると呼ばれたり呼ばれなかったりと動作が不明。

ただ、それ以外のAPIは適切に動作するようなので、再生の終了時に何かアクションを起こしたいなら、qt_endedは使わずにqt_play・qt_pauseで再生・停止を監視しつつ、setTimeoutなどで定期的にQuickTimeプレーヤーの現在の再生時間を監視するしかなさそう。

Leave a comment