使用vue开发实现XixunPlayer的功能.
XixunPlayer 播放流视频
/**
* @Author: 858834013@qq.com
* @Name: StartLiveVideo
* @Date: 2022-04-26
* @Desc: XixunPlayer 播放流视频
*/
<template>
<div>
<el-button class="mb20" @click="dialogVisible=true" size="mini" type="primary">播放流视频</el-button>
<el-dialog
title="播放流视频"
:visible.sync="dialogVisible"
width="40%">
<div class="screenshots">
<p>(支持rtmp,rtsp协议,请先安装live )(from conn-v9.6.9)</p>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="视频地址">
<el-input v-model="form.url">
</el-input>
</el-form-item>
<el-form-item label="宽度">
<el-input v-model="form.width">
</el-input>
</el-form-item>
<el-form-item label="高度">
<el-input v-model="form.height">
</el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getdata">播放视频</el-button>
<el-button type="primary" @click="stopvideo">停止视频</el-button>
</el-form-item>
</el-form>
</div>
</el-dialog>
</div>
</template>
<script>
import { getdata } from '@/api/led/led'
export default {
name: 'pop',
components: {},
data () {
return {
dialogVisible: false,
img: '',
form: {
type: 'callLiveService',
_type: 'StartLiveVideo',
url: '',
width: 400,
height: 300
}
}
},
props: {
id: {
type: String,
default () {
return ''
}
}
},
methods: {
async getdata () {
var that = this
if (!that.form.url) {
that.$message.error('请输入视频地址')
return
}
getdata(that.id, that.form).then(function (res) {
console.log(res)
})
},
async stopvideo () {
var that = this
getdata(that.id, {
type: 'callLiveService',
_type: 'StopLiveVideo'
}).then(function (res) {
console.log(res)
})
}
}
}
</script>