网站制作方案策划书,免费软件定位对方手机位置,珠海哪家做企业网站公司好,网页页面设计模板实现以上功能的播放#xff0c;只需要传入一个流的地址即可#xff0c;当然组件也只有简单的实时播放功能
下面直接上组件
里面的flvjs通过npm i flv.js直接下载
templatediv classplayer styleposition: relative;p style只需要传入一个流的地址即可当然组件也只有简单的实时播放功能
下面直接上组件
里面的flvjs通过npm i flv.js直接下载
templatediv classplayer styleposition: relative;p styleposition: absolute !important;top: 10px;left: 20px;通道{{ title }}/pimg src/assets/img/videostop.png alt classcenteredVideo v-showurl video v-showurl refvideoElement classcenteredVideo controls autoplaymuted/video/div
/templatescriptimport flvjs from flv.js; //引入flv
export default {props: {title: {type: String,default: },url: {type: String,default: },},data() {return {flvPlayer: null,// src: [http://172.21.1.111/live?port1935appmyappstreamstreamname],};},mounted() {this.flv_load(this.url);},methods: {flv_load(url) {if (flvjs.isSupported()) {let videoElement this.$refs.videoElement;this.flvPlayer flvjs.createPlayer({type: flv, //媒体类型url: url || , //flv格式媒体URLisLive: true, //数据源是否为直播流hasAudio: false, //数据源是否包含有音频hasVideo: true, //数据源是否包含有视频enableStashBuffer: false, //是否启用缓存区},{enableWorker: false, // 是否启用分离的线程进行转换enableStashBuffer: false, //关闭IO隐藏缓冲区autoCleanupSourceBuffer: true, //自动清除缓存});this.flvPlayer.attachMediaElement(videoElement); //将播放实例注册到节点this.flvPlayer.load(); //加载数据流this.flvPlayer.play(); //播放数据流}},//销毁断流方法destoryVideo() {if (this.flvPlayer) {this.flvPlayer.pause();this.flvPlayer.unload();this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();this.flvPlayer null;}},},//3.在销毁的声明周期中 必须要销毁掉播放器的容器血的教训beforeUnmount() {if (this.flvPlayer) {this.flvPlayer.pause();this.flvPlayer.unload();this.flvPlayer.detachMediaElement();this.flvPlayer.destroy();this.flvPlayer null;}},watch: {url(val) {this.destoryVideo()this.flv_load(val, 变化后);}}}
/scriptstyle scoped langless
.player {background-color: black;height: 100%;width: 100%;border: 1px solid white;color: white;text-align: center;display: flex;align-items: center;
}/* .video-container {display: inline-block;margin-right: 10px;width: 32%;height: 45%;
} */
.centeredVideo {width: 100%;height: 98%;
}
/style这里我封装了两个组件 一个是单个的播放另外一个是窗口切换的 这个是窗口切换的组件
templatediv classcelldiv classcell-tooldiv classbk-button-groupel-radio-group v-modelcellCount sizeel-radio-button clickhandleCount(1) label1 value1 /el-radio-button clickhandleCount(4) label4 value4 /el-radio-button clickhandleCount(6) label6 value6 //el-radio-group!-- el-button clickhandleCount(1) sizesmall1/el-buttonel-button clickhandleCount(4) sizesmall4/el-buttonel-button clickhandleCount(6) sizesmall6/el-button --!-- el-button clickhandleCount(9) sizesmall9/el-buttonel-button clickhandleCount(16) sizesmall16/el-button --/div/divdiv classcell-playerdiv :classcellClass(item.i) v-foritem, index in cellData :keyindexhw-cell-player :titleitem.i v-ifcellCount ! 6 :urlitem.url /hw-cell-playerhw-cell-player :titleitem.i v-ifcellCount 6 item.i ! 2 item.i ! 3:urlitem.url/hw-cell-playertemplate v-ifcellCount 6 item.i 2div classcell-player-6-2-cellhw-cell-player :titleitem.i :urlitem.url/hw-cell-playerhw-cell-player :title(item.i 1) :urlcellData[index 1].url/hw-cell-player/div/template/div/div/div
/templatescript setup langts
import HwCellPlayer from ./HwCellPlayer.vue
import { ref, reactive, computed } from vue
const cellCount refNumber(4)
const cellData2refany([])
const cellData refany([{url: ,i: 1},// {// url: ,// i: 2// },// {// url: ,// i: 3// },// {// url: ,// i: 4// }
])
const cellClass computed(() {return function (index) {switch (cellCount.value) {case 1:return [cell-player-1]case 4:return [cell-player-4]case 6:if (index 1)return [cell-player-6-1]if (index 2)return [cell-player-6-2]if (index 3)return [cell-player-6-none]return [cell-player-6]case 9:return [cell-player-9]case 16:return [cell-player-16]default:break;}}
})
const handleCount (num: any) {cellData.value []cellCount.value numif(cellData2.value.length6){cellData.valuecellData2.value.slice(0,num)return}for (let i 1; i num; i) {cellData.value.push({url: ,i: i})}console.log(cellData.value, this.cellData);
}
defineExpose({handleCount,cellCount,cellData,cellData2,
})
/scriptstyle scoped
.cell-tool {height: 40px;line-height: 30px;padding: 0 7px;
}.cell-player {width: 100%;height: calc(100% - 40px);flex: 1;display: flex;flex-wrap: wrap;justify-content: space-between;
}.cell-player-4 {width: 50%;height: 50% !important;box-sizing: border-box;
}.cell-player-1 {width: 100%;height: 100%;box-sizing: border-box;
}.cell-player-6-1 {width: 66.66%;height: 66.66% !important;box-sizing: border-box;
}.cell-player-6-2 {width: 33.33%;height: 66.66% !important;box-sizing: border-box;display: flex;flex-direction: column;
}.cell-player-6-none {display: none;
}.cell-player-6-2-cell {width: 100%;height: 50% !important;box-sizing: border-box;
}.cell-player-6 {width: 33.33%;height: 33.33% !important;box-sizing: border-box;
}.cell-player-9 {width: 33.33%;height: 33.33% !important;box-sizing: border-box;
}.cell-player-16 {width: 25%;height: 25% !important;box-sizing: border-box;
}.cell {display: flex;flex-direction: column;height: 100%;width: 100%;
}
/style下面是实际使用方法
因为上面的组件暴露了所以直接改组件里面的数据、直接播放了6路下面两个arr是因为来回切换的数据需要 player.value.cellCount 6; player.value.cellData arr; player.value.cellData2 arr;
