‘daijinzheng@xingtongworld.com’
2 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