プレイヤー:内部イベント


内部イベント

Video.jsの場合、以下のようなタイミングで内部イベントが発生します。(全リスト)

  • 視聴関連
    •  play
      • 視聴開始(ユーザが視聴ボタンを押した)
        • autoplayの場合発生しない
    • playing
      • 視聴開始
    • timeupdate
      • 視聴位置が変更された
        • 15~250ミリ秒単位で発生する
        • シークを実行すると、シークで飛ばした時間分のイベントが発生する
    • pause
      • 視聴が停止された
    • ended
      • 視聴がメディアの最後に到達した
    • seeking
      • シークが行われている
    • seeked
      • シークが終わった(新しい視聴ポイントに移動した)
  • データ取得関連(再生時のイベント発生順)
    • loadstart
      • メディアのダウンロードが開始された
    • firstplay
      •  そのページにおける1回目の再生である
    •  progress
      • メディアをダウンロード中
    • suspend
      • メディアのダウンロードを停止
        • 一定以上先読みするとメディアファイルの読み込みを停止する
    • durationchange
      • メディアの継続時間が変更された(設定された)
    •  loadedmetadata
      • HAVE_METADATA状態
        • メタデータの読み出しが終了した
    • loadeddata
      • HAVE_CURRENT_DATA状態
        • 現在のフレームに対するメディアデータを受信した
    • canplay
      • HAVE_FUTURE_DATA状態
        • 早送りが可能だだけメディアデータを受信した
    • canplaythrough
      • HAVE_ENOUGH_DATA状態
        • HAVE_FUTURE_DATAかつ以下の条件を満たす
          • バッファリング無しに再生可能、もしくは、バッファに余地無し

基本的な実装としては、これらのイベントをそのままAPIサーバにビーコンとして送信します。

以下のサンプルページでは各イベントが発生したタイミングでjavascriptコンソールにイベント名を出力しています(Developer Tools等で確認できます):

APIサーバで取得したイベント(ビーコン)のサンプルは以下のようになります(eventNameにイベントが格納されます。詳細は後述します)。

次回は、上記サンプルページ(プレイヤーのビーコン送出)の詳細について解説します。