短いビデオコンソールを構築して、ビデオの再生、スナップショットの表示、ビデオの手動レビュー、およびビデオの推奨を行うことができます。 短いビデオコンソールを使用すると、視覚化された方法でビデオを表示および管理できます。 このトピックでは、短いビデオコンソールを構築する方法について説明します。

始める前に

  • web用の短いビデオコンソールを構築する前に、Node.jsとnpmパッケージマネージャーをインストールして、node-sassなどのsass依存関係をコンパイルする必要があります。
    注
    • Node.js 11.15.0を使用することを推奨します。 以前のバージョンまたはそれ以降のバージョンを使用する場合、sass依存関係のインストールまたはコンパイルに失敗する可能性があります。
    • nvmを使用してNode.js環境を管理することを推奨します。 nvmを使用すると、さまざまなバージョンのNode.js環境をインストールし、それらのバージョンをすばやく切り替えることができます。 コマンドラインインターフェイス (CLI) でnode -vコマンドを実行して、現在のNode.js環境のバージョンを表示できます。
    • Node.js環境をローカルコンピューターにインストールすることを推奨します。 コンソールを設定してテストした後、ソースコードをパッケージ化し、パッケージをElastic Compute Service (ECS) インスタンスにアップロードして公開します。
  • コンソールのソースコードを統合する前に、AppServerを統合し、AppServerを実行し続ける必要があります。 AppServerのビルド方法の詳細については、「短いビデオAppServerを構築する」をご参照ください。

短いビデオコンソールの概要

短いビデオコンソールには、次の機能があります。

  • ログオン要求を処理したり、ログオン期限が切れたユーザーに再度ログオンを要求したりするリクエストインターセプターを設定します。
  • すべてのビデオを一覧表示し、次のことを可能にします。
    • ビデオID、ユーザーID、ユーザー名、ビデオタイトル、レビューステータス、作成日に基づいてビデオを照会します。
    • ビデオの長さ、ビデオサイズ、ビデオIDなどのビデオ情報を表示します。
    • さまざまな解像度でビデオを再生し、ビデオの説明を表示します。
    • スナップショットを表示します。
    • レビューステータスとコード変換ステータスを確認します。
    • 推奨、レビュー、トランスコード、およびビデオを削除します。
  • リストはビデオを推奨し、あなたができるようにします:
    • ビデオID、ユーザーID、ユーザー名、ビデオタイトル、作成日に基づいてビデオを照会します。
    • ビデオの長さ、ビデオサイズ、ビデオIDなどのビデオ情報を表示します。
    • さまざまな解像度でビデオを再生し、ビデオの説明を表示します。
    • レビューステータスとコード変換ステータスを確認します。
    • Narrowband HDを使用したビデオのプリフェッチ、推奨のキャンセル、ビデオのトランスコード™.

手順

  1. 短いビデオデモのソースコードをダウンロードしてください。
    1. ショートビデオコンソールを構築するには、ショートビデオAppServerのソースコードとコンソールデモをダウンロードする必要があります。 For more information, see Download short video AppServer and console demos.
    2. ソースコードパッケージを解凍します。 video-adminディレクトリには、次のディレクトリとファイルが含まれます。
      â ─ ─ node_modules // Node.js環境の依存関係のディレクトリ。 npm installコマンドを実行すると、すべての依存関係がこのディレクトリにインストールされます。
