プレイヤー開発者の基本:カスタムプラグイン-理由と方法
このトピックでは、カスタムプラグインを使用する理由を学び、その開発への高レベルのステップを学びます。
なぜカスタムプラグイン？
- 複数の場所で同じコードを複製しないでください
- プラグインに関連付けられているすべてのコードはプレーヤーの一部になります
ステップ
- 強化されたプレーヤー機能のコード化
- CSSだけを含む新しいファイルを作成します
- JavaScriptを含む新しいファイルを作成します
getPlayer()メソッドを使用するコード行を変更する
- CSS ファイルと JavaScript ファイルにリンクし、カスタムプラグインを呼び出します
完全なコード
メインの HTML ページ
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link href="custom-plugin.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="custom-plugin.js"></script>
<script>
videojs.getPlayer('myPlayerID').ready(function() {
var myPlayer = this;
myPlayer.pluginName();
});
</script>
</body>
</html>
カスタムプラグインの JavaScript
videojs.registerPlugin('pluginName', function() {
var myPlayer = this;
// Complete JavaScript
// ...
});
カスタムプラグインの CSS
/*
CSS Here
*/
