La guía de operación más reciente y simple para Easy-player basada en Vue

Se debe usar Easy-player en el proyecto, consultar la documentación oficial para pisar el pozo y ordenar los últimos métodos de importación disponibles. No hay muchas tonterías, iluminación directa (iniciar importación)

El primer paso, descargar Easy-player desde la línea de comandos

npm i easy-player
复制代码

El segundo paso es mover el archivo.

Abra node_modules en el proyecto y encuéntrelo

imagen.png

Copia estos tres archivos

imagen.png

pegar al publico

imagen.png

El tercer paso es introducir

Haga clic en público, ingrese index.html e impórtelo con la etiqueta de secuencia de comandos

<html lang="zh-cmn-Hans">
  <head>
    ...
    <script src="./easy-player-lib.min.js"></script>
  </head>
  <body>
      ...
  </body>
</html>
复制代码

El cuarto paso, ve a tu página de Vue para usar

<template>
  <div class="page-header-index-wide">
      <EasyPlayer
        :videoUrl="src" // 你的视频文件
        aspect="19:9"  // 你的视频长宽的比例
        live // 是否接受直播流
        autoplay // 是否自动播放
        stretch // 视频比例是否自适应
        style="width:100%;height:60px" // 调节样式
      ></EasyPlayer>
  </div>
</template>
<script>
import EasyPlayer from 'easy-player'
export default {
  name: '',
  components: {
    EasyPlayer
  }
}
</script>
复制代码

Entonces puede ver el efecto. Si tiene alguna pregunta, puede comentar a continuación, y me tomaré el tiempo para responder después de verlo.

Supongo que te gusta

Origin juejin.im/post/7081617025914634254
Recomendado
Clasificación