API

基本機能

プレイリスト

タイトル

仕様
パラメーター名 設定 デフォルト値
title string text 任意 null
説明

プレイリストに表示される動画のタイトルを設定します。

コードサンプル
<script> const options = { playlist: [ { title: 'Videog Player' }, ], }; const player = videogplayer('video_tag_id', options); </script>

サムネイル

仕様
パラメーター名 設定 デフォルト値
image string url 任意 null
説明

プレイヤーのサムネイルを設定します。

コードサンプル
<script> const options = { playlist: [ { image: 'https://sample1.jp/thumbnail.png' }, ], }; const player = videogplayer('video_tag_id', options); </script>

プライマリー

仕様
パラメーター名 設定 デフォルト値
prumary string html5,flash 任意 html5
説明

html5の場合はHTML5版プレイヤー、flashの場合はflash版プレイヤーを設定します。

コードサンプル
<script> const options = { playlist: [ { primary: 'flash' }, ], }; const player = videogplayer('video_tag_id', options); </script>

ロゴ

仕様
パラメーター名 設定 デフォルト値
logo object file,hide,link,margin,position 任意 null
説明

ビデオグプレーヤーのロゴ画像を設定します。

logo.object
仕様
パラメーター名 設定 デフォルト値
file string url 必須 null
hide boolean true,false 任意 false
link string url 任意 null
margin nunmber px 任意 20px
position string top-left,top-right,bottom-left,bottom-right,control-bar 任意 top-right
説明
パラメーター名 説明
file ウォーターマークとして使用するJPG、PNG、またはGIF画像のURLを設定します。(例:/assets/logo.png)
hide このオプションがtrueに設定されている場合、ロゴは他のプレーヤーコントロールと一緒に自動的に表示/非表示になります。
link logoをクリックしたときに訪れるURLを設定します。このURLを設定されていない限り、ロゴをクリックしても効果はありません。
margin ディスプレイの端からのロゴの距離を設定します。
position ウォーターマークを表示するコーナーを設定します。 「control-bar」は、ロゴをコントロールバーの右のグループのボタンの最も左のアイコンとして追加します。
コードサンプル
<script> const options = { playlist: [ { logo: { file:'https://sample1.jp/assets/logo.png', hide:true, link:'https://sample1.jp/', margin:'40px', position:'control-bar' } }, ], }; const player = videogplayer('video_tag_id', options); </script>

字幕

仕様
パラメーター名 設定 デフォルト値
captions array file,label,default 任意 -
説明

ビデオグプレーヤーに字幕を設定します。

captions[].object
仕様
パラメーター名 設定 デフォルト値
file string url 必須 null
label string text 必須 index
default boolean true,false 任意 false
説明
パラメーター名 説明
file 字幕ファイル(WebVTT,SRT,DFXP)のurlを設定します。
label 字幕のラベルを設定します。(英語、日本語等)。複数のcaptionを持つ場合でのみ使用され、字幕メニューにラベルが表示されます。
default 字幕を起動時に任意の字幕を表示する場合は、これをtrueに設定します。設定しない場合、字幕はデフォルトでオフになっており、ユーザーは字幕メニューを選択して有効にする必要があります
コードサンプル
<script> const options = { playlist: [ { captions: [ { file:'https://sample1.jp/captions/jp.vtt', label:'日本語', default:true }, { file:'https://sample1.jp/captions/en.vtt', label:'英語' }, ], }, ], }; const player = videogplayer('video_tag_id', options); </script>

メディアソース

仕様
パラメーター名 設定 デフォルト値
sources array file,label,type,default 必須 -
説明

ビデオグプレーヤーで再生する動画を設定します。

sources[].object
仕様
パラメーター名 設定 デフォルト値
file string url 必須 -
label string text 任意 -
type string text 任意 -
default boolean true,false 任意 -
説明
パラメーター名 説明
file ビデオファイル、オーディオファイル、またはライブストリームのurlを設定します。
label 動画の品質が2つ以上ある場合に、動画の品質選択メニューに表示されるメディアソースのラベルを設定します。
type メディアタイプを強制します。ファイル拡張子がないか、認識されない場合にのみ必要です。
default 起動時に再生するメディアソースを設定します。どのメディアソースに対しても設定されていない場合は、最初のソースが使用されます
コードサンプル
<script> const options = { playlist: [ { sources: [ { file:'https://sample1.jp/1080p.mp4', label:'1,080p' }, { file:'https://sample1.jp/720p.mp4', label:'720p' }, { file:'https://sample1.jp/480p.mp4', label:'480p', default:true }, ], }, ], }; const player = videogplayer('video_tag_id', options); </script>

動画タイトル

仕様
パラメーター名 設定 デフォルト値
title string text 任意 null
説明

プレイヤーに表示される動画タイトルを設定します。

