Todos os produtos
Search

Este produto

    :Crie o console de vídeos curtos

    Central de documentação

    :Crie o console de vídeos curtos

    Última atualização: Jun 27, 2026

    É possível criar um console de vídeos curtos para reproduzir vídeos, visualizar snapshots, revisar vídeos manualmente e recomendar conteúdo. Esse console permite visualizar e gerenciar vídeos de forma visual. Este tópico descreve como criar o console de vídeos curtos.

    Pré-requisitos

    • Antes de criar o console de vídeos curtos para web, instale o Node.js e o gerenciador de pacotes npm para compilar dependências sass, como node-sass.

      Nota

      • Recomendamos o uso do Node.js 11.15.0. Versões anteriores ou posteriores podem causar falhas na instalação ou compilação das dependências sass.

      • Recomendamos o uso do nvm para gerenciar ambientes Node.js. O nvm permite instalar diferentes versões do Node.js e alternar entre elas rapidamente. Execute o comando node -v em uma interface de linha de comando (CLI) para visualizar a versão atual do ambiente Node.js.

      • Recomendamos instalar os ambientes Node.js em um computador local. Após configurar e testar o console, empacote o código-fonte e faça upload do pacote para sua instância do Elastic Compute Service (ECS) para publicação.

    • Antes de integrar o código-fonte do console, integre o AppServer e mantenha-o em execução. Para obter mais informações sobre como criar o AppServer, consulte Integração do lado do servidor.

    Visão geral do console de vídeos curtos

    O console de vídeos curtos oferece os seguintes recursos:

    • Define um interceptor de requisição para processar solicitações de login ou solicitar novo login quando a sessão expirar.

    • Lista todos os vídeos e permite:

      • Consultar vídeos por ID do vídeo, ID do usuário, nome de usuário, título do vídeo, status de revisão e data de criação.

      • Visualizar informações do vídeo, incluindo duração, tamanho e ID.

      • Reproduzir vídeos em diferentes resoluções e visualizar a descrição.

      • Exibir snapshots.

      • Verificar o status de revisão e transcodificação.

      • Recomendar, revisar, transcodificar e excluir vídeos.

    • Lista vídeos recomendados e permite:

      • Consultar vídeos por ID do vídeo, ID do usuário, nome de usuário, título do vídeo e data de criação.

      • Visualizar informações do vídeo, incluindo duração, tamanho e ID.

      • Reproduzir vídeos em diferentes resoluções e visualizar a descrição.

      • Verificar o status de revisão e transcodificação.

      • Pré-carregar vídeos, cancelar recomendações e transcodificar vídeos usando Narrowband HD™.

    Procedimento

    1. Baixe o código-fonte da demonstração de vídeos curtos.

      1. Para criar o console de vídeos curtos, baixe o código-fonte das demonstrações do AppServer e do console de vídeos curtos. Para obter mais informações, consulte Baixar demonstrações do AppServer e console de vídeos curtos.

      2. Descompacte o pacote de código-fonte. O diretório video-admin contém os seguintes diretórios e arquivos:

        ├── node_modules                  // The directory of the dependencies in the Node.js environment. After you run the npm install command, all dependencies are installed in this directory.
