ご利用の前に

  • Video PlayerマニュアルではNAVERクラウドプラットフォームのLive Station, VOD Transcoderの出力再生および使用性を高めるためにオープンソースベースで具現されたガイドを提供します。
  • 本ガイドはvideo.js 7.3.0バージョンを基準に作成されており、オープンソースを活用した簡単なVideo Playerの具現方法を紹介するガイドです。Player customizingおよびcore機能に関する詳しい内容は次のGitHub video.jsのリンク先でご確認ください。
  • ガイド内で使われたリソースは理解を助けるために作成された例示のパスです。

Video Playerガイドのご紹介

Video Playerガイドはvideo.jsをベースに具現されており、本ガイドを利用してLive Station, VOD Transcoderの出力物を再生できます。

video.jsはHTML5ベースのウェブビデオプレーヤーで、モバイルとデスクトップブラウザにおける映像の再生をサポートし、video.jsプラグインを利用したHTML5とフラッシュビデオの再生およびYoutubeとVimeoの再生をサポートしています。

合わせて、モバイルとデスクトップブラウザにおける映像の再生をサポートします。video.jsに関するより詳しい内容と機能についてはGitHub video.js respositoryをご参考ください。

ご参考 - Video.js端末別のカバレッジ

Format Windows Mac OS Mobile
IE 11+ Chrome Safari Android 4.4 iOS
HLS PASS PASS PASS PASS PASS
MP4 PASS PASS PASS PASS PASS

video.jsを活用したLive Station, VOD Transcoder映像の再生

Step 1. Webページの作成

再生、一時停止、ボリュームの調節などの簡単な映像再生コントロールが含まれたビデオプレーヤーを挿入できるウェブページを作成し、video.jsの使用に必須的なスクリプトをGitHub video.js respositoryからダウンロードした後、サービスするパスにコピーします。

お勧めのダウンロードバージョン

  • 7.3.0

video.js活用必須のスクリプト

<link href="/resources/css/video-js.7.3.0.min.css" rel="stylesheet">
<script src="/resources/js/video-js.7.3.0.min.js"></script>

ご注意

  • video.jsプラグインの特性により、IEにおける再生が円滑でない可能性があります。
  • IEブラウザへのサポートを計画している場合は、IE再生のための別途のプラグインを追加しなければなりません。
  • 本ガイドはvideo.js 7.3.0バージョンを基準に作成されました。下位のバージョンを使用した場合、ガイドで提供する動作と異なる可能性があります。

Step 2. プレーヤーの追加

video.jsプレーヤーを活用するために次の例示のように再生する映像のタイプおよびプラグインが含まれたVideo tagとプラグインを追加します。

  • video.jsの特性により、IEにおける再生が円滑でない可能性があります。
  • IEブラウザにサポートする場合は、別途のプラグインを追加しなければなりません。
  • 本ガイドはvideo.js 7.3.0バージョンを基準に作成されました。
<video
    id="livestation-player"
    class="video-js vjs-default-skin"
    controls
    preload="auto"
    data-setup='{}'>
  <source src="https://kr.object.ncloudstorage.com/vod/poster.mp4" type="video/mp4"></source>
</video>

ご注意

  • video.jsで提供する基本プレーヤーのSkinを使用する場合はvjs-default-skinを追加します。
  • プレーや内で多様なデータの属性(HTML5, Flash..)を使用する場合は、data type属性を使ってタイプ別に再生の優先順位を指定することができます。
    • 例: data-setup='{"techOrder":["html5","flash","flvjs"]}
  • data typeに関する詳しい内容はGitHub video.js respositoryをご参考ください。

ご参考) プロトコル別のApplication Typeの例示

映像再生のための各再生プロトコル別のSource入力の例示は次の通りです。

  • HLS

    <source src="https://zzxflvrmrdks890571.cdn.ntruss.com/live/sf5fvupyck3rgu12/playlist.m3u8" type="application/x-mpegURL"/>
    
  • HLS映像中断機能の活用に関する詳しい内容はGitHub video.js respositoryをご参考ください。
  • MP4/FLV (VOD)