コードサンプル
<script> const options = { title:'video title' }; const player = videogplayer('video_tag_id', options); </script>

プレイヤータイプ

仕様
パラメーター名 設定 デフォルト値
player_type string vod,live 任意 vod
説明

プレイヤーの配信タイプを設定します。

コードサンプル
<script> const options = { player_type:'live' }; const player = videogplayer('video_tag_id', options); </script>

プレイヤーモード

仕様
パラメーター名 設定 デフォルト値
player_mode string html5,flash 任意 html5
説明

プレイヤーのモードを設定します。

コードサンプル
<script> const options = { player_mode:'flash' }; const player = videogplayer('video_tag_id', options); </script>

プレイヤー幅

仕様
パラメーター名 設定 デフォルト値
player_width string px,% 任意 640px
説明

プレイヤーの横幅を設定します。

コードサンプル
<script> const options = { player_width:'800px' }; const player = videogplayer('video_tag_id', options); </script>

プレイヤー高さ

仕様
パラメーター名 設定 デフォルト値
player_height string px,% 任意 360px
説明

プレイヤーの高さを設定します。

コードサンプル
<script> const options = { player_height:'400px' }; const player = videogplayer('video_tag_id', options); </script>

右クリックメニュー

仕様
パラメーター名 設定 デフォルト値
right_click array {text,url} 任意 -
説明

プレイヤー内で右クリックしたときのメニューを設定します。

コードサンプル
<script> const options = { right_click:[ { text:'videog', url:'https://videog.jp' } ] }; const player = videogplayer('video_tag_id', options); </script>

デザイン

背景色

仕様
パラメーター名 設定 デフォルト値
background_color string color code 任意 null
説明

プレイヤーの背景色を設定します。

コードサンプル
<script> const options = { background_color: '#ffffff' }; const player = videogplayer('video_tag_id', options); </script>

活性色

仕様
パラメーター名 設定 デフォルト値
active_color string color code 任意 null
説明

プレイヤーの再生ボタンとシークバーの色を設定します。

コードサンプル
<script> const options = { active_color: '#ffffff' }; const player = videogplayer('video_tag_id', options); </script>

ボタン表示

再生ボタン

仕様
パラメーター名 設定 デフォルト値
btn_play boolean true,false 任意 true
説明

コントロールバーに再生ボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_play: true }; const player = videogplayer('video_tag_id', options); </script>

シークボタン

仕様
パラメーター名 設定 デフォルト値
btn_seek boolean true,false 任意 true
説明

コントロールバーにシークボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_seek: true }; const player = videogplayer('video_tag_id', options); </script>

フルスクリーンボタン

仕様
パラメーター名 設定 デフォルト値
btn_fullscreen boolean true,false 任意 true
説明

コントロールバーにフルスクリーンボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_fullscreen: true }; const player = videogplayer('video_tag_id', options); </script>

ボリュームボタン

仕様
パラメーター名 設定 デフォルト値
btn_volume boolean true,false 任意 true
説明

コントロールバーにボリュームボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_volume: true }; const player = videogplayer('video_tag_id', options); </script>

クオリティーボタン

仕様
パラメーター名 設定 デフォルト値
btn_quality boolean true,false 任意 true
説明

コントロールバーにクオリティーボタンを表示するか設定します。なお、クオリティーボタンはhlsストリームを再生する場合にのみ表示されます。

コードサンプル
<script> const options = { btn_quality: true }; const player = videogplayer('video_tag_id', options); </script>

10秒戻るボタン

仕様
パラメーター名 設定 デフォルト値
btn_10s_backward boolean true,false 任意 false
説明

コントロールバーに10秒戻るボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_10s_backward: false }; const player = videogplayer('video_tag_id', options); </script>

10秒進むボタン

仕様
パラメーター名 設定 デフォルト値
btn_10s_forward boolean true,false 任意 true
説明

コントロールバーに10秒進むボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_10s_forward: true }; const player = videogplayer('video_tag_id', options); </script>

倍速スロー再生ボタン

仕様
パラメーター名 設定 デフォルト値
btn_slowfast boolean true,false 任意 false
説明

プレイヤー内右上に倍速スロー再生ボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_slowfast: true }; const player = videogplayer('video_tag_id', options); </script>

プレイリストボタン

仕様
パラメーター名 設定 デフォルト値
btn_videolist boolean true,false 任意 false
説明

プレイヤー内右上にプレイリストボタンを表示するか設定します。また、プレイリスト画面は、playlistオプションに基づいて構成されています。なので、btn_videolisttrueに設定されていても、playlistオプションを設定しないと、プレイリスト画面に何も表示されません。

もしプレイリスト画面が空でないことを確認したい場合は、playlistオプションを使用してプレイリスト項目を設定する必要があります。

