pdkj
/
lcny-admin-mobile-vue
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改直播

master
ihzero 2023-11-23 14:26:00 +08:00
parent bcceb7c34e
commit 447675f580
11 changed files with 155 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.env.production
View File

@ -1,4 +1,4 @@
ENV = 'production'
VUE_APP_BASE_API = 'http://36.133.205.221:81'
VUE_APP_BASE_API = 'https://lcny-api.peidikeji.cn'

2
package.json
View File

@ -72,7 +72,9 @@
"core-js": "^3.6.5",
"flv.js": "^1.6.2",
"flyio": "^0.6.2",
"hls.js": "^1.4.12",
"lodash-es": "^4.17.21",
"mui-player": "^1.8.1",
"portal-vue": "^2.1.7",
"node-sass": "^6.0.1",
"sass-loader": "^13.3.2",

11
src/App.vue
View File

@ -664,4 +664,15 @@ uni-page-body {
pointer-events: none;
}
}
.right-part {
.full-switch {
display: none;
}
}
.left-part{
.live-mode{
display: none;
}
}
</style>

94
src/components/live-video/index.vue 100644
View File

@ -0,0 +1,94 @@
<template>
<view class="h-full w-full">
<div ref="muiPlayer" style="width: 100%; height: 100%"></div>
</view>
</template>
<script>
import 'mui-player/dist/mui-player.min.css'
import MuiPlayer from 'mui-player'
import Flv from 'flv.js'
import Hls from 'hls.js'
export default {
props: {
url: {
type: String,
default: null,
},
type: {
type: String,
},
},
mounted() {
this.videoPlayer()
},
methods: {
videoPlayer() {
let parse = {}
if (this.type == 'm3u8') {
parse = {
type: 'hls',
loader: Hls,
config: {
debug: false,
},
}
} else {
parse = {
type: 'flv',
loader: Flv,
config: {
debug: false,
},
}
}
this.mp = new MuiPlayer({
container: this.$refs.muiPlayer,
live: true,
src: this.url,
autoplay: true,
muted: true,
parse: parse,
pageHead:false,
videoAttribute: [
{
attrKey: 'webkit-playsinline',
attrValue: 'webkit-playsinline',
},
{
attrKey: 'playsinline',
attrValue: 'playsinline',
},
{
attrKey: 'x5-video-player-type',
attrValue: 'h5-page',
},
],
custom: {
footerControls: [
{
style: {},
},
],
},
})
this.$nextTick(() => {
this.mp.on('ready', (event) => {
let _video = this.mp.video()
_video.play()
_video.addEventListener('play', (e) => {
//播放事件
this.$emit('onPlayFn')
})
_video.addEventListener('ended', (e) => {
//播放完成事件
this.$emit('onEndedFn')
})
})
})
},
},
}
</script>
<style lang="scss">
</style>

3
src/components/video-flv-h5/video-flv-h5.vue
View File