<source src="https://kr.object.ncloudstorage.com/vod/poster.mp4" type="video/mp4"/>
<source src="https://kr.object.ncloudstorage.com/vod/poster.flv" type="video/flv"/>
  • flvの再生のためには別途のプラグインの追加が必要です。(ex. videojs-flvjs.min.js)
  • flvの再生は7.3.0バージョンではなく、6.xバージョンでの活用をお勧めします。
  • Flash contents (RTMP)
<source src="rtmp://upload-nc.nstream.video/live&bfb8gdlm3db855zgnebpjoklh0bycoc5" type="video/mp4"/>
  • RTMP映像を再生する場合、ブラウザ内にflashがインストールされていなければなりません。
  • Flashの再生はvideo.jsで基本提供される機能ではありません。再生のために別途のプラグインの適用が必要です。(ex.videojs-flash)
    • flashの再生をサポートする計画がある場合は、video.js 6.xバージョンの活用をお勧めします。
  • RTMP映像を再生する場合、typeは'video/mp4'に指定します。
  • ApplicationとStream nameの間に必ず&の特殊文字を入力しなければなりません。
    • 例: live&bfb8gdlm3db855zgnebpjoklh0bycoc5
  • flashの再生のみを活用する場合、data-setupは'{"techOrder":["flash"]}'に設定できます。

Step 3. 活用の例示

Live Station m3u8の再生

リアルタイムでトランスコードされているLive Stationのコンテンツを(m3u8) video.jsを活用したプレーヤーを使って再生できます。

① thumbnailポスターイメージの追加

プレーヤー内のプレビュー画面をLive Stationのサムネイルイメージに表示できます。

次のposterにポスターイメージのURLを追加します。

<video
    id="livestation-player"
    class="video-js"
    controls
    preload="auto"
    poster="https://zzxflvrmrdks890571.cdn.ntruss.com/live/sf5fvupyck6rgu12/thumbnail_original.jpg"
  .....
</video>
② プレーヤーで再生するHLSコンテンツの追加
 <source src="https://zzxflvrmrdks890571.cdn.ntruss.com/live/sf5fvupyck6rgu12/playlist.m3u8" type="application/x-mpegURL"></source>
詳しい具現

例示 : ①~②を活用したNAVERクラウドプラットフォームLive Stationコンソール内のモニタリングプレーヤー

プレーヤ内における画質転換の具現に関するガイドが必要な場合は下の付録をご参考ください。

VOD Transcoder映像の再生

Jobの実行が完了したVOD Transcoderの出力物をプレーヤで再生できます。

① Thumbnailポスターイメージの追加

プレーヤー内のプレビュー画面を特定のイメージとして表示できます。

次のposterにImage URLを追加します。

<video
    id="vodTranscoder-player"
    class="video-js"
    controls
    preload="auto"
    poster="https://kr.object.ncloudstorage.com/vod/poster.png"
  .....
</video>
② プレーヤーで再生するVODコンテンツの追加
<source src="https://kr.object.ncloudstorage.com/vod/abc.mp4"" type="video/mp4"></source>
  • 次のようにvideoタグ内のloopタグを追加すると、VODを無限に再生できます。
  <video
  .....
      preload="auto"
      loop
  .....
詳しい具現

例示 : ①~②を活用してLive Stationのレコーディングファイルを予め再生できます。

  • レコーディングファイル映像再生の前(Posterを活用)

  • flv vodファイルの再生


付録 1. Demo Player

よく使われるプロトコル別のコンテンツをvideo.jsを利用して具現されたプレーヤーで再生できます。

デモプレーヤーは次のリンクをクリックしてください。

  • Video player demo (次のテキストをクリックするとデモページに移動します。)

付録 2. Customizingの例示

video.jsで提供するdefault-skinおよびプラグインを活用したりCSSを修正すれば、サービスの用途に合わせて多様なプレーヤーを具現できます。

Custom skinを適用したプレーヤー

  • ① Control bar内のアイコンを変更したりcssを修正すれば、customizing skinを具現できます。
  • ② Customizingを利用し、再生コンテンツがm3u8の場合はLIVEで表示されます。
  • ③ 特定の画質を選択すると、画質別の映像を再生できます。
  • 画質転換機能はvideo.js coreで提供する機能ではなく、別途のプラグインで具現されました。(例: videojs-resolution-switcher.js)
    • 詳しい内容は上のプラグインgitHubのリンク先でご確認ください。

に対する検索結果は~件です。 ""

    に対する検索結果がありません。 ""

    処理中...