1、微信组件更新vue3.視頻組件更新使用video.js 6.0.0版本。

2、目前mp中視頻組件可以簡單的使用了。
This commit is contained in:
wuxiran 2023-03-27 03:18:25 +08:00
parent 72ddb0c0d8
commit ed5990f229
7 changed files with 719 additions and 722 deletions

View File

@ -29,6 +29,7 @@
"@form-create/designer": "^3.1.0", "@form-create/designer": "^3.1.0",
"@form-create/element-ui": "^3.1.17", "@form-create/element-ui": "^3.1.17",
"@iconify/iconify": "^3.1.0", "@iconify/iconify": "^3.1.0",
"@videojs-player/vue": "^1.0.0",
"@vueuse/core": "^9.13.0", "@vueuse/core": "^9.13.0",
"@wangeditor/editor": "^5.1.23", "@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.10", "@wangeditor/editor-for-vue": "^5.1.10",
@ -58,6 +59,7 @@
"qs": "^6.11.1", "qs": "^6.11.1",
"steady-xml": "^0.1.0", "steady-xml": "^0.1.0",
"url": "^0.11.0", "url": "^0.11.0",
"video.js": "^8.0.4",
"vue": "3.2.47", "vue": "3.2.47",
"vue-i18n": "9.2.2", "vue-i18n": "9.2.2",
"vue-router": "^4.1.6", "vue-router": "^4.1.6",

File diff suppressed because it is too large Load Diff

View File

