‘daijinzheng@xingtongworld.com’
3 years ago
7 changed files with 1451 additions and 1269 deletions
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -0,0 +1,49 @@ |
|||||
|
<template> |
||||
|
<div class='instance'> |
||||
|
<div id="vs"></div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
// import flvjs from "flv.js"; |
||||
|
|
||||
|
|
||||
|
// 引入api |
||||
|
// import * as homeApi from '@/api/home' |
||||
|
import DemoPlugin from 'demoplugin' |
||||
|
import Player from 'xgplayer' |
||||
|
|
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
|
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
let player = new Player({ |
||||
|
id: 'vs', |
||||
|
url: 'rtmp://58.200.131.2:1935/livetv/hunantv', |
||||
|
plugins: [DemoPlugin] |
||||
|
}) |
||||
|
const pipInstance = player.getPlugin('pip') |
||||
|
pipInstance.switchPIP() |
||||
|
player.registerPlugin(DemoPlugin) |
||||
|
// const player = new Player({ |
||||
|
// ..., |
||||
|
// plugins: [DemoPlugin] |
||||
|
// }) |
||||
|
}, |
||||
|
methods: { |
||||
|
|
||||
|
}, |
||||
|
} |
||||
|
|
||||
|
|
||||
|
|
||||
|
</script> |
||||
|
<style> |
||||
|
.demo-video { |
||||
|
max-width: 880px; |
||||
|
max-height: 660px; |
||||
|
/* background-image: url(../../../src/utils/h5player.min.js); */ |
||||
|
} |
||||
|
</style> |
||||
@ -1,166 +0,0 @@ |
|||||
<template> |
|
||||
<v-scale-screen width="1920" height="1080"> |
|
||||
<div id="ty"> |
|
||||
|
|
||||
<div class="main"> |
|
||||
<div class="center"> |
|
||||
<div id="player" class="item"> |
|
||||
<!-- <Video :src="src1" :poster="poster" /> --> |
|
||||
<!-- <video id="myFlvVideo" controls autoplay width="80%" height="200px"></video> --> |
|
||||
<!-- <video class="demo-video" ref="player" muted autoplay></video> --> |
|
||||
|
|
||||
</div> |
|
||||
<div class="item"> |
|
||||
<!-- <Video :src="src2" :poster="poster" /> --> |
|
||||
</div> |
|
||||
<div class="item"> |
|
||||
<!-- <Video :src="src3" :poster="poster" /> --> |
|
||||
</div> |
|
||||
<!-- <div class="item"></div> --> |
|
||||
</div> |
|
||||
</div> |
|
||||
|
|
||||
</div> |
|
||||
</v-scale-screen> |
|
||||
</template> |
|
||||
<script> |
|
||||
// import flvjs from "flv.js"; |
|
||||
import '@/utils/h5player.min.js' |
|
||||
// 引入api |
|
||||
import * as homeApi from '@/api/home' |
|
||||
export default { |
|
||||
data() { |
|
||||
return { |
|
||||
player: null |
|
||||
} |
|
||||
}, |
|
||||
mounted() { |
|
||||
this.$nextTick(() => { |
|
||||
this.initPlayer() |
|
||||
}) |
|
||||
this.getVideo() |
|
||||
}, |
|
||||
methods: { |
|
||||
/** |
|
||||
* 初始化播放器 |
|
||||
*/ |
|
||||
initPlayer() { |
|
||||
this.player = new window.JSPlugin({ |
|
||||
// 需要英文字母开头 必填 |
|
||||
szId: 'player', |
|
||||
// 必填,引用H5player.min.js的js相对路径 |
|
||||
szBasePath: '../../../src/utils/h5player.min.js' |
|
||||
|
|
||||
// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高 |
|
||||
// iWidth: 600, |
|
||||
// iHeight: 400, |
|
||||
|
|
||||
// // 分屏播放，默认最大分屏4*4 |
|
||||
// iMaxSplit: 16, |
|
||||
// iCurrentSplit: 1, |
|
||||
|
|
||||
// // 样式 |
|
||||
// oStyle: { |
|
||||
// border: '#343434', |
|
||||
// borderSelect: '#FFCC00', |
|
||||
// background: '#000' |
|
||||
// } |
|
||||
}) |
|
||||
this.initPlugin() |
|
||||
}, |
|
||||
/** |
|
||||
* 事件初始化 |
|
||||
*/ |
|
||||
initPlugin() { |
|
||||
this.player.JS_SetWindowControlCallback({ |
|
||||
windowEventSelect(iWindIndex) { |
|
||||
// 插件选中窗口回调 |
|
||||
console.log('windowSelect callback: ', iWindIndex) |
|
||||
}, |
|
||||
pluginErrorHandler(iWindIndex, iErrorCode, oError) { |
|
||||
// 插件错误回调 |
|
||||
console.error(`window-${iWindIndex}, errorCode: ${iErrorCode}`, oError) |
|
||||
}, |
|
||||
windowEventOver(iWindIndex) { |
|
||||
// 鼠标移过回调 |
|
||||
console.log('鼠标移过回调', iWindIndex) |
|
||||
}, |
|
||||
windowEventOut(iWindIndex) { |
|
||||
// 鼠标移出回调 |
|
||||
console.log('鼠标移出回调', iWindIndex) |
|
||||
}, |
|
||||
windowFullCcreenChange(bFull) { |
|
||||
// 全屏切换回调 |
|
||||
console.log('全屏切换回调', bFull) |
|
||||
}, |
|
||||
firstFrameDisplay(iWndIndex, iWidth, iHeight) { |
|
||||
// 首帧显示回调 |
|
||||
console.log('首帧显示回调', iWndIndex, iWidth, iHeight) |
|
||||
}, |
|
||||
performanceLack(iWndIndex) { |
|
||||
// 性能不足回调 |
|
||||
console.log('性能不足回调', iWndIndex) |
|
||||
} |
|
||||
}) |
|
||||
this.play() |
|
||||
}, |
|
||||
/** |
|
||||
* 播放 |
|
||||
*/ |
|
||||
play() { |
|
||||
let preUrl = 'rtsp://192.168.66.13:554/openUrl/5jhuK3e' // 播放地址 |
|
||||
const param = { |
|
||||
playURL: preUrl, |
|
||||
// 1：高级模式 0：普通模式，高级模式支持所有 |
|
||||
mode: 1 |
|
||||
} |
|
||||
// 当前播放窗口下标 |
|
||||
let index = 0 |
|
||||
console.log(this.playerArr) |
|
||||
console.log(this.player); |
|
||||
this.player.JS_Play(preUrl, param, index).then( |
|
||||
() => { |
|
||||
// 播放成功回调 |
|
||||
console.log('播放成功') |
|
||||
}, |
|
||||
err => { |
|
||||
console.log('播放失败') |
|
||||
console.log(preUrl); |
|
||||
// console.info('JS_Play failed:', err) |
|
||||
console.info(err) |
|
||||
} |
|
||||
) |
|
||||
}, |
|
||||
getVideo() { |
|
||||
let that = this |
|
||||
console.log(that); |
|
||||
homeApi.allGetVideo().then(res => { |
|
||||
// get allTimeData |
|
||||
const tmpdata = res.data.returnData |
|
||||
console.log(tmpdata); |
|
||||
// this.day_num = tmpdata.day.noRepeatInNum |
|
||||
// this.week_num_num = tmpdata.week.noRepeatInNum |
|
||||
// this.mon_num = tmpdata.month.noRepeatInNum |
|
||||
// this.year_num = tmpdata.year.noRepeatInNum |
|
||||
|
|
||||
// let btdata = new Array(); |
|
||||
// let bvdata = new Array(); |
|
||||
// tmpdata.foreach(function(item,index){ |
|
||||
// console.log(item); |
|
||||
// console.log(index); |
|
||||
// }); |
|
||||
|
|
||||
}); |
|
||||
}, |
|
||||
} |
|
||||
|
|
||||
|
|
||||
} |
|
||||
</script> |
|
||||
<style> |
|
||||
.demo-video { |
|
||||
max-width: 880px; |
|
||||
max-height: 660px; |
|
||||
/* background-image: url(../../../src/utils/h5player.min.js); */ |
|
||||
} |
|
||||
</style> |
|
||||
Loading…
Reference in new issue