推荐一个强大的播放器

最新推荐文章于 2024-01-16 16:59:22 发布

qq_42740100

最新推荐文章于 2024-01-16 16:59:22 发布

阅读量467

点赞数

分类专栏： vue问题文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_42740100/article/details/131994073

版权

vue问题专栏收录该内容

3 篇文章 0 订阅

订阅专栏

#livePlayer播放器

简介
- 在vue3中的使用方式

简介

H5直播/点播播放器，使用简单，功能强大
支持WebRTC/MP4播放;
支持m3u8/HLS播放;
支持HTTP-FLV/WS-FLV/RTMP播放;
支持直播和点播播放;
支持播放器快照截图;
支持点播多清晰度播放;
支持全屏或比例显示;
自动检测IE浏览器兼容播放;
支持自定义叠加层;

在vue3中的使用方式

第一步

先安装依赖: npm install @liveqing/liveplayer-v3

如果是webpack

复制依赖文件（示例通过 webpack 插件自动复制依赖）
copy node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml 到 www 根目录

copy node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js 到 www 根目录

以上 copy 操作可以借助 webpack 插件完成

安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0,
如果你是用vite的继续往下看

如果正在使用 vue3 + vite, 编辑你的 vite.config.js

import copy from 'rollup-plugin-copy'

export default defineConfig({
  plugins: [vue(), copy({
    targets: [
      {src: 'node_modules/@liveqing/liveplayer-v3/dist/component/liveplayer-lib.min.js', dest: 'public/js'},
    ]
  })]
})

第二步(很重要)

在index.html 中引用 www 根目录 liveplayer-lib.min.js
如图所示

<!DOCTYPE HTML>
<html>
    <head>
        <title>template</title>
        ......
        <script src="js/liveplayer-lib.min.js"></script>
        <!-- 如果正在使用 vue-cli:
            <script src="<%= BASE_URL %>js/liveplayer-lib.min.js"></script>
        -->
    </head>
    <body>
        ......
    </body>
</html>

第三步:组件引入

在.vue页面中引入
import LivePlayer from ‘@liveqing/liveplayer-v3’

<LivePlayer :videoUrl="videoUrl" fluent autoplay live stretch></LivePlayer>

事件处理函数和属性在文档中有写，我这里就不过多介绍

官网地址: https://www.liveqing.com