プレイヤー開発者の基本:カスタムプラグイン-データの受け渡し
このトピックでは、カスタムプラグインにデータを渡す方法を学習します。
ステップ
- カスタムプラグインコードで、
options
プラグインを定義する無名関数にパラメーターを配置します。
videojs.registerPlugin('navigateOnVideoEnd', function (options) {
var myPlayer = this;
...
});
- カスタマイズのために、プラグインコードでパラメータオブジェクトの必要なプロパティを使用します。
videojs.registerPlugin('navigateOnVideoEnd', function (options) {
var myPlayer = this;
...
window.location.href = options.redirectURL;
});
- プラグインを呼び出す HTML ページで、必要なプロパティ/プロパティを持つオブジェクトを構築します。
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this,
options = {"redirectURL": "http://support.brightcove.com"};
...
});
</script>
- カスタムプラグインを呼び出すときは、
options
オブジェクトをパラメータとして渡します。
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this,
options = {"redirectURL": "http://support.brightcove.com"};
myPlayer.navigateOnVideoEnd(options);
});
</script>
- Studio を使用している場合は、Options (JSON) フォーム要素を使用してカスタムプラグインに options オブジェクトを渡します。
完全なコード
プラグインコード
videojs.registerPlugin('navigateOnVideoEnd', function (options) {
var myPlayer = this;
myPlayer.on('ended', function () {
window.location.href = options.redirectURL;
});
});
HTML ページ呼び出しコード
<video-js id="myPlayerID"
data-video-id="5701193190001"
data-account="1752604059001"
data-player="default"
data-embed="default"
data-application-id
class="video-js"
controls
width="640"
height="360"></video-js>
<script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
<script src="redirect.js"></script>
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this,
options = {"redirectURL": "http://support.brightcove.com"};
myPlayer.navigateOnVideoEnd(options);
});
</script>