プレイヤー開発者の基本:カスタムプラグイン-コードの変換
ステップ
以下の手順では、1 つの HTML ページに Brightcove Player を強化するコードを記述していることを前提としています。
- JavaScript と CSS 用の空のファイルを作成します。ベストプラクティスとして、ファイル名はプラグインの機能を反映する必要があります。ビデオでは back-forward-buttons.js と back-forward-buttons.css が使用されています。
- HTML ページから CSS をコピーし、
<style>タグを差し引き、専用の CSS ファイルに貼り付けます。 - HTML ページから JavaScript をコピーし、
<script>タグを差し引いて、専用の JavaScript ファイルに貼り付けます。 - JavaScript ファイルで、次のようなコードを見つけます。
を選択し、次のものに置き換えて、その機能を反映するプラグインの名前を選択します。videojs.getPlayer('myPlayerID').ready(function () {videojs.registerPlugin('backForwardButtons', function() { - 元のHTMLページから、
<style>ブロックを削除し、CSSファイルへのリンクに置き換えます。<link href="back-forward-buttons.css" rel="stylesheet"> - 元の HTML ページから、
<script>index.min.jsプレーヤーのファイルにリンクしているタグのすぐ下に、2 番目の<script>タグを使用して、プラグインの JavaScript にリンクします。<script src="back-forward-buttons.js"></script> - 元の HTML ページから、
<script>ブロックの内容を削除し、次の処理を実行するコードを置き換えます。getPlayer()ready()関連する匿名イベントハンドラ関数を持つメソッドとメソッドを使用して、プレーヤーへの参照を取得します。- イベントハンドラ関数で、
myPlayerキーワードという名前の変数を割り当てます。thisキーワードは、このコンテキストのプレーヤーを表します。 - プラグインを呼び出します。
<script> videojs.getPlayer('myPlayerID').ready(function() { var myPlayer = this; myPlayer.backForwardButtons(); }); </script>
完全なコード
メインHTMLページ
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="back-forward-buttons.css" rel="stylesheet">
</head>
<body>
<video id="myPlayerID"
data-video-id="5992439742001"
data-account="1752604059001"
data-player="default"
data-embed="default"
data-application-id
class="video-js"
controls
width="640" height="360"></video>
<script src="//players.brightcove.net/1752604059001/default_default/index.min.js"></script>
<script src="back-forward-buttons.js"></script>
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.backForwardButtons();
});
</script>
</body>
</html>
カスタムプラグインのJavaScript
videojs.registerPlugin('backForwardButtons', function() {
var myPlayer = this,
jumpAmount = 5,
controlBar,
insertBeforeNode,
newElementBB = document.createElement('div'),
newElementFB = document.createElement('div'),
newImageBB = document.createElement('img'),
newImageFB = document.createElement('img');
// +++ Assign IDs for later element manipulation +++
newElementBB.id = 'backButton';
newElementFB.id = 'forwardButton';
// +++ Assign properties to elements and assign to parents +++
newImageBB.setAttribute('src', '//learning-services-media.brightcove.com/doc-assets/player-development/samples/back-forward-buttons/back-button.png');
newElementBB.appendChild(newImageBB);
newImageFB.setAttribute('src', '//learning-services-media.brightcove.com/doc-assets/player-development/samples/back-forward-buttons/forward-button.png');
newElementFB.appendChild(newImageFB);
// +++ Get controlbar and insert elements +++
controlBar = myPlayer.$('.vjs-control-bar');
// Get the element to insert buttons in front of in conrolbar
insertBeforeNode = myPlayer.$('.vjs-volume-panel');
// Insert the button div in proper location
controlBar.insertBefore(newElementBB, insertBeforeNode);
controlBar.insertBefore(newElementFB, insertBeforeNode);
// +++ Add event listeners to jump back or forward +++
// Back button logic, don't jump to negative times
newElementBB.addEventListener('click', function () {
var newTime,
rewindAmt = jumpAmount,
videoTime = myPlayer.currentTime();
if (videoTime >= rewindAmt) {
newTime = videoTime - rewindAmt;
} else {
newTime = 0;
}
myPlayer.currentTime(newTime);
});
// Forward button logic, don't jump past the duration
newElementFB.addEventListener('click', function () {
var newTime,
forwardAmt = jumpAmount,
videoTime = myPlayer.currentTime(),
videoDuration = myPlayer.duration();
if (videoTime + forwardAmt <= videoDuration) {
newTime = videoTime + forwardAmt;
} else {
newTime = videoDuration;
}
myPlayer.currentTime(newTime);
});
});
カスタムプラグインの CSS
#backButton img{
margin-top: -7px;
height: 45px;
width: 45px;
cursor: pointer;
}
#forwardButton img{
margin-top: -7px;
height: 45px;
width: 45px;
cursor: pointer;
}