技術志向の連載記事の第 1 回目へようこそ。今後数か月にわたり、新しいプレーヤーのカスタマイズ方法、セキュリティ、トランスコーディングなどのトピックを取り上げます。 ブライトコーブが新製品をリリースすると、見込み客、顧客、パートナーから同じような質問が寄せられるため、これらのトピックについてお話したいと思いました。たとえば、ブライトコーブの Flash ベースの Smartplayer に投資していた顧客は、どこから始めればよいか、新しいプレーヤーが提供するカスタマイズの範囲を知りたがっていました。
Brightcove Player は、可能な限り HTML5 を使用した、現代的な動画プレーヤーです。Brightcove Player は、Brightcove がスポンサーとなっているオープンソース プロジェクトVideo.js から始まりました。現在、Video.js はさらに改良され、開発者が訪問者にユニークな動画体験を提供するために費やす多大な時間を解決しています。この技術をどのように活用できるか、いくつかの例を紹介しましょう。
カスタマイズが簡単なHTML5ビデオプレーヤー
カスタマイズという言葉は通常、人々に不安を植え付ける。ご心配なく。プレーヤーは HTML5 で構築されているため、高度なカスタマイズと拡張が可能です。動画プレーヤーのスキンの色を Web プロパティに合わせて変更したり、メトリクスを収集しながら分析プラットフォーム（Brightcove Analytics 以外）に送信したり、ページ内インタラクションを可能にしたりすることができます。JS と CSS の知識があれば、動画プレーヤーを思い通りに簡単にカスタマイズできます。
動画プレーヤーのスキンのカスタマイズは簡単で、ほとんどがCSS駆動です。プレーヤーボタンの変更、再生ヘッド領域の縮小、再生ボタンの位置の変更など、さまざまなことが可能です。スタジオのPlayersモジュールでは、再生エリアの色を変更できます。より高度な変更には、プレーヤーのCSSをページレベルでオーバーライドするか、プレーヤーにCSSファイルを追加します。
動画レーヤーのスキンカスタマイズの例
動画プレーヤー・プラグインによるインタラクションの構築
プレーヤーの最も強力な側面は、プレーヤーのインタラクションを駆動するプラグインとページ上の JS/CSS であることは明らかです。 これらの動画プレーヤー API を使用すると、イベントをリッスンし、アクションを実行/プログラムすることができます。ダウンロード ボタンを追加するような単純なものから、Google AnalyticsやOmniture にメトリクスを送信するような複雑なものまで、さまざまです。
インタラクションをオンページではなくプラグインにビルドする理由の 1 つは、プラグインを動画プレーヤーのコード内に配置できることです。プレーヤーのビルド プロセスの一環として、プラグインの JS コードが取り込まれ、プレーヤーの JS ファイルにボルトで固定されるため、プレーヤーのリクエストごとに送信するファイルは 1 つで済みます。実際、私はプラグインを作成する際、まず JS ファイルに機能を構築し、動画プレーヤーを含むページでそれを呼び出します。そうすることで、プラグインコードを確認し、デベロッパーコンソールを見て、プラグインコードを調整することができる。プラグインを必要な機能まで完成させたら、コードをプラグインにパッケージしてプレーヤーに添付します。
動画プレーヤーに関連リンクをコーディングすることで、関連するすべてのコンテンツをまとめることができます。
Brightcove Player には Video.js プレーヤーのコアが含まれているため、Brightcove Player で使用できるプラグインの膨大なライブラリが存在します。注: VideoJS ライブラリのすべてのプラグインが、ブライトコーブ プレーヤーでテストされているわけではありません。
プレーヤー用の CSS および/または JS ファイルをホストするスペースが必要な場合は、git ライクなリポジトリにこれらのファイルを格納する機能もあります。リポジトリは、Delivery System API を使用して、アカウントごとに作成できます。 レポジトリを作成し、ファイルをレポジトリにプッシュすると、これらのファイルをプレーヤーのプラグイン セクションで参照できるようになります。
動画プレーヤーのカスタマイズ例
プレーヤーでできることのヒントをお探しですか？ ブライトコーブのセールス エンジニアが監修したPlayer Lounge には、プレーヤーのカスタマイズの素晴らしい例が紹介されています。Brightcove Player ドキュメントのコード サンプルセクションをご覧になれば、すぐに使い始めることができます。この記事で、Brightcove Player とプレーヤーの機能拡張がいかに簡単であるかについて、好奇心を刺激されたことと思います。次回は、トランスコードについて説明します。