@ -8,110 +8,84 @@
存在的问题mediaId 有效期是 3 超过时间后无法播放 存在的问题mediaId 有效期是 3 超过时间后无法播放
2重构后的做法后端接收到微信公众号的视频消息后将视频消息的 media_id 的文件内容保存到文件服务器中这样前端可以直接使用 URL 播放 2重构后的做法后端接收到微信公众号的视频消息后将视频消息的 media_id 的文件内容保存到文件服务器中这样前端可以直接使用 URL 播放
体验优化弹窗关闭后自动暂停视频的播放 体验优化弹窗关闭后自动暂停视频的播放
--> -->
<template> <template>
<div> <div @click="playVideo()">
<!-- 提示 --> <!-- 提示 -->
<div @click="playVideo()"> <div>
<el-icon> <Icon icon="ep:video-play" class="mr-5px" />
<VideoPlay />
</el-icon>
<p>点击播放视频</p> <p>点击播放视频</p>
</div> </div>
<!-- 弹窗播放 --> <!-- 弹窗播放 -->
<el-dialog <el-dialog
v-model="dialogVideo"
title="视频播放" title="视频播放"
v-model:visible="dialogVideo"
width="40%" width="40%"
append-to-body append-to-body
@close="closeDialog" @close="closeDialog"
> >
<video-player <template #footer>
v-if="playerOptions.sources[0].src" <video-player
class="video-player vjs-custom-skin" v-if="dialogVideo"
ref="videoPlayerRef" class="video-player vjs-big-play-centered"
:playsinline="true" :src="url"
:options="playerOptions" poster=""
@play="onPlayerPlay($event)" crossorigin="anonymous"
@pause="onPlayerPause($event)" playsinline
/> controls
:volume="0.6"
:height="320"
:playback-rates="[0.7, 1.0, 1.5, 2.0]"
/>
</template>
<!-- 事件暫時沒用
@mounted="handleMounted"-->
<!-- @ready="handleEvent($event)"-->
<!-- @play="handleEvent($event)"-->
<!-- @pause="handleEvent($event)"-->
<!-- @ended="handleEvent($event)"-->
<!-- @loadeddata="handleEvent($event)"-->
<!-- @waiting="handleEvent($event)"-->
<!-- @playing="handleEvent($event)"-->
<!-- @canplay="handleEvent($event)"-->
<!-- @canplaythrough="handleEvent($event)"-->
<!-- @timeupdate="handleEvent(player?.currentTime())"-->
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script setup lang="ts" name="WxVideoPlayer"> <script lang="ts" name="WxVideoPlayer">
// videoPlayer https://juejin.cn/post/6923056942281654285 //videojs6.0,6.0
import { videoPlayer } from 'vue-video-player' import 'video.js/dist/video-js.css'
import { defineComponent } from 'vue'
import { VideoPlayer } from '@videojs-player/vue'
import 'video.js/dist/video-js.css' import 'video.js/dist/video-js.css'
import 'vue-video-player/src/custom-theme.css'
import { VideoPlay } from '@element-plus/icons-vue'
const props = defineProps({ export default defineComponent({
url: { components: {
// https://www.iocoder.cn/xxx.mp4 VideoPlayer
type: String, },
required: true props: {
} url: {
}) // https://vjs.zencdn.net/v/oceans.mp4
const videoPlayerRef = ref() type: String,
const dialogVideo = ref(false) required: true
const playerOptions = reactive({
playbackRates: [0.5, 1.0, 1.5, 2.0], //
autoplay: false, // true,
muted: false, //
loop: false, //
preload: 'auto', // <video> auto ,
language: 'zh-CN',
aspectRatio: '16:9', // 使 - "16:9""4:3"
fluid: true, // trueVideo.js player
sources: [
{
type: 'video/mp4',
src: '' //
} }
], },
poster: '', // setup() {
width: document.documentElement.clientWidth, // const videoPlayerRef = ref(null)
notSupportedMessage: '此视频暂无法播放,请稍后再试', // Video.js const dialogVideo = ref(false)
controlBar: {
timeDivider: true, const handleEvent = (log) => {
durationDisplay: true, console.log('Basic player event', log)
remainingTimeDisplay: false, }
fullscreenToggle: true // const playVideo = () => {
dialogVideo.value = true
}
return { handleEvent, playVideo, dialogVideo }
} }
}) })
const playVideo = () => {
dialogVideo.value = true
playerOptions.sources[0].src = props.url
}
const closeDialog = () => {
//
// videoPlayerRef.player.pause()
}
// onPlayerPlay(player) {},
// // // eslint-disable-next-line @typescript-eslint/no-unused-vars
// // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
// onPlayerPause(player) {}
// methods: {
// playVideo() {
// this.dialogVideo = true
// //
// this.playerOptions.sources[0]['src'] = this.url
// },
// closeDialog() {
// //
// this.$refs.videoPlayer.player.pause()
// },
//
// //todo player
//
// // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
// onPlayerPlay(player) {},
// // // eslint-disable-next-line @typescript-eslint/no-unused-vars
// // eslint-disable-next-line @typescript-eslint/no-unused-vars,no-unused-vars
// onPlayerPause(player) {}
// }
</script> </script>

View File