コードサンプル
<script> const options = { btn_videolist: false }; const player = videogplayer('video_tag_id', options); </script>

プレイリスト前の動画ボタン

仕様
パラメーター名 設定 デフォルト値
btn_pre boolean true,false 任意 false
説明

プレイリスト内の前の動画に移動するボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_pre: false }; const player = videogplayer('video_tag_id', options); </script>

プレイリスト次の動画ボタン

仕様
パラメーター名 設定 デフォルト値
btn_next boolean true,false 任意 false
説明

プレイリスト内の次の動画に移動するボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_next: false }; const player = videogplayer('video_tag_id', options); </script>

字幕ボタン

仕様
パラメーター名 設定 デフォルト値
btn_subtitles boolean true,false 任意 true
説明

コントロールバーに字幕ボタンを表示するか設定します。

また、字幕オプションがtrueに設定されていても、配信者が字幕をtextTracksオプションに設定しない限り、字幕ボタンはコントロールバーに表示されません。これは、配信者がプレイリストオプションのtextTracksサブオプションとbtn_subtitlesオプションをtrueに設定した場合のみ、字幕ボタンがコントロールバーに表示されることを意味します。

コードサンプル
<script> const options = { btn_subtitles: true }; const player = videogplayer('video_tag_id', options); </script>

動画ダウンロードボタン

仕様
パラメーター名 設定 デフォルト値
btn_video_download string url,video 任意 null
説明

プレイヤー内右上に共有ボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_video_download: 'https://sample.jp/fhd.mp4' }; const player = videogplayer('video_tag_id', options); </script>

資料ダウンロードボタン

仕様
パラメーター名 設定 デフォルト値
btn_document_download string url 任意 null
説明

プレイヤー内右上に資料ダウンロードボタンを表示するか設定します。

コードサンプル
<script> const options = { btn_document_download: 'https://sample.jp/download_document.pdf' }; const player = videogplayer('video_tag_id', options); </script>

動作

自動再生

仕様
パラメーター名 設定 デフォルト値
autostart boolean true,false 任意 false
説明

プレイヤーが表示されたあと、動画が自動的に再生される場合に設定します。

なお、iOS端末はAppleの仕様のため 非サポート になります。よって、iOS端末はautostarttrueでも、動画の再生には視聴者のタッチ/クリックが必要です。

コードサンプル
<script> const options = { autostart: true }; const player = videogplayer('video_tag_id', options); </script>

リピート再生

仕様
パラメーター名 設定 デフォルト値
repeat boolean true,false 任意 false
説明

再生完了後、再度動画が自動的に再生される場合に設定します。

なお、iOS端末はAppleの仕様のため 非サポート になります。よって、iOS端末はautostarttrueでも、動画の再生には視聴者のタッチ/クリックが必要です。

コードサンプル
<script> const options = { repeat: false }; const player = videogplayer('video_tag_id', options); </script>

サウンドミュート

仕様
パラメーター名 設定 デフォルト値
mute boolean true,false 任意 false
説明

動画をミュート状態で再生するか設定します。

コードサンプル
<script> const options = { mute: false }; const player = videogplayer('video_tag_id', options); </script>

オーディオモード

仕様
パラメーター名 設定 デフォルト値
audio_mode boolean true,false 任意 false
説明

動画を音声のみで再生するか設定します。

コードサンプル
<script> const options = { audio_mode: true }; const player = videogplayer('video_tag_id', options); </script>

角度回転

仕様
パラメーター名 設定 デフォルト値
rotate_angle integer number null
説明

動画を音声のみで再生するか設定します。

コードサンプル
<script> const options = { rotate_angle: 180 }; const player = videogplayer('video_tag_id', options); </script>

再生後ジャンプ

仕様
パラメーター名 設定 デフォルト値
completed_jump object {url,target} null
説明

再生完了後に任意のページに遷移させるか設定します。

target_blankに設定されていると、ジャンプURLが新しいタブで開かれます。そうでなければジャンプURLが現在のタブで開かれます。

コードサンプル
<script> const options = { completed_jump: {url:'http://www.sample.jp', target:'_blank'} }; const player = videogplayer('video_tag_id', options); </script>

連携

Google Analytics

仕様
パラメーター名 設定 デフォルト値
ga boolean true,false true
説明

再生完了後に任意のページに遷移させるか設定します。

Googleアナリティクスが動画プレーヤー用に有効になっている場合に設定します。

コードサンプル
<script> const options = { ga: true }; const player = videogplayer('video_tag_id', options); </script>

error

error_504

仕様
パラメーター名 設定 デフォルト値
error_504 boolean text null
説明

ビデオストリームが見つからない場合のエラーメッセージを設定します。

コードサンプル
<script> const options = { error_504: '現在ライブ配信は行われていません。' }; const player = videogplayer('video_tag_id', options); </script>

results matching ""

    No results matching ""