91 lines
1.9 KiB
Vue
91 lines
1.9 KiB
Vue
<template>
|
|
<el-drawer
|
|
v-model="visible"
|
|
destroy-on-close
|
|
@closed="closeDrawer"
|
|
:size="800"
|
|
>
|
|
<el-container v-loading="loading">
|
|
<el-main style="padding: 0 20px 20px 20px;">
|
|
<sc-title :title="channelName"></sc-title>
|
|
<video id="videoElement" muted="muted"></video>
|
|
</el-main>
|
|
<el-footer>
|
|
<el-button @click="visible = false">关闭</el-button>
|
|
</el-footer>
|
|
</el-container>
|
|
</el-drawer>
|
|
</template>
|
|
<!--<script src="https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js"></script>-->
|
|
<script>
|
|
import scVideo from '@/components/scVideo'
|
|
export default {
|
|
components: {scVideo},
|
|
emits: ["success", "closed"],
|
|
props: {
|
|
channelId: {
|
|
type: String,
|
|
},
|
|
channelName: {
|
|
type: String,
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
visible: true,
|
|
isSaveing: false,
|
|
params:{
|
|
json:{
|
|
data: {
|
|
channelId: "",
|
|
streamType: "2",
|
|
type: "flv"
|
|
}
|
|
},
|
|
code:'video_realtime'
|
|
},
|
|
};
|
|
},
|
|
created(){
|
|
const scriptInfo = document.createElement("script");
|
|
scriptInfo.setAttribute("data-callType","callScript");
|
|
scriptInfo.src = "https://cdn.bootcdn.net/ajax/libs/flv.js/1.6.2/flv.js";
|
|
document.head.appendChild(scriptInfo)
|
|
},
|
|
mounted() {
|
|
this.$nextTick(()=>{
|
|
this.params.json.data.channelId = this.channelId;
|
|
// this.params.json = JSON.stringify(this.jso);
|
|
this.$API.am.video.item.req(this.params).then(res=>{
|
|
debugger;
|
|
console.log(res);
|
|
this.url = res.url;
|
|
if (flvjs.isSupported()) {
|
|
let videoElement = document.getElementById('videoElement');
|
|
let flvPlayer = flvjs.createPlayer({
|
|
type: 'flv',
|
|
url: res.url
|
|
});
|
|
flvPlayer.attachMediaElement(videoElement);
|
|
flvPlayer.load();
|
|
flvPlayer.play();
|
|
}
|
|
})
|
|
})
|
|
},
|
|
methods: {
|
|
closeDrawer() {
|
|
this.$emit('closed');
|
|
},
|
|
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
/*.el-drawer.rtl{
|
|
width: 90%!important;
|
|
}*/
|
|
</style>
|