vue-cli3.0实现播放rtmp直播流

前言:

       用vue来实现播放rtmp,代码很简单,主要用的ckplayer, 在使用过videojs,video等其他插件以后,在播放视频直播流这里,觉得还是ckplayer比较给力,这里说下使用方法

实现效果:

vue-cli3.0实现播放rtmp直播流_第1张图片

目录

实现步骤:

一、下载ckplay按照包  入口

二、将下载好的包里面的ckplayer文件夹拿出来,然后放到public里面

三、在public->index.html里面引入文件

四、写一个  ckplayer.vue  组件

1、templayte里面写一个容器

2、data里面定义属性

3、js写方法。prop中将视频地址从外面获取

4、外面调用,将你的rtmp地址传入就可以了


实现步骤:

一、下载ckplay按照包  入口

vue-cli3.0实现播放rtmp直播流_第2张图片

二、将下载好的包里面的ckplayer文件夹拿出来,然后放到public里面

vue-cli3.0实现播放rtmp直播流_第3张图片

三、在public->index.html里面引入文件

vue-cli3.0实现播放rtmp直播流_第4张图片

四、写一个  ckplayer.vue  组件

1、templayte里面写一个容器

2、data里面定义属性

vue-cli3.0实现播放rtmp直播流_第5张图片

3、js写方法。prop中将视频地址从外面获取

vue-cli3.0实现播放rtmp直播流_第6张图片

vue-cli3.0实现播放rtmp直播流_第7张图片





4、外面调用,将你的rtmp地址传入就可以了

 

 

你可能感兴趣的:(更多插件,vue,rtmp,vue+直播流,vue)