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

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

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

npm i easy-player
复制代码

第二步,移动文件

项目中打开node_modules,找到它

image.png

复制这三个文件

image.png

粘贴到public

image.png

第三步,引入

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

扫描二维码关注公众号,回复: 14211075 查看本文章
<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>
复制代码

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

猜你喜欢

转载自juejin.im/post/7081617025914634254