Skip to content

蒋秀川 / miniProject

Go to a project
Commit 1846bf5f by 李乾广
Options

修改bug

1 parent 95ca659a
Expand all
Inline Side-by-side
Showing 11 changed files with 56 additions and 35 deletions
h5/package.json
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
"less": "^4.2.0", "less": "^4.2.0",
"less-loader": "^11.1.3", "less-loader": "^11.1.3",
"moment": "^2.29.4", "moment": "^2.29.4",
"vant": "^2.12.54",
"vue": "^2.6.14", "vue": "^2.6.14",
"vue-router": "^3.5.1" "vue-router": "^3.5.1"
}, },
......
h5/src/main.js
...@@ -2,6 +2,9 @@ import Vue from 'vue' ...@@ -2,6 +2,9 @@ import Vue from 'vue'
import App from './App.vue' import App from './App.vue'
import router from './router' import router from './router'
import ElementUI from 'element-ui'; import ElementUI from 'element-ui';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
import 'element-ui/lib/theme-chalk/index.css' import 'element-ui/lib/theme-chalk/index.css'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(ElementUI) Vue.use(ElementUI)
......
h5/src/views/extension/index.vue
<template> <template>
<div class="j-player-wrapper"> <div class="extension-page">
<j-player ref="jplay" <div class="j-player-wrapper">
:type="playerType" <j-player ref="jplay"
:prefix-url="params.prefixUrl" :type="playerType"
:watermark="params.watermark" :prefix-url="params.prefixUrl"
:watermark="params.watermark"
:player-address="params.address"
:channel-id="params.channelId" :player-address="params.address"
:channel-id="params.channelId"
:datetime-range="params.datetimeRange" :datetime-range="datetimeRange"
/> />
</div> </div>
<!-- 时间线组件 -->
<div class="extension-time-box">
<videoTime ref="videoTime" @videoTimeChange="videoTimeChange" @ptzControlClick="ptzControlClick" @ptzControlStop="ptzControlStop"/>
</div>
</div>
</template> </template>
<script> <script>
import { getUrlParams } from './utils'; import { getUrlParams } from './utils';
import JPlayer from '@/components/jPlayer'; import JPlayer from '@/components/jPlayer';
import videoTime from './videoTime';
import moment from "moment";
/** /**
* 此部分负责： * 此部分负责：
* 1. iframe通信postmessage * 1. iframe通信postmessage
...@@ -27,21 +34,19 @@ export default { ...@@ -27,21 +34,19 @@ export default {
name: 'JPlayerExtension', name: 'JPlayerExtension',
components: { components: {
JPlayer, JPlayer,
videoTime,
}, },
data() { data() {
return { return {
playerType: 'live', playerType: 'live',
datetimeRange: [],
params: { params: {
// channelId: '20000000001310000011', // channelId: '20000000001310000011',
channelId: '', channelId: '',
address: '52.130.155.147', address: '52.130.155.147',
prefixUrl: '', prefixUrl: '',
watermark: '', watermark: '',
// 回放参数
playerType: 'live',
datetimeRange: [],
}, },
} }
}, },
...@@ -49,6 +54,24 @@ export default { ...@@ -49,6 +54,24 @@ export default {
this.init(); this.init();
}, },
methods: { methods: {
// 时间线改变
videoTimeChange(val) {
this.playerType = moment(val).format('YYYY-MM-DD HH:mm:ss') == moment().format('YYYY-MM-DD HH:mm:ss')?'live':'playback';
if(this.playerType == 'playback'){
this.datetimeRange = [new Date(moment(val).format("YYYY-MM-DD HH:mm:ss")).getTime(),new Date().getTime()]
}
},
// 云台控制
ptzControlClick(type) {
console.log(type)
// this.$refs.jplay.ptzController(type);
},
// 云台控制结束
ptzControlStop() {
// this.$refs.jplay.ptzController('stop');
},
init() { init() {
// 通过URL获取相关参数 // 通过URL获取相关参数
const urlParamsMap = getUrlParams(window.location.hash); const urlParamsMap = getUrlParams(window.location.hash);
...@@ -78,8 +101,8 @@ export default { ...@@ -78,8 +101,8 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.j-player-wrapper { .j-player-wrapper {
width: 100%; width: 100vw;
height: 100%; height: 56vw;
overflow: hidden; overflow: hidden;
} }
</style> </style>
h5/src/views/pc/index.vue
...@@ -87,20 +87,12 @@ ...@@ -87,20 +87,12 @@
<script> <script>
import videoTime from './videoTime.vue' import videoTime from './videoTime.vue'
import jPlayer from '@/components/jPlayer'; import jPlayer from '@/components/jPlayer';
// import jPlayer0 from '../jPlayer/index.vue'
// import jPlayer1 from '../jPlayer/index.vue'
// import jPlayer2 from '../jPlayer/index.vue'
// import jPlayer3 from '../jPlayer/index.vue'
import moment from 'moment' import moment from 'moment'
export default { export default {
name: 'JPlayerWeb', name: 'JPlayerWeb',
components:{ components:{
videoTime, videoTime,
jPlayer, jPlayer,
// jPlayer0,
// jPlayer1,
// jPlayer2,
// jPlayer3
}, },
data() { data() {
return { return {
...@@ -153,9 +145,10 @@ export default { ...@@ -153,9 +145,10 @@ export default {
} }
}, },
mounted() { mounted() {
window.playWebVideo = this.playWebVideo;
}, },
methods: { methods: {
init(obj) { playWebVideo(obj) {
if (!obj.address || !obj.channelId) { if (!obj.address || !obj.channelId) {
console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。'); console.error('传递URL参数有误，请确认 address 和 channelId 是否正确。');
return false return false
......
h5/src/views/pc/pcdemo.vue
...@@ -5,15 +5,16 @@ ...@@ -5,15 +5,16 @@
<el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147'})">添加视频一</el-button> <el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147'})">添加视频一</el-button>
<el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147'})">添加视频二</el-button> <el-button type="primary" @click="addPlayer({channelId: '20000000001310000008',address: '52.130.155.147'})">添加视频二</el-button>
</div> </div>
<indexPlayer ref="indexPlayer" /> <iframe id="iframe" name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="http://localhost:9091/#/jplayer-web" frameborder="0"></iframe>
<!-- <iframe name="iframe" ref="iframe" style="width: 100vw;height:calc(100vh - 60px);" src="http://192.168.1.117:8080/" frameborder="0"></iframe> -->
</div> </div>
</template> </template>
<script> <script>
import indexPlayer from './index.vue'; // import indexPlayer from './index.vue';
export default { export default {
name: 'jplayerWebDemo', name: 'jplayerWebDemo',
components: { components: {
indexPlayer, // indexPlayer,
}, },
data() { data() {
return { return {
...@@ -23,7 +24,9 @@ export default { ...@@ -23,7 +24,9 @@ export default {
}, },
methods: { methods: {
addPlayer(obj) { addPlayer(obj) {
this.$refs.indexPlayer.init(obj); // window.playWebVideo(obj)
window.parent.document.getElementById('iframe').contentWindow.playWebVideo(obj)
// document.getElementById('iframe').contentWindow.playWebVideo(obj);
}, },
}, },
} }
......
h5/src/views/pc/videoTime.vue
...@@ -118,8 +118,6 @@ export default { ...@@ -118,8 +118,6 @@ export default {
isNoBack:true, isNoBack:true,
isFullScreen:false, isFullScreen:false,
screenImgTotal:0,
screenImgList:[],
mouseMoveTime:'', mouseMoveTime:'',
isMouseMove:false, isMouseMove:false,
mouseMoveTimeFocus:false, mouseMoveTimeFocus:false,
......
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!