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

原创于 2020-11-13 10:05:42 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue #LiveQing #vue.js

前端同时被 2 个专栏收录

50 篇文章

订阅专栏

vue

31 篇文章

订阅专栏

本文介绍了如何在Vue项目中安装并配置LiveQing直播播放器，包括通过npm安装相关依赖，修改webpack.dev.conf.js以引入copy-webpack-plugin复制必要文件，并解决播放过程中遇到的TypeError和CORS问题。在Vue组件中导入并使用LivePlayer，同时提供了错误排查的建议，如检查视频URL的有效性和跨域设置。

安装 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