├── dist                          // The directory of packaged project files.
├── public                        
│   ├── favicon.ico               
│   └── index.html                // The web page entry, where you can reference content from a Content Delivery Network (CDN), such as online JS and CSS files.
├── src                           // The directory of the business logic and Vue components.
│   ├── assets                    // The directory of static resources, such as CSS files, images, and fonts.
│   │   ├── images
│   │   └── scss
│   ├── components                // The directory of Vue components.
│   │   ├── RecommendVideo.vue    // The dialog box component for recommend videos.
│   │   └── VodPlayer.vue         // The player component.
│   │   └── Tags.vue         // The video tags.
│ │ └ ── VideoDot.vue // The video progress markers.
│   │   └── VideoSort.vue         // The TV play settings.
│   ├── mixin                     // The directory of Vue mixins.
│   │   └── index.js
│   ├── router-short        // The routing table configuration.
│   │   └── index.js
│   ├── views                     // The directory of the rendering component for the Vue router.
│   │   ├── list                  // The rendering component for the video list router.
│   │   │  └── index.vue
│   │   ├── login                 // The rendering component for the logon router.
│   │   │   └── index.vue
│   │   ├── recommend             // The rendering component for the recommended video list router.
│   │   │   └── index.vue
│   │   └── videos                // The rendering component for the main page, side navigation pane, and top navigation bar.
│   │       └── index.vue
│   ├── App.vue                   // The main rendering component.
│   ├── main.js                   // The main entry file.
│   └── router.js                 // The profile of Vue router.
├── .browserslistrc               // The list of compatible browsers.
├── .gitignore
├── babel.config.js               // The profile of Babel.
├── package-lock.json
├── package.json                  // The package description file, which contains the information about dependencies, authors, and description.
├── postcss.config.js             // The profile of PostCSS, which is prefixed with the name of the CSS vendor.
├── README.md
├── README_zh.md
└── vue.config.js                 // The profile of Vue.
        Nota

        O código-fonte do console de vídeos curtos está no diretório

        video-admin

        . Portanto, execute os comandos subsequentes dentro do diretório

        video-admin

        .

    2. Conclua a configuração e a compilação necessárias.

      1. Modifique a configuração no arquivo ./video-admin/vue.config.js. Defina o parâmetro proxy como o endereço IP público da instância ECS onde o AppServer de vídeos curtos foi criado, seguido pela porta 8080, no formato http://<Endereço IP público da instância ECS>:8080. O código a seguir mostra a configuração:

        module.exports = {
// Specify the proxy for frontend development.
devServer: {
 proxy: 'http://*.*.*.*:8080',    // Set this parameter to the endpoint of the ECS instance, without a forward slash (/) at the end.
},
productionSourceMap: false,
// Specify the path of static resources for the production and development environments.
publicPath: process.env.NODE_ENV === 'production'
 ? 'http://example.com/resource/'
 : '/',
}

      2. Após instalar o ambiente, abra uma interface de linha de comando (CLI) e acesse o diretório video-admin. Nesse diretório, execute o seguinte comando para instalar as dependências do projeto:

        npm install

      3. Após instalar as dependências necessárias e modificar a configuração, execute o seguinte comando:

        npm run serve
        Nota

        • Ao executar o comando anterior, um serviço é iniciado no seu computador. Abra a URL padrão http://localhost:8080 em um navegador. Em seguida, use o console no computador local para revisar e recomendar os vídeos enviados. Se você iniciar o serviço em um servidor, abra a seguinte URL em um navegador no computador local: http://Endereço IP do servidor:8080.

        • Ao inicializar o banco de dados criado no AppServer, uma conta de administrador do console é criada por padrão. O nome de usuário é admin e a senha é 123456. Use essa conta para fazer login no console.

    3. Empacote e publique o código-fonte.

      1. Modifique a configuração no arquivo ./video-admin/vue.config.js.

        Ao publicar o código-fonte no ambiente de produção, defina o parâmetro publicPath no arquivo vue.config.js como o caminho dos recursos estáticos. Por exemplo, o projeto atual usa o framework spring boot como backend. Os recursos estáticos do projeto são armazenados no diretório webapp/resource/short-video. Em seguida, defina o parâmetro publicPath no arquivo vue.config.js, conforme mostrado no código a seguir:

        module.exports = {
   // Specify the proxy for frontend development.
   devServer: {
    proxy: 'http://*.*.*.*:8080',    // Set this parameter to the endpoint of the ECS instance, without a forward slash (/) at the end.
   },
  productionSourceMap: false,
  // Specify the path of static resources for the production and development environments.
  publicPath: process.env.NODE_ENV === 'production'
    ? '/resource/short-video/'
    : '/',
}

      2. Acesse o diretório do projeto video-admin e execute o seguinte comando de empacotamento:

        npm run build
        Nota

        • Este comando compacta os arquivos de recursos estáticos. O código-fonte compactado pode ser publicado no ambiente de produção.

        • O projeto é empacotado pelo webpack encapsulado pelo Vue CLI. É possível personalizar o webpack no arquivo vue.config.js. Para obter mais informações, visite Referência de Configuração.

      3. Após executar o comando de empacotamento, os arquivos empacotados são gerados no diretório video-admin/dist com os seguintes diretórios e arquivos:

        ├──dist
   ├── css
   │   ├── app.[hash].css             // The CSS file of Vue components or the custom CSS file.
   │   └── chunk-vendors.[hash].css   // The CSS file that is imported by dependencies.
   ├── fonts
   ├── img
   ├── js
   │   ├── app.[hash].css             // The JS file of Vue components or the custom JS file.
   │   └── chunk-vendors.[hash].css   // The JS file that is imported by dependencies.
   ├── favicon.ico
   └── index.html
        Nota

        Durante o empacotamento, o

        webpack

        separa os arquivos

        CSS

        e

        JS

        importados pelas dependências dos arquivos

        CSS

        e

        JS

        personalizados. Essa separação acelera a resposta da página da web. Além disso, permite atualizar apenas os arquivos

        app.[hash].js

        e

        app.[hash].css

        durante iterações, caso as dependências não tenham sido alteradas.

    4. Publique o código-fonte no AppServer.

      1. O projeto utiliza o framework spring boot como backend. O parâmetro targetPath especifica o diretório onde o console web é implantado. Na demonstração, o diretório é resources. Para alterar o diretório, modifique o parâmetro targetPath da tag <resources> no arquivo pom.xml.

      2. Faça upload do diretório ./video-admin/dist empacotado na etapa anterior para a instância ECS. Armazene todos os arquivos do diretório dist no caminho /src/main/webapp/resource/short-video/ onde reside o código-fonte do AppServer.

        # Upload the dist directory to the ECS instance by using the scp command. Copy all the files in the dist directory to the short-video directory.
scp -rf Upload directory/dist/* Root directory of the AppServer source code/src/main/webapp/resource/short-video/

      3. Reempacote o código-fonte do AppServer onde o console foi integrado. Implante o código-fonte no AppServer e reinicie-o. Para obter mais informações, consulte Integração do lado do servidor. 

        # Go to the root directory of the project in CLI and run the compilation and packaging command. If the AppServer is running, we recommend that you stop the service and then repackage the source code.
mvn clean package -Dmaven.test.skip=true
# After the source code is packaged, the sdk-api-0.0.1-SNAPSHOT.jar file is generated in the target directory that is in the root directory of the project.
# Go to the directory of the JAR package in CLI, deploy the JAR package, and then start the AppServer.
nohup java -jar sdk-api-0.0.1-SNAPSHOT.jar &
        Nota

        A instância ECS adquirida pode ter memória ociosa limitada. Se desejar reempacotar e implantar o código-fonte do AppServer, execute os comandos

        jps

        e

        kill

        para interromper o serviço. Em seguida, execute os comandos

        mvn

        e

        java

        para reempacotar o código-fonte em um pacote JAR e implantá-lo. Caso contrário, o empacotamento pode falhar devido à falta de memória.

      4. Insira o endpoint do AppServer de vídeos curtos em um navegador para acessar a página web do console, por exemplo, http://<Public IP address of the ECS instance>:8080/resource/index.html ou http://Domain name/resource/index.html.