@ -49,7 +49,8 @@ export default {
player.x5VideoPlayerType='h5-page'
player.x5VideoPlayerFullscreen="false"
player.autoplay= true // 以上均为 video标签的属性配置
player.style = 'width: 100%;height:100%';
// player.poster = 'https://img.yzcdn.cn/vant/cat.jpeg'
player.style = 'width: 100%;height:100%;object-fit:cover;';
let videoElement = this.$refs.myPlayer;
// console.log(videoElement,'videoPlayer=========')

5
src/components/video-m3u8-h5/video-m3u8-h5.vue
View File

@ -32,12 +32,15 @@ export default {
initVideo() {
let video = document.createElement('video')
video.id = this.id
video.style = 'width: 100%; height: 100%;'
video.style = 'width: 100%; height: 100%;object-fit:cover;'
video.controls = true
video.preload = 'auto'
video.setAttribute('x5-playsinline', 'true')
video.setAttribute('x-webkit-airplay', 'allow')
video.setAttribute('playsinline', true) //IOS微信浏览器支持小窗内播放
video.setAttribute('webkit-playsinline', true) //这个bai属性是ios 10中设置可以让视频在小du窗内播放，也就是不是全zhi屏播放的video标签的一个属性
video.setAttribute('x5-video-player-type', 'h5') //安卓 声明启用同层H5播放器 可以在video上面加东西
// video.setAttribute('poster', 'https://img.yzcdn.cn/vant/cat.jpeg')
let source = document.createElement('source')
source.src = this.url
video.appendChild(source)

4
src/pages/basics/components/basics-edit.vue
View File

@ -10,6 +10,9 @@
<u-form-item label="外部链接">
<u-switch v-model="form.is_blank"></u-switch>
</u-form-item>
<u-form-item label="重点">
<u-switch v-model="form.extends.priority"></u-switch>
</u-form-item>
<u-form-item label="外部链接" v-if="form.is_blank">
<u-input v-model="form.blank_url" placeholder="请输入"></u-input>
</u-form-item>
@ -155,6 +158,7 @@ export default {
description: '',
address_lng: '',
address_lat: '',
extends:{}
},
}
},

14
src/pages/index/monitor.vue
View File

@ -138,8 +138,10 @@
<view class="video_li" v-for="(video, index) in videoList" :key="index">
<view class="video_cd">
<!-- #ifdef H5 -->
<videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u8`"></videoM3u8H5>
<video-flv-h5 v-else :url="video.video_url"></video-flv-h5>
<!-- {{ video.video_url }} -->
<LiveVideo :url="video.video_url" :type="video.video_type"></LiveVideo>
<!-- <videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u8`"></videoM3u8H5>
<video-flv-h5 v-else :url="video.video_url"></video-flv-h5> -->
<!-- #endif -->
</view>
<view class="bottom-box">
@ -166,8 +168,9 @@
>
<view class="video_cd">
<!-- #ifdef H5 -->
<videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u82`" ></videoM3u8H5>
<video-flv-h5 v-else :url="video.video_url"></video-flv-h5>
<LiveVideo :url="video.video_url" :type="video.video_type"></LiveVideo>
<!-- <videoM3u8H5 v-if="video.video_type=='m3u8'" :url="video.video_url" :id="`m_${index}_refsM3u82`" ></videoM3u8H5>
<video-flv-h5 v-else :url="video.video_url"></video-flv-h5> -->
<!-- #endif -->
</view>
<view class="bottom-box">
@ -200,10 +203,11 @@
<script>
import videoFlvH5 from '@/components/video-flv-h5/video-flv-h5.vue'
import videoM3u8H5 from '@/components/video-m3u8-h5/video-m3u8-h5.vue'
import LiveVideo from '@/components/live-video/index.vue'
import Request from '@/api/luch-request/index.js'
const http = new Request()
export default {
components: { videoFlvH5,videoM3u8H5 },
components: { videoFlvH5,videoM3u8H5 ,LiveVideo},
data() {
return {
list: [

8
src/pages/index/soil-monitoring.vue
View File

@ -71,6 +71,7 @@
</view>
</view>
</view>
<template v-if="loadingType!=0">
<!-- 电导率 -->
<view class="chart_section">
<view class="top_box">
@ -82,6 +83,7 @@
</view>
<view class="cart_box">
<qiun-data-charts
v-if="loadingType!=0"
type="area"
:loadingType="loadingType"
:opts="opts"
@ -100,6 +102,7 @@
</view>
<view class="cart_box">
<qiun-data-charts
v-if="loadingType!=0"
:loadingType="loadingType"
type="area"
:opts="opts"
@ -118,6 +121,7 @@
</view>
<view class="cart_box">
<qiun-data-charts
v-if="loadingType!=0"
:loadingType="loadingType"
type="area"
:opts="optsc"
@ -136,6 +140,7 @@
</view>
<view class="cart_box">
<qiun-data-charts
v-if="loadingType!=0"
:loadingType="loadingType"
type="area"
:opts="opts"
@ -154,6 +159,7 @@
</view>
<view class="cart_box">
<qiun-data-charts
v-if="loadingType!=0"
:loadingType="loadingType"
type="area"
:opts="opts"
@ -172,6 +178,7 @@
</view>
<view class="cart_box">
<qiun-data-charts
v-if="loadingType!=0"
:loadingType="loadingType"
type="area"
:opts="opts"
@ -179,6 +186,7 @@
/>
</view>
</view>
</template>
</view>
<!-- 设置预警值 -->
<u-popup v-model="warningShow" border-radius="28" width="94%" height="70%"

2
src/pages/index/water-quality.vue
View File

@ -69,6 +69,7 @@
</view>
</view>
</view>
<template v-if="loadingType!=0">
<!-- 氯 -->
<view class="chart_section">
<view class="top_box">
@ -178,6 +179,7 @@
/>
</view>
</view>
</template>
</view>
<!-- 设置预警值 -->
<u-popup v-model="warningShow" border-radius="28" width="94%" height="70%"

19
yarn.lock
View File

@ -5899,6 +5899,11 @@ highlight.js@^10.7.1:
resolved "https://registry.npmmirror.com/highlight.js/-/highlight.js-10.7.3.tgz"
integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
hls.js@^1.4.12:
version "1.4.12"
resolved "https://registry.yarnpkg.com/hls.js/-/hls.js-1.4.12.tgz#2022daa29d10c662387d80a5297f8330f8ef5ee2"
integrity sha512-1RBpx2VihibzE3WE9kGoVCtrhhDWTzydzElk/kyRbEOLnb1WIE+3ZabM/L8BqKFTCL3pUy4QzhXgD1Q6Igr1JA==
hmac-drbg@^1.0.1:
version "1.0.1"
resolved "https://registry.npmmirror.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz"
@ -8049,6 +8054,11 @@ ms@2.1.3:
resolved "https://registry.npmmirror.com/ms/-/ms-2.1.3.tgz"
integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
mui-player@^1.8.1:
version "1.8.1"
resolved "https://registry.yarnpkg.com/mui-player/-/mui-player-1.8.1.tgz#3c0405eefeee46bfcd9535165bd022bb871bf8dd"
integrity sha512-5o0SnSyVImxT9XUO6jCMmcJ+ZyAEJeFvdeZDHHPNS/LdwhzWX4yQPNgx8nzRbcUJ749xpqEQ6uVddiexLyvvqg==
multicast-dns-service-types@^1.1.0:
version "1.1.0"
resolved "https://registry.npmmirror.com/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz"
@ -8131,7 +8141,7 @@ negotiator@0.6.3:
resolved "https://registry.npmmirror.com/negotiator/-/negotiator-0.6.3.tgz"
integrity sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==
neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1:
neo-async@^2.5.0, neo-async@^2.6.0, neo-async@^2.6.1, neo-async@^2.6.2:
version "2.6.2"
resolved "https://registry.npmmirror.com/neo-async/-/neo-async-2.6.2.tgz"
integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
@ -9922,6 +9932,13 @@ sane@^4.0.3:
minimist "^1.1.1"
walker "~1.0.5"
sass-loader@^13.3.2:
version "13.3.2"
resolved "https://registry.yarnpkg.com/sass-loader/-/sass-loader-13.3.2.tgz#460022de27aec772480f03de17f5ba88fa7e18c6"
integrity sha512-CQbKl57kdEv+KDLquhC+gE3pXt74LEAzm+tzywcA0/aHZuub8wTErbjAoNI57rPUWRYRNC5WUnNl8eGJNbDdwg==
dependencies:
neo-async "^2.6.2"
sass@^1.43.4:
version "1.66.1"
resolved "https://registry.npmmirror.com/sass/-/sass-1.66.1.tgz"