mediainfoのビデオメタデータ
mediainfo
オブジェクト。 このプロパティは、 loadstart
イベントが送出されます。mediainfoプロパティ
mediainfo
プロパティは、現在の動画に関する情報(メタデータ)を含むオブジェクトです。 player.
mediainfo
プロパティは、現在の動画に関する情報(メタデータ)を含むオブジェクトです。 player。 CMS(コンテンツ管理システム)またはデータベースからのビデオ情報をオブジェクトに入力します。
後に mediainfo
オブジェクトが設定されている場合は、ビデオ名や説明などのビデオ情報を表示したいときに便利なデータ検索に使用できます。 このオブジェクトは、アナリティクスの収集にも使用されます。
mediainfoのフィールド
フィールドには mediainfo
プロパティは次のとおりです。
フィールド名 | 説明 | データ型 |
---|---|---|
accountId |
Brightcove アカウント | 文字列 |
adKeys |
将来のサポートのため | N / A |
createdAt |
作成日時 | UTC (2011-09-28T20:06:37.879Z) |
cuePoints |
オブジェクトの配列としてのキューポイントのリスト | オブジェクトの配列 |
customFields |
カスタムフィールド名と関連する値のキーと値のペア | オブジェクト |
description |
簡単な説明、最大250文字 | 文字列 |
duration |
動画の長さ(秒単位) | 数値の |
economics |
いずれかを含む AD_SUPPORTED or 無料。 メディアがマークされている場合 無料IMA3もFreeWheel広告も再生されません。 | 文字列 |
id |
動画ID動画に関連付けられた一意の識別子 | 文字列 |
link |
リンクを含むオブジェクト テキスト および URL プロパティ | オブジェクト |
longDescription |
説明、5000文字以内 | 文字列 |
name |
ビデオタイトル | 文字列 |
poster |
ポスター画像のURL | 文字列 |
posterSources |
ポスターソースを含む配列 | 配列 |
publishedAt |
出版日時 | UTC (2011-09-28T20:06:37.879Z) |
rawSources |
レンディション情報 | 配列 |
referenceId |
動画参照ID外部データベースまたはCMSからのキーまたは識別子 | 文字列 |
sources |
オブジェクトの配列としてのレンディションのリスト。 各オブジェクトは少なくとも2つの要素を含む: type および SRC | オブジェクトの配列 |
tags |
ビデオに関連付けられたタグ(メタデータ) | 文字列の配列 |
textTracks |
キャプション、キューポイントなどのテキストトラックを保持する配列 | 配列 |
thumbnail |
サムネイル画像へのURL | 文字列 |
thumbnailSources |
ポスターサムネイルを含むデータ構造 | 文字列 |
updatedAt |
日付と時刻の更新 | UTC (2011-09-28T20:06:37.879Z) |
Mediainfoを設定する
使い方 on()
方法を待つ loadstart
イベントをディスパッチすると、対応するイベントハンドラでは、 mediainfo
オブジェクト。 以下のコードから、 console.log
その mediainfo
オブジェクト(111-113行)。
<video-js id="myPlayerID"
data-video-id="4093643993001"
data-account="1752604059001"
data-player="VJvZIueYx"
data-embed="default"
class="video-js" controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/VJvZIueYx_default/index.min.js"></script>
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.on('loadstart',function(){
console.log('mediainfo', myPlayer.mediainfo);
})
});
</script>
コンソールからの表示例を以下に示します。

オブジェクトにデータを設定する
あなたは手動で mediainfo
CMSまたはデータベースのメタデータを持つプロパティ。 その後、 mediainfo
オブジェクト sources
設定するプロパティ player ビデオレンディション付き。
- 32〜37行目:ページはめ込み埋め込み player 実装
- 線40-52:ビデオオブジェクトを手動で作成します。 実際には、データはCMSまたはデータベースから取得され、オブジェクトは動的に構築されます
- 54〜55行目: player 使用する準備が整い、 player 変数へのインスタンス
- 56行目:手動で作成したビデオオブジェクトを player's
mediainfo
オブジェクト - ライン57: player's
src
メソッドを使用して、1つまたは複数のビデオ表現を割り当てます。mediainfo
オブジェクトsources
プロパティ、 player
<video-js id="myPlayerID"
data-account="3676484086001"
data-player="2433352b-a2e2-4b7e-9a15-2d9ec7f07e9d"
data-embed="default"
class="video-js" controls></video-js>
<script src="https://players.brightcove.net/3676484086001/2433352b-a2e2-4b7e-9a15-2d9ec7f07e9d_default/index.min.js"></script>
<script type="text/javascript">
//Populate video object (normally from database or CMS)
var videoObject = new Object();
videoObject.name = "Hand made video object test";
videoObject.id = "1234msb";
videoObject.description = "short description for hand made video object";
videoObject.accountId = "1507807800001";
videoObject.sources = [{
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.m3u8",
"type": "application/x-mpegURL"
}, {
"src": "http://solutions.brightcove.com/bcls/assets/videos/Tiger.mp4",
"type": "video/mp4"
}];
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.mediainfo = videoObject;
myPlayer.src(myPlayer.mediainfo.sources);
});
</script>
タグとカスタムフィールドを表示する
タグとカスタムフィールドの両方が複雑なデータ構造に格納されます。 ザ カスタムフィールド オブジェクトと タグ 配列内にあります。 次のスクリーンショットは、カスタムフィールドとタグを mediainfo
オブジェクト。

これらの複雑なデータ構造からデータを表示するには、2種類のループが必要です。 A for
ループは、タグ配列(行16-20)を反復し、動的に構築されたHTMLの順序付けられていないリストを <div>
(9行に定義されています)。 A for-in
ループは、カスタムフィールドオブジェクト(行24-27)を反復処理し、動的に構築されたHTMLの順序付けられていないリストを <div>
.
<video-js id="myPlayerID"
data-video-id="4093643993001"
data-account="1752604059001"
data-player="VJvZIueYx"
data-embed="default"
class="video-js" controls=""></video-js>
<script src="https://players.brightcove.net/1752604059001/VJvZIueYx_default/index.min.js"></script>
<div id="displayInfo"></div>
<script type="text/javascript">
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.on('loadstart',function(){
//Use JavaScript to display the tags
var numTags = myPlayer.mediainfo.tags.length;
displayInfo.innerHTML += "<h1>Tags:</h1><ul>";
for (var i = 0; i < numTags; i++) {
displayInfo.innerHTML += "<li>" + myPlayer.mediainfo.tags[i] + "</li>";
};
displayInfo.innerHTML += "</ul><br />";
//Use JavaScript to display custom fields
displayInfo.innerHTML += "<h1>Custom Fields:</h1><ul>";
for (var key in myPlayer.mediainfo.customFields) {
displayInfo.innerHTML += "<li><strong>" + key + "</strong>: " + myPlayer.mediainfo.customFields[key] + "</li>";
}
displayInfo.innerHTML += "</ul>";
})
});
</script>
レンダリングされたHTMLはこのスクリーンショットに示すように表示されます。
