php 获取rtmp视频流,vue下rtmp视频流读取

vue下rtmp视频流读取

思路：采用ckplayer开源插件读取rtmp视频流，延迟小，插件下载地址：http://www.ckplayer.com/

一、html中运行

二、vue中运行

2.1 将ckplayer文件放在static文件夹下

image.png

2.2 index.html的head中引入js

2.3 组件中运用

const CKplayer = window.ckplayer

export default {

name: '',

components: {},

props: {},

data () {

return {

player: null,

videoObject: {

container: '.video-content', // 容器的ID或className

variable: 'player', // 播放函数名称

autoplay: true, // 是否自动播放

live: true // 是否是直播视频 true = 直播，false = 点播}

}

}

},

computed: {},

watch: {},

beforeCreate () { },

created () { },

beforeMount () { },

mounted () {

var videoObject = {

...this.videoObject,

video: 'rtmp://58.200.131.2:1935/livetv/hunantv', // 在线可用的rtmp源

container: '#video'

}

this.player = new CKplayer(videoObject)

},

beforeUpdate () { },

updated () { },

activated () { },

deactivated () { },

beforeDestroy () { },

destroyed () { },

methods: {}

}

.video-content,.is-full {

height: 100%;

}