利用LiveQing在 vue 页面播放直播视频

最新推荐文章于 2024-08-04 14:40:39 发布

BUG创建者

最新推荐文章于 2024-08-04 14:40:39 发布

阅读量1.5k

点赞数

分类专栏：前端 vue 文章标签： vue LiveQing vue.js

本文链接：https://blog.csdn.net/wzwzwz555/article/details/109668816

版权

前端同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

vue

31 篇文章 1 订阅

订阅专栏

安装 npm install @liveqing/liveplayer
安装 npm install copy-webpack-plugin@4.6.0
在这里插入图片描述
在build文件的 webpack.dev.conf.js下插入

const CopyWebpackPlugin = require('copy-webpack-plugin');

......
    // copy js lib and swf files to dist dir
    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/'}
    ]),
......

在这里插入图片描述
在vue页面使用

import LivePlayer from '@liveqing/liveplayer'

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

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

之前有遇到 **TypeError: The element or ID supplied is not valid. (videojs)**错误
检查 video-url 设置的播放地址是否有效（可以用 VLC 播放尝试）
提示：Access to XMLHttpRequest at … from origin … has been blocked by CORS policy

检查 video-url 设置的播放地址是否允许跨域访问

也可以在官方查看 LiveQing