基于Vue的Easy-player最新最简操作指南

站长

2023年02月08日 15:12 · 阅读数 49

项目中需要用到Easy-player，查阅官方文档踩坑，整理了最新可用的引入方法废话不多说直接开导（开始导入）

第一步，命令行中下载Easy-player

npm i easy-player

第二步，移动文件

项目中打开node_modules，找到它

基于Vue的Easy-player最新最简操作指南

复制这三个文件

基于Vue的Easy-player最新最简操作指南

粘贴到public

基于Vue的Easy-player最新最简操作指南

第三步，引入

点开public，进入index.html，用script标签引入

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

第四步，去到你的Vue页面使用

<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>

然后就能看到效果啦，如果有什么问题可以在底下评论，我看到后抽空回复。

转载自:https://juejin.cn/post/7081617025914634254