├─ ─ dist // パッケージ化されたプロジェクトファイルのディレクトリ。
â ─ ─ パブリック
│ ├─ ─ favicon.ico
オンラインJSやCSSファイルなど、コンテンツ配信ネットワーク (CDN) のコンテンツを参照できるwebページエントリ。
├─ ─ src // ビジネスロジックとVueコンポーネントのディレクトリ。
CSSファイル、画像、フォントなどの静的リソースのディレクトリ。The directory of static resources.
│ │ ├─ イメージ
│ │ ά ─ ─ scss
│ ├─ ─ components // Vueコンポーネントのディレクトリ。
│ │ ├─ ─ RecommendVideo.vue // レコメンドビデオのダイアログボックスコンポーネント。
│ │ └ ─ ─ VodPlayer.vue // プレイヤーコンポーネント。
│ │ ά ─ ─ Tags.vue // ビデオタグ。
│ │ ά ─ ─ VideoDot.vue // ビデオの進行状況マーカー。
│ │ └ ─ ─ VideoSort.vue // テレビの再生設定。
│ ├─ ─ mixin // Vue mixinsのディレクトリ。
│ │ ά ─ ─ index.js
│ ├─ ─ router-short // ルーティングテーブルの設定。
│ │ ά ─ ─ index.js
Vueルーターのレンダリングコンポーネントのディレクトリ。The directory of the rendering component for the Vue router.
│ │ ├─ ─ list // ビデオリストルーターのレンダリングコンポーネント。
│ │ │ ά ─ ─ index.vue
│ │ ├─ ─ login // ログオンルーターのレンダリングコンポーネント。
│ │ │ ά ─ ─ index.vue
│ │ ├─ ─ recommend // 推奨される動画リストルーターのレンダリングコンポーネント。
│ │ │ ά ─ ─ index.vue
メインページ、サイドナビゲーションペイン、および上部ナビゲーションバーのレンダリングコンポーネント。
│ │ ά ─ ─ index.vue
│ ├─ ─ App.vue // メインレンダリングコンポーネント。
│ ├─ ─ main.js // メインエントリファイル。
-router.js // Vue routerのプロファイル。
â ─ ─ 。browserslistrc // 互換性のあるブラウザのリスト。
â ─ ─ 。gitignore
â ─ ─ babel.config.js // Babelのプロファイル。
â ─ ─ package-lock.json
├─ ─ package.json // 依存関係、作成者、説明に関する情報を含むパッケージ説明ファイル。
â ─ ─ postcss.config.js // PostCSSのプロファイル。先頭にCSSベンダーの名前が付いています。
â ─ ─ README.md
â ─ ─ README_zh.md
└ ─ ─ vue.config.js // Vueのプロファイル。
      注 The source code of the short video console is in the video-admin directory. したがって、video-adminディレクトリで後続のコマンドを実行する必要があります。
  2. 必要な設定とコンパイルを完了します。
    1. の設定を変更します。/video-admin/vue.config.jsファイル。 proxyパラメーターを、短いビデオAppServerが構築されているECSインスタンスのパブリックIPアドレスに設定し、続いてポート番号8080 (http:// <ECSインスタンスのパブリックIPアドレス>:8080) を設定します。 次のコードは、設定を示しています。
      module.exports = {
// フロントエンド開発のプロキシを指定します。
devServer: {
 proxy: 'http:// *.*.*.*:8080 ', // このパラメーターをECSインスタンスのエンドポイントに設定し、末尾にスラッシュ (/) を付けません。
},
productionSourceMap: false、// 運用環境と開発環境の静的リソースのパスを指定します。
publicPath: process.env.NODE_ENV === 'production'
 ? 'http://example.com/resource/'
 : '/',
}
    2. 環境をインストールしたら、コマンドラインインターフェイス (CLI) を開き、video-adminディレクトリに移動します。 ディレクトリで、次のコマンドを実行してプロジェクトの依存関係をインストールします。
      npmインストール
    3. 必要な依存関係をインストールし、必要な構成を変更した後、次のコマンドを実行します。
      npmランサーブ
      注
      • After you run the preceding command, a service is started on your computer. ブラウザでデフォルトのURL http:// localhost:8080を開きます。 次に、ローカルコンピューターのコンソールを使用して、アップロードした動画を確認して推奨できます。 サーバーでサービスを開始する場合は、ローカルコンピューターのブラウザーで次のURLを開くことができます。http:// サーバーのIPアドレス: 8080。
      • AppServerで作成されたデータベースを初期化すると、デフォルトでコンソール管理者アカウントが作成されます。 The username is admin, and the password is 123456. このアカウントを使用してコンソールにログインできます。
  3. ソースコードをパッケージ化してリリースします。
    1. の設定を変更します。/video-admin/vue.config.jsファイル。

      本番環境でソースコードをリリースするときは、vue.config.jsファイルのpublicPathパラメーターを静的リソースのパスに設定します。 たとえば、現在のプロジェクトはバックエンドとしてspring bootフレームワークを使用しています。 プロジェクトの静的リソースは、webapp/resource/short-videoディレクトリに保存されます。 次に、次のコードに示すように、vue.config.jsファイルでpublicPathパラメーターを設定します。 

      module.exports = {
   // フロントエンド開発のプロキシを指定します。
   devServer: {
    proxy: 'http:// *.*.*.*:8080 ', // このパラメーターをECSインスタンスのエンドポイントに設定し、末尾にスラッシュ (/) を付けません。
   },
  productionSourceMap: false、
  // 運用環境と開発環境の静的リソースのパスを指定します。
  publicPath: process.env.NODE_ENV === 'production'
    ? '/resource/short-video/'
    : '/',
}
    2. プロジェクトディレクトリvideo-adminに移動し、次のパッケージ化コマンドを実行します。
      npm実行ビルド
      注
      • 静的リソースファイルを圧縮します。 圧縮されたソースコードは、本番環境でリリースできます。
      • プロジェクトはwebpackによってパッケージ化され、Vue CLIによってカプセル化されます。 vue.config.jsファイルでwebpackをカスタマイズできます。 詳細については、「設定リファレンス」をご参照ください。
    3. packagingコマンドを実行すると、パッケージ化されたファイルがvideo-admin/distディレクトリに次のディレクトリとファイルとともに生成されます。
      ─ ─ dist
   â ─ ─ css
   │ ├─ ─ app.[hash].css // VueコンポーネントのCSSファイルまたはカスタムCSSファイル。
   依存関係によってインポートされたCSSファイル。The CSS file that is imported by dependencies.
   ├─ ─ フォント
   â ─ ─ img
   â ─ ─ js
   │ ├─ ─ app.[hash].css // VueコンポーネントのJSファイルまたはカスタムJSファイル。
   │ oes ─ ─ チャンク-vendors.[hash].css // 依存関係によってインポートされたJSファイル。
   â ─ ─ favicon.ico
   └── index.html
      注 パッケージ化中、webpackは、依存関係によってインポートされるCSSおよびJSファイルをカスタムCSSおよびJSファイルから分離しました。 分離は、ウェブページ応答を高速化する。 さらに、依存関係が変更されていない場合、分離により、イテレーション中にapp.[hash].jsおよびapp.[hash].cssファイルのみを更新できます。
  4. AppServerでソースコードをリリースします。
    1. The project uses the spring boot framework as the backend. targetPathパラメーターは、webコンソールがデプロイされるディレクトリを指定します。 In the demo, the directory is resources. ディレクトリを変更するには、pom.xmlファイルの <resources> タグのtargetPathパラメーターを変更する必要があります。
    2. をアップロードします。/video-ECSインスタンスの最後のステップでパッケージ化されたadmin/distディレクトリ。 distディレクトリのすべてのファイルを、AppServerのソースコードが存在する /src/main/webapp/resource/short-video/ パスに格納します。
      # Upload the dist directory to the ECS instance by using the scp command. distディレクトリ内のすべてのファイルをshort-videoディレクトリにコピーします。
scp -rfアップロードディレクトリ /dist/* AppServerソースコードのルートディレクトリ /src/main/webapp/resource/short-video /
    3. Repackage the AppServer source code where the console is integrated. AppServerにソースコードをデプロイします。 次に、AppServerを再起動します。 詳細については、「短いビデオAppServerを構築する」をご参照ください。 
      # CLIでプロジェクトのルートディレクトリに移動し、compilation and packagingコマンドを実行します。 AppServerが実行されている場合は、サービスを停止してからソースコードを再パッケージ化することを推奨します。
mvnクリーンパッケージ-Dmaven.test.skip=true
# ソースコードがパッケージ化されると、プロジェクトのルートディレクトリにあるターゲットディレクトリにsdk-api-0.0.1-SNAPSHOT.jarファイルが生成されます。
# CLIでJARパッケージのディレクトリに移動し、JARパッケージをデプロイしてから、AppServerを起動します。
nohup java -jar sdk-api-0.0.1-SNAPSHOT.jar &
      注 購入したECSインスタンスのアイドルメモリが制限されている可能性があります。 If you want to repackage and deploy the source code of the AppServer, run the jps command and the kill command to stop the service. 次に、mvnコマンドとjavaコマンドを実行して、ソースコードをJARパッケージに再パッケージ化し、JARパッケージをデプロイします。 そうしないと、メモリ不足によりパッケージングが失敗する可能性があります。
    4. ブラウザに短いビデオAppServerのエンドポイントを入力して、コンソールのwebページにアクセスします。たとえば、http:// <ECSインスタンスのパブリックIPアドレス>:8080/resource/index.htmlまたはhttp:// Domain name/resource/index.htmlです。