integrated_traffic_uniapp/pages/application/key-project-management/positioning_management/videoView.vue

113 lines
2.3 KiB
Vue
Raw Normal View History

2024-02-20 15:15:01 +08:00
<template>
<view>
<cu-custom bgColor="bg-gradual-blueness" :isBack="true" :isRingt="true">
<block slot="backText">返回</block>
<block slot="content">视频播放</block>
</cu-custom>
<video id="coursewareVideo" :src="src"
controls autoplay="autoplay" style="width: 100%;"></video>
</view>
</template>
<script>
import {
videoPath
} from '@/common/tool.js';
export default {
data() {
return {
url: '',
src:''
}
},
onLoad(options) {
var _this = this;
_this.url = options.url
_this.fnInit()
},
methods: {
fnInit(){
var _this = this;
_this.fnInitVideoPlat()
},
fnInitVideoPlat(){
var _this = this;
uni.showLoading({
title: '加载中'
});
const params = _this.getUrlParams(_this.url)
if(!params || !params.serial){
uni.showToast({
title: '网络错误请重试',
duration: 2000
});
return
}
const serial = params.serial
uni.request({
url: videoPath +'/api/v1/login',
data: {
username:"admin",
password:"234f3424be5a75ad898a1b55f6e34d9e",
url_token_only:true
},
method: 'GET',
header: {
'Content-type': 'application/json'
},
success: (res) => {
console.log(res);
const token = res.data.URLToken
uni.request({
url: videoPath +'/api/v1/stream/start',
data: {
serial,
token
},
method: 'GET',
header: {
'Content-type': 'application/json'
},
success: (ress) => {
console.log(ress);
_this.src = ress.data.HLS
uni.hideLoading();//结束加载中动画
}
})
}
})
},
getUrlParams(url) {
const params = {};
const paramStr = url.split('?')[1]; // 获取问号后面的参数部分
if (paramStr) {
const paramArr = paramStr.split('&'); // 将参数字符串分割成键值对数组
paramArr.forEach((param) => {
const [key, value] = param.split('='); // 将键值对字符串分割成键和值
params[key] = value; // 将键值对添加到params对象中
});
}
return params;
}
},
}
</script>
<style lang="scss" scoped>
.content {
background-color: #fff;
padding: 0 20upx;
}
.button {
text-align: center;
margin-top: 40upx;
margin-bottom: 40upx;
button {
width: 70%;
}
}
</style>