@ -25,6 +25,7 @@
<script setup lang="ts" name="WxVoicePlayer"> <script setup lang="ts" name="WxVoicePlayer">
// amr amr https://www.npmjs.com/package/benz-amr-recorder // amr amr https://www.npmjs.com/package/benz-amr-recorder
import BenzAMRRecorder from 'benz-amr-recorder' import BenzAMRRecorder from 'benz-amr-recorder'
const props = defineProps({ const props = defineProps({

View File

@ -19,8 +19,14 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button @click="handleQuery">
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</content-wrap> </content-wrap>
@ -63,12 +69,19 @@
import { getFreePublishPage, deleteFreePublish } from '@/api/mp/freePublish' import { getFreePublishPage, deleteFreePublish } from '@/api/mp/freePublish'
import * as MpAccountApi from '@/api/mp/account' import * as MpAccountApi from '@/api/mp/account'
import WxNews from '@/views/mp/components/wx-news/main.vue' import WxNews from '@/views/mp/components/wx-news/main.vue'
const message = useMessage() // const message = useMessage() //
const loading = ref(true) // const loading = ref(true) //
const total = ref(0) // const total = ref(0) //
const list = ref([]) // const list = ref([]) //
const queryParams = reactive({ interface QueryParams {
currentPage: number | undefined | string
pageNo: number | undefined | string
accountId: number | undefined | string
}
const queryParams: QueryParams = reactive({
currentPage: 1, // currentPage: 1, //
pageNo: 1, // pageNo: 1, //
accountId: undefined // accountId: undefined //
@ -115,7 +128,6 @@ const resetQuery = () => {
queryFormRef.value.resetFields() queryFormRef.value.resetFields()
// //
if (accountList.value.length > 0) { if (accountList.value.length > 0) {
// @ts-ignore
queryParams.accountId = accountList.value[0].id queryParams.accountId = accountList.value[0].id
} }
handleQuery() handleQuery()
@ -144,7 +156,6 @@ onMounted(async () => {
accountList.value = await MpAccountApi.getSimpleAccountList() accountList.value = await MpAccountApi.getSimpleAccountList()
// //
if (accountList.value.length > 0) { if (accountList.value.length > 0) {
// @ts-ignore
queryParams.accountId = accountList.value[0].id queryParams.accountId = accountList.value[0].id
} }
await getList() await getList()

View File

@ -181,17 +181,17 @@
</ContentWrap> </ContentWrap>
</template> </template>
<script setup lang="ts" name="MpMessage"> <script setup lang="ts" name="MpMessage">
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict' import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
import { dateFormatter } from '@/utils/formatTime'
// import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue' import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
// import WxMsg from '@/views/mp/components/wx-msg/main.vue' import WxMsg from '@/views/mp/components/wx-msg/main.vue'
import WxLocation from '@/views/mp/components/wx-location/main.vue' import WxLocation from '@/views/mp/components/wx-location/main.vue'
// import WxMusic from '@/views/mp/components/wx-music/main.vue' import WxMusic from '@/views/mp/components/wx-music/main.vue'
// import WxNews from '@/views/mp/components/wx-news/main.vue' import WxNews from '@/views/mp/components/wx-news/main.vue'
import * as MpAccountApi from '@/api/mp/account' import * as MpAccountApi from '@/api/mp/account'
import * as MpMessageApi from '@/api/mp/message' import * as MpMessageApi from '@/api/mp/message'
const message = useMessage() // const message = useMessage() //
import { DICT_TYPE, getStrDictOptions } from '@/utils/dict'
import { dateFormatter } from '@/utils/formatTime'
const loading = ref(true) // const loading = ref(true) //
const total = ref(0) // const total = ref(0) //

View File

@ -28,13 +28,21 @@
/> />
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button> <el-button @click="handleQuery">
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button> <Icon icon="ep:search" class="mr-5px" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon icon="ep:refresh" class="mr-5px" />
重置
</el-button>
<el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mp:tag:create']"> <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['mp:tag:create']">
<Icon icon="ep:plus" class="mr-5px" /> 新增 <Icon icon="ep:plus" class="mr-5px" />
新增
</el-button> </el-button>
<el-button type="success" plain @click="handleSync" v-hasPermi="['mp:tag:sync']"> <el-button type="success" plain @click="handleSync" v-hasPermi="['mp:tag:sync']">
<Icon icon="ep:refresh" class="mr-5px" /> 同步 <Icon icon="ep:refresh" class="mr-5px" />
同步
</el-button> </el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -91,6 +99,7 @@ import { dateFormatter } from '@/utils/formatTime'
import * as MpTagApi from '@/api/mp/tag' import * as MpTagApi from '@/api/mp/tag'
import * as MpAccountApi from '@/api/mp/account' import * as MpAccountApi from '@/api/mp/account'
import TagForm from './TagForm.vue' import TagForm from './TagForm.vue'
const message = useMessage() // const message = useMessage() //
const { t } = useI18n() // const { t } = useI18n() //