Videog Player 4.0 利用ガイド

埋め込む — コピー＆ペーストだけ

動画ごとの視聴ページがそのまま使えます。自社サイトへ埋め込む場合は、プレーヤー右下の共有ボタン → 埋め込みコードをコピーして、HTML に貼り付けるだけです。

<iframe src="https://console.videog.ai/player/あなたの動画ハッシュ/"
  width="640" height="360" frameborder="0"
  allow="autoplay; fullscreen; picture-in-picture; encrypted-media"
  allowfullscreen></iframe>

管理画面で設定した視聴制限（ID/パスワード・ドメイン・IP・視聴期限）はそのまま効きます。 埋め込み先を増やしても、守りの設定は動画側で一元管理されます。

再生開始位置を URL で指定する

視聴ページ・埋め込みどちらも、URL パラメータで開始位置を指定できます（YouTube と同じ書式）。 共有パネルの「開始位置から」にチェックを入れると、この形式のリンクを自動で作れます。

管理画面の設定が、そのままプレーヤーの機能になる

プレーヤーのボタンは、動画ごとの設定に連動して自動で出し分けられます。ページ側の作業は不要です。

視聴者の操作（4.0 の標準機能）

デザインは 10 種類のスキンから選べます（light 系 5・hard 系 3・スケルトン系 2）。 4.0 では全スキンで背景が透過になり、埋め込み先ページに自然に馴染みます。

開発者向け — JavaScript から直接使う

自社ページで JS から直接プレーヤーを組み立てることもできます。3.0 で使えたオプションは名前・型とも そのままです。4.0 の新オプションはすべて追加式で、指定しなければ従来どおり動きます。

<link rel="stylesheet" href="https://cf-rsc01.videog.jp/r/js/videog_player/4.0.0/videogplayer.css">
<script src="https://cf-rsc01.videog.jp/r/js/videog_player/4.0.0/videogplayer.js"></script>
<div id="player"></div>
<script>
  videogplayer({
    id: 'player',
    skin: 'light_blue',
    play_list: [{ file: 'https://…/master.m3u8', title: '動画タイトル' }],
    btn_chapters: [{ start: 0, title: 'はじめに' }, { start: 95, title: '本編' }],
    btn_share: { heading: '共有', sites: ['line', 'facebook', 'twitter', 'email'] },
  });
</script>

4.0 で追加された主なオプション

3.0 から使える全オプション（autostart / mute / repeat / btn_video_download / btn_document_download / completed_jump / active_color ほか約30種）の一覧は プレーヤードキュメントを参照してください。

※ ボタンのラベル文言（btn_document_download.text 等）はテキストとして表示されます（HTML は解釈されません）。 3.0 でラベルに HTML タグを入れていた場合、4.0 ではタグがそのまま文字として表示されます（セキュリティ強化のための意図的な変更です）。