LivePlayer视频播放

少吃芒果

已于 2023-10-30 18:19:02 修改

阅读量747

点赞数

文章标签： vue.js

于 2023-10-25 15:51:19 首次发布

本文链接：https://blog.csdn.net/weixin_72552407/article/details/134036637

版权

步骤1.npm 下载

npm install @liveqing/liveplayer //vue2

npm install @liveqing/liveplayer-v3 //vue3

步骤2.下载copy-webpack-plugin 依赖插件

npm install copy-webpack-plugin@4.6.0

然后编辑自己的vue.config

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/'},
        ])
      ]
    }
  }

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'},
    ]
  })]
})

步骤3.在 public 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>

最后就是引入组件，哪有用哪里引入，也可以全局挂载

import LivePlayer from '@liveqing/liveplayer' // vue2

// import LivePlayer from '@liveqing/liveplayer-v3' // vue3

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

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

详细属性官网查看

LivePlayer H5播放器 | 青柿视频流媒体服务解决方案青柿流媒体服务解决方案包含：LiveQing RTMP直播点播流媒体服务，LiveGBS国标GB28181无插件流媒体服务，LiveNVR安防Onvif/RTSP监控流媒体；国网B接口服务电网B接口；支持本地、内网、私有云部署；为企业视频能力建设，提供了视频点播转码、手机直播推流、云端录像存储计划、RTMP拉流推流服务、RTSP拉流推流服务、设备GB28181接入、Onvif云台控制等等能力，同时提供性能强大稳定的WebRTC/RTMP/HLS/RTSP/HTTP-FLV分发，支持H5页面无插件直播，强大的后台管理，详细的二次开发接口文档，服务搭建简单解压后一键启动，支持Windows和Linux环境部署https://www.liveqing.com/docs/manuals/LivePlayer.html

少吃芒果

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
LivePlayer视频播放

为企业视频能力建设，提供了视频点播转码、手机直播推流、云端录像存储计划、RTMP拉流推流服务、RTSP拉流推流服务、设备GB28181接入、Onvif云台控制等等能力，同时提供性能强大稳定的WebRTC/RTMP/HLS/RTSP/HTTP-FLV分发，支持H5页面无插件直播，强大的后台管理，详细的二次开发接口文档，服务搭建简单解压后一键启动，支持Windows和Linux环境部署。步骤3.在 public index.html 中引用 www 根目录 liveplayer-lib.min.js。
复制链接

扫一扫