vue web视频播放的一个记录

Tiny2017

于 2021-03-16 10:42:43 发布

阅读量339

点赞数 2

分类专栏： VUE 前端学习

本文链接：https://blog.youkuaiyun.com/Tiny2017/article/details/114870353

版权

前端学习同时被 2 个专栏收录

16 篇文章

订阅专栏

VUE

3 篇文章

订阅专栏

本文详细介绍如何在Vue项目中集成LivePlayer播放器，包括安装必要依赖、配置Webpack及使用步骤。通过具体示例帮助开发者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.播放器选择
1.dplayer
2.liveplayer（此处选择这个）liveplayer

2.安装

npm install --save-dev video.js
npm install @liveqing/liveplayer
npm install flv.js

3.liveplayer在vue中使用
3.1 复制依赖文件

安装 copy-webpack-plugin 插件, npm install copy-webpack-plugin@4.6.0,
编辑你的 webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
    configureWebpack: {
      plugins: [
        new CopyWebpackPlugin([
            { from: 'node_modules/@liveqing/liveplayer/dist/component/crossdomain.xml'},
            { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer.swf'}
            { from: 'node_modules/@liveqing/liveplayer/dist/component/liveplayer-lib.min.js', to: 'js/'},
        ])
      ]
    }
  }

3.2 html模板中引入依赖js

<script src="js/liveplayer-lib.min.js"></script>

3.3 编辑你的 Vue 组件

......

import LivePlayer from '@liveqing/liveplayer'

......
  components: {
    LivePlayer
  }
......

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