vtool.jp

セキュアで高速な HLS ストリーミング配信プラットフォーム。
Webinar 同期再生、API 制御、そして柔軟なユーザー管理を提供します。

ログイン / アップロード開発者ガイド

HLS ストリーミング

アップロードされた動画は自動的に HLS (m3u8) 形式に変換され、ネットワーク環境に合わせて最適なビットレートで配信されます。

Webinar 同期再生

WebSocket 技術により、視聴者全員のプレイヤーをリアルタイムで同期。オンラインセミナーや同時視聴会に最適です。

外部制御 API

REST API を通じて外部システムからプレイヤーを操作可能。既存の CMS やアプリにシームレスに統合できます。

Developer Guide

方式A: iframe 埋め込み (既存)

別オリジンの iframe でプレイヤーを表示します。

<iframe 
  src="https://vtool.jp/embed?v=VIDEO_ID" 
  width="640" height="360" 
  frameborder="0" 
  allow="autoplay; fullscreen" 
  allowfullscreen>
</iframe>

A-1. postMessage 受信イベント

// type は vtool:* 形式
// vtool:ready   { video_id, room, src, duration }
// vtool:play    { video_id, room, src, currentTime, duration }
// vtool:pause   { video_id, room, src, currentTime, duration }
// vtool:timeupdate { video_id, room, src, currentTime, duration, paused }
// vtool:seeked  { video_id, room, src, currentTime, duration, paused }
// vtool:ended   { video_id, room, src, currentTime, duration }

// 受信例
window.addEventListener('message', (e) => {
  if (!e.data || !e.data.type) return;
  if (e.data.type === 'vtool:timeupdate') {
    console.log(e.data.currentTime, e.data.duration);
  }
});

// 再生位置の取得
iframeEl.contentWindow.postMessage({ type: 'vtool:request_state' }, 'https://vtool.jp');

// request_state の返却: vtool:state
// { video_id, room, src, currentTime, duration, paused }

受信側では event.origin === "https://vtool.jp" の確認を推奨します。

WebSocket: wss://wss.vtool.jp/ws/?room=VIDEO_ID

方式B: JS SDK 埋め込み (iframeなし)

同一ページ内に <video> を生成します。

<div id="vtool-player"
  data-vtool-id="VIDEO_ID"
  data-vtool-user-id="USER_123"></div>
<script src="https://vtool.jp/sdk/vtool-embed.js"></script>

B-1. JS SDK API

const player = VtoolEmbed.mount('#vtool-player', { videoId: 'VIDEO_ID' });
player.ready.then(() => player.play());
player.pause();
player.seek(120);      // 秒
player.setVolume(0.5); // 0.0 - 1.0
player.setRate(1.25);

B-2. JS SDK イベント

player.on('ready', (e) => {});
player.on('play', (e) => {});
player.on('pause', (e) => {});
player.on('timeupdate', (e) => {});
player.on('ended', (e) => {});

通信診断スクリプト (1スクリプト埋め込み)

外部サイトに1行だけ埋め込み、HLS/Range/WS/速度/再生テストの結果を表示します。

<script src="https://vtool.jp/diag/vtool-diagnostic.js"
  data-video-id="VIDEO_ID"
  data-room="ROOM_ID">
</script>

VIDEO_ID: vtool 側の動画ID（/video/VIDEO_ID/master.m3u8 の ID）

ROOM_ID: WebSocket の room 名。通常は VIDEO_ID と同じ値です。

省略時は vtool 側のサンプル動画IDを使用します。

共通: コントロール API (サーバー経由)

iframe 方式・JS SDK 方式どちらでも利用できます。
対象の動画が Webinar (同期) モード の場合に有効です。
通常動画は「外部コントロール許可」を有効にすると利用できます。

Endpoint: POST https://vtool.jp/api/v1/{action}

Headers: Authorization: Bearer YOUR_API_TOKEN または X-API-Token: YOUR_API_TOKEN

CORS: 外部ドメインから使う場合はプロフィールで許可オリジンの設定が必要です。

Action	Description	Payload Example (JSON)
play	再生を開始します。	`{"room": "VIDEO_ID"}`
pause	一時停止します。	`{"room": "VIDEO_ID"}`
seek	指定秒数へシークします。	`{"room": "VIDEO_ID", "seconds": 120}`
rate	再生速度を変更します (0.5 ~ 2.0)。	`{"room": "VIDEO_ID", "value": 1.5}`
volume	音量を変更します (0.0 ~ 1.0)。	`{"room": "VIDEO_ID", "value": 0.5}`

const VIDEO_ID = 'xxxxxxxxx';
const API_URL = 'https://vtool.jp/api/v1';

async function sendCommand(action, payload = {}) {
  await fetch(`${API_URL}/${action}`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ room: VIDEO_ID, ...payload })
  });
}

// 例: 再生ボタン
document.getElementById('playBtn').onclick = () => sendCommand('play');

共通: 動画一覧 API

APIキーで認証し、アップロード済み動画の一覧を取得します。

Endpoint: GET https://vtool.jp/api/v1/videos/list

Headers: Authorization: Bearer YOUR_API_TOKEN または X-API-Token: YOUR_API_TOKEN

Query: page (既定 1), per_page (既定 50 / 最大 200)

curl -H "Authorization: Bearer YOUR_API_TOKEN" \\
  "https://vtool.jp/api/v1/videos/list?page=1&per_page=50"

{
  "ok": true,
  "page": 1,
  "per_page": 50,
  "total": 123,
  "total_pages": 3,
  "videos": [
    {
      "id": "a1b2c3d4",
      "title": "sample.mp4",
      "filename": "sample.mp4",
      "duration": 12.34,
      "status": "complete",
      "created_at": "2024-01-01 12:34:56"
    }
  ]
}

共通: サムネイル API

APIキーで認証し、動画サムネイル画像（JPEG）を取得します。
t を指定するとその秒数のフレーム、未指定なら最初のフレームを返します。

Endpoint: GET https://vtool.jp/api/v1/videos/thumbnail

Headers: Authorization: Bearer YOUR_API_TOKEN または X-API-Token: YOUR_API_TOKEN

Query: id (必須), t (任意, 秒)

curl -H "Authorization: Bearer YOUR_API_TOKEN" \\
  "https://vtool.jp/api/v1/videos/thumbnail?id=VIDEO_ID&t=0"

戻り値は image/jpeg です（JSONではありません）。

通信診断（埋め込み実行）

このページ内で診断を実行します（サンプル動画IDを自動使用）。