livePlayer播放直播流

livePlayer播放直播流

官网:https://www.liveqing.com/docs/manuals/LivePlayer.html#%E5%B1%9E%E6%80%A7-property
业务场景:用户输入rtmp或者rtsp流地址,调用后端接口将其转换为 .flv结尾的地址,将该地址赋值给liveplayer的videoUrl来进行播放

vue2安装

第一步:

npm install @liveqing/liveplayer

第二步:
安装 copy-webpack-plugin 插件,

npm install copy-webpack-plugin@4.6.0

第三步:
如果正在使用 vue2 + vue-cli, 编辑你的 vue.config.js

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

module.exports = {
   
    configu
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在`vue-video-player`中播放RTSP直播,您可以按照以下步骤进行操作: 1. 首先,确保您已经按照上述步骤正确安装了`vue-video-player`和`video.js`。 2. 在您的Vue组件中,引入`vue-video-player`和`video.js`: ```javascript import VueVideoPlayer from 'vue-video-player' import 'video.js/dist/video-js.css' // 全局注册VueVideoPlayer组件 Vue.use(VueVideoPlayer) ``` 3. 在您的Vue组件模板中使用`vue-video-player`: ```html <template> <div> <video-player ref="player" :options="playerOptions"></video-player> </div> </template> ``` 4. 在Vue组件的data选项中定义`playerOptions`对象,其中包含视频播放器的配置选项和视频源: ```javascript export default { data () { return { playerOptions: { // RTSP视频地址 sources: [{ src: 'rtsp://example.com/live/stream', type: 'rtsp' }], // 视频控件选项 controls: true, autoplay: false, preload: 'auto', fluid: true } } }, mounted () { // 播放器初始化 this.$refs.player.videoPlayer.init() } } ``` 请注意,将RTSP视频的URL设置为`src`属性的值,并将`type`属性设置为'rtsp'。 5. 调用`init()`方法来初始化视频播放器。您可以在Vue组件的`mounted()`钩子函数中调用此方法: ```javascript mounted () { this.$refs.player.videoPlayer.init() } ``` 这样,您就可以在Vue应用程序中使用`vue-video-player`来播放RTSP直播了。确保您的RTSP直播的URL是有效的,并且可以在您的网络环境下访问。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值