Skip to main content

[Internal] Design samples

[SAMPLE] Updated layout​

Sample article URL

Updated parts : 2 column layout, Numbering list, Badge (for reference article to highlight)

VODの共有と公開​

BlendVision Oneでは、視聴者にコンテンツを配信する方法を3つ提供しています。

こちらでは、各公開方法の詳細と、公開のための詳細な手順を説明します。

ショールーム​

ショールームは、カスタマイズされたウェブサイトとしてコンテンツを配信する簡単な方法です。高度にカスタマイズ可能なテーマを提供し、視聴者とのエンゲージメントを高めます。

カスタムデザインのショールームは簡単に設定可能で、カスタマイズされたプレーヤースタイルを設定したら、URLを視聴者に共有するだけで公開できます。

公開手順​

ショールームを通じてVODコンテンツを公開するには、以下の手順に従ってください。

  1. VODコンテンツ編集時に「ショールーム設定」と「プレーヤー設定」を行っておく

    参考記事

    - ショールームを設定する：ショールームUI（ログインとメインページ）のカスタマイズ

    - プレーヤーの設定：VODコンテンツ用のプレーヤーテンプレートを選択

    - プレーヤーをカスタマイズ：選択可能なプレーヤーテンプレートの作成と編集

  2. ショールームのURLをコピー

    左側サイドバーの「VOD」項目をクリックして「VODリスト」にアクセス

    VODリストのVODコンテンツ右側にある公開ツールアイコンをクリック

    「VOD公開」画面にて「ショールーム」を選択し、URLをコピー

  3. ショールームのURLを視聴者と共有

    ショールームにアクセスするためのシリアルコード（トークン）を生成し、視聴者と共有する必要があります。シリアルコードの生成方法の詳細については、「コンテンツ保護を設定する」をご参照ください。

iframeプレーヤー​

BlendVision Oneでは、コンテンツ保護機能付きでウェブサイトに埋め込みができるiframeプレーヤーを提供しています。

iframeプレーヤーを使って公開する場合、BlendVision APIと連携する必要があります。また、コンテンツ保護にはシリアルコード（トークン）が必要です。詳しくは、「既存のアカウント管理システムと連携する」と「コンテンツ保護を設定する」をご参照ください。

公開手順​

iframeプレーヤーを使ってVODコンテンツを公開するには、以下の手順に従ってください。

  1. VODコンテンツを編集する際に、プレーヤー設定を行っておく

    参考記事

    - プレーヤーの設定：VODコンテンツ用のプレーヤーテンプレートを選択

    - プレーヤーをカスタマイズ：選択可能なプレーヤーテンプレートの作成と編集

  2. iframeの埋め込みコードをコピー

    左側サイドバーの「VOD」項目をクリックして「VODリスト」にアクセス

    VODリストのVODコンテンツ右側にある公開ツールアイコンをクリック

    「VOD公開」画面にて「iframe」を選択し、iframe埋め込みコードをコピー

  3. iframeコードを自分のウェブサイトやプラットフォームに埋め込む

    公開性が「トークン」に設定されている必要があります。コンテンツ保護を有効にするために、シリアルコード（トークン）を生成し、埋め込みiframeコードに統合する必要があります。

    詳しくは開発者向けガイドラインをご参照ください。

     クイックスタート：BlendVision One プライベート再生

プレーヤーSDK（ウェブ / iOS / Android）​

より高度なアプリケーション/サービスとの連携が必要な場合は、BlendVisionプレーヤーSDK for Web/iOS/Androidのご利用をご検討ください。

BlendVision Oneウェブコンソールのプレーヤーテンプレート/チャプター設定/ほとんどのコンテンツ保護（公開性、ドメインコントロールなど）は、ショールームと埋め込みiframeプレーヤーにのみ適用されます。そのため、必要に応じて、統合するアプリケーション/サービス側で関連機能を開発し、プレーヤーSDKと統合する必要があります。詳しくは、「既存のアカウント管理システムと連携する」と「コンテンツ保護を設定する」をご参照ください。

===============================

Note, Warning​

Note の中に箇条書きを追加する場合

  • １例目
  • ２例目

Code

Note の中に箇条書きを追加する場合

  • １例目
  • ２例目

他にも、class= を warning にすると赤くすることも💡↓

Note の中に箇条書きを追加する場合

  • １例目
  • ２例目

Numbering, Checklist​

  1. VODリストから編集したいVODをクリックします。

  2. カバー画像を設定するには、画像タブにアクセスします。

  3. 画像タブのカバー画像の行をクリックすると、編集用のポップアップメニューが表示されます。

  4. 以下の2つのオプションからタイプを選択し、「保存」ボタンを押してアップロードを開始します：

    - 自動: デフォルトのオプションです。

    - カスタム： ローカルから画像ファイルをアップロードします。

    • ファイル形式： png, jpg, jpeg
    • ファイルサイズ： 5 MB未満
    • 最適比率：16:9

  5. アップロードが完了すると、画像タブで設定したカバー画像が確認できます。

Code

  1. VODリストから編集したいVODをクリックします。

  2. カバー画像を設定するには、画像タブにアクセスします。

  3. 画像タブのカバー画像の行をクリックすると、編集用のポップアップメニューが表示されます。

    4. ..... 一部省略 ....

classを list-check にすれば、以下のようなチェックリストも可能🎵

  • VODリストから編集したいVODをクリック

  • カバー画像を設定するには、画像タブにアクセス

  • 画像タブのカバー画像の行をクリック

  • 以下の2つのオプションからタイプを選択し、「保存」ボタンを押してアップロード

Design update - 2 columns layout​

操作はこれだけで完了です。BlendVision Oneでは、ほとんどの設定項目に対して、デフォルトで設定値がセットされています。そのため、最低限しておくべきことは、動画のアップロードだけ。実はこれだけで、あとは自動的にVOD配信の準備が整っていきます。

upload-JP.png

Design update - Note / 注意​

* パソコンやスマートフォンのブラウザから、ウェブコンソールへのアクセスが可能です。いずれの端末でも、正常にインターネットに接続できることを確認してください。なお、作り込んだVOD配信を設定したい方には、細かい設定項目が多いため、パソコンなど大きな画面での操作を推奨いたします。

** もちろん、設定操作を行う端末で同時に視聴することも可能です。(**一部省略**)

Design update - Reference / 参考記事​

Design update - Check icon’s list​

  • 素材となる動画ファイル　（対応ファイル詳細）
  • BlendVision Oneのアカウント
  • BlendVision Oneウェブコンソールで設定操作を行う端末とブラウザ *
  • VOD配信のプレーヤー（視聴側）に対応している端末とブラウザ **　（再生対応ブラウザ一覧）

Design update - Numbering list​

  1. BlendVision Oneアカウントでウェブコンソールにログイン
  2. 左側サイドメニューから「VOD」を開き、右上の「VOD追加」をクリック
  3. 一般タブの「アップロード」＞「ファイル選択」をクリック
  4. 端末に保存しておいた素材となる動画ファイルを選択
  5. 右上の「エンコーディング開始」をクリック