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

2、目前mp中視頻組件可以簡單的使用了。

package.json

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

src/views/mp/components/wx-reply/main.vue

@@ -1,634 +1,634 @@
-<!--&lt;!&ndash;-->
-<!--  - Copyright (C) 2018-2019-->
-<!--  - All rights reserved, Designed By www.joolun.com-->
-<!--  芋道源码：-->
-<!--  ① 移除多余的 rep 为前缀的变量，让 message 消息更简单-->
-<!--  ② 代码优化，补充注释，提升阅读性-->
-<!--  ③ 优化消息的临时缓存策略，发送消息时，只清理被发送消息的 tab，不会强制切回到 text 输入-->
-<!--  ④ 支持发送【视频】消息时，支持新建视频-->
-<!--&ndash;&gt;-->
-<!--<template>-->
-<!--  <el-tabs type="border-card" v-model="objData.type" @tab-click="handleClick">-->
-<!--    &lt;!&ndash; 类型 1：文本 &ndash;&gt;-->
-<!--    <el-tab-pane name="text">-->
-<!--      <span slot="label"><i class="el-icon-document"></i> 文本</span>-->
-<!--      <el-input-->
-<!--        type="textarea"-->
-<!--        :rows="5"-->
-<!--        placeholder="请输入内容"-->
-<!--        v-model="objData.content"-->
-<!--        @input="inputContent"-->
-<!--      />-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 2：图片 &ndash;&gt;-->
-<!--    <el-tab-pane name="image">-->
-<!--      <span slot="label"><i class="el-icon-picture"></i> 图片</span>-->
-<!--      <el-row>-->
-<!--        &lt;!&ndash; 情况一：已经选择好素材、或者上传好图片 &ndash;&gt;-->
-<!--        <div class="select-item" v-if="objData.url">-->
-<!--          <img class="material-img" :src="objData.url" />-->
-<!--          <p class="item-name" v-if="objData.name">{{ objData.name }}</p>-->
-<!--          <el-row class="ope-row">-->
-<!--            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--        &lt;!&ndash; 情况二：未做完上述操作 &ndash;&gt;-->
-<!--        <div v-else>-->
-<!--          <el-row style="text-align: center">-->
-<!--            &lt;!&ndash; 选择素材 &ndash;&gt;-->
-<!--            <el-col :span="12" class="col-select">-->
-<!--              <el-button type="success" @click="openMaterial">-->
-<!--                素材库选择<i class="el-icon-circle-check el-icon&#45;&#45;right"></i>-->
-<!--              </el-button>-->
-<!--              <el-dialog-->
-<!--                title="选择图片"-->
-<!--                v-model:visible="dialogImageVisible"-->
-<!--                width="90%"-->
-<!--                append-to-body-->
-<!--              >-->
-<!--                <wx-material-select :obj-data="objData" @selectMaterial="selectMaterial" />-->
-<!--              </el-dialog>-->
-<!--            </el-col>-->
-<!--            &lt;!&ndash; 文件上传 &ndash;&gt;-->
-<!--            <el-col :span="12" class="col-add">-->
-<!--              <el-upload-->
-<!--                :action="actionUrl"-->
-<!--                :headers="headers"-->
-<!--                multiple-->
-<!--                :limit="1"-->
-<!--                :file-list="fileList"-->
-<!--                :data="uploadData"-->
-<!--                :before-upload="beforeImageUpload"-->
-<!--                :on-success="handleUploadSuccess"-->
-<!--              >-->
-<!--                <el-button type="primary">上传图片</el-button>-->
-<!--                <div slot="tip" class="el-upload__tip"-->
-<!--                  >支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div-->
-<!--                >-->
-<!--              </el-upload>-->
-<!--            </el-col>-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--      </el-row>-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 3：语音 &ndash;&gt;-->
-<!--    <el-tab-pane name="voice">-->
-<!--      <span slot="label"><i class="el-icon-phone"></i> 语音</span>-->
-<!--      <el-row>-->
-<!--        <div class="select-item2" v-if="objData.url">-->
-<!--          <p class="item-name">{{ objData.name }}</p>-->
-<!--          <div class="item-infos">-->
-<!--            <wx-voice-player :url="objData.url" />-->
-<!--          </div>-->
-<!--          <el-row class="ope-row">-->
-<!--            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--        <div v-else>-->
-<!--          <el-row style="text-align: center">-->
-<!--            &lt;!&ndash; 选择素材 &ndash;&gt;-->
-<!--            <el-col :span="12" class="col-select">-->
-<!--              <el-button type="success" @click="openMaterial">-->
-<!--                素材库选择<i class="el-icon-circle-check el-icon&#45;&#45;right"></i>-->
-<!--              </el-button>-->
-<!--              <el-dialog-->
-<!--                title="选择语音"-->
-<!--                v-model:visible="dialogVoiceVisible"-->
-<!--                width="90%"-->
-<!--                append-to-body-->
-<!--              >-->
-<!--                <WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />-->
-<!--              </el-dialog>-->
-<!--            </el-col>-->
-<!--            &lt;!&ndash; 文件上传 &ndash;&gt;-->
-<!--            <el-col :span="12" class="col-add">-->
-<!--              <el-upload-->
-<!--                :action="actionUrl"-->
-<!--                :headers="headers"-->
-<!--                multiple-->
-<!--                :limit="1"-->
-<!--                :file-list="fileList"-->
-<!--                :data="uploadData"-->
-<!--                :before-upload="beforeVoiceUpload"-->
-<!--                :on-success="handleUploadSuccess"-->
-<!--              >-->
-<!--                <el-button type="primary">点击上传</el-button>-->
-<!--                <div slot="tip" class="el-upload__tip"-->
-<!--                  >格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s</div-->
-<!--                >-->
-<!--              </el-upload>-->
-<!--            </el-col>-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--      </el-row>-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 4：视频 &ndash;&gt;-->
-<!--    <el-tab-pane name="video">-->
-<!--      <span slot="label"><i class="el-icon-share"></i> 视频</span>-->
-<!--      <el-row>-->
-<!--        <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />-->
-<!--        <div style="margin: 20px 0"></div>-->
-<!--        <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />-->
-<!--        <div style="margin: 20px 0"></div>-->
-<!--        <div style="text-align: center">-->
-<!--          <wx-video-player v-if="objData.url" :url="objData.url" />-->
-<!--        </div>-->
-<!--        <div style="margin: 20px 0"></div>-->
-<!--        <el-row style="text-align: center">-->
-<!--          &lt;!&ndash; 选择素材 &ndash;&gt;-->
-<!--          <el-col :span="12">-->
-<!--            <el-button type="success" @click="openMaterial">-->
-<!--              素材库选择<i class="el-icon-circle-check el-icon&#45;&#45;right"></i>-->
-<!--            </el-button>-->
-<!--            <el-dialog-->
-<!--              title="选择视频"-->
-<!--              v-model:visible="dialogVideoVisible"-->
-<!--              width="90%"-->
-<!--              append-to-body-->
-<!--            >-->
-<!--              <wx-material-select :objData="objData" @selectMaterial="selectMaterial" />-->
-<!--            </el-dialog>-->
-<!--          </el-col>-->
-<!--          &lt;!&ndash; 文件上传 &ndash;&gt;-->
-<!--          <el-col :span="12">-->
-<!--            <el-upload-->
-<!--              :action="actionUrl"-->
-<!--              :headers="headers"-->
-<!--              multiple-->
-<!--              :limit="1"-->
-<!--              :file-list="fileList"-->
-<!--              :data="uploadData"-->
-<!--              :before-upload="beforeVideoUpload"-->
-<!--              :on-success="handleUploadSuccess"-->
-<!--            >-->
-<!--              <el-button type="primary"-->
-<!--                >新建视频<i class="el-icon-upload el-icon&#45;&#45;right"></i-->
-<!--              ></el-button>-->
-<!--            </el-upload>-->
-<!--          </el-col>-->
-<!--        </el-row>-->
-<!--      </el-row>-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 5：图文 &ndash;&gt;-->
-<!--    <el-tab-pane name="news">-->
-<!--      <span slot="label"><i class="el-icon-news"></i> 图文</span>-->
-<!--      <el-row>-->
-<!--        <div class="select-item" v-if="objData.articles">-->
-<!--          <wx-news :articles="objData.articles" />-->
-<!--          <el-row class="ope-row">-->
-<!--            <el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--        &lt;!&ndash; 选择素材 &ndash;&gt;-->
-<!--        <div v-if="!objData.content">-->
-<!--          <el-row style="text-align: center">-->
-<!--            <el-col :span="24">-->
-<!--              <el-button type="success" @click="openMaterial"-->
-<!--                >{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文'-->
-<!--                }}<i class="el-icon-circle-check el-icon&#45;&#45;right"></i-->
-<!--              ></el-button>-->
-<!--            </el-col>-->
-<!--          </el-row>-->
-<!--        </div>-->
-<!--        <el-dialog title="选择图文" v-model:visible="dialogNewsVisible" width="90%" append-to-body>-->
-<!--          <wx-material-select-->
-<!--            :objData="objData"-->
-<!--            @selectMaterial="selectMaterial"-->
-<!--            :newsType="newsType"-->
-<!--          />-->
-<!--        </el-dialog>-->
-<!--      </el-row>-->
-<!--    </el-tab-pane>-->
-<!--    &lt;!&ndash; 类型 6：音乐 &ndash;&gt;-->
-<!--    <el-tab-pane name="music">-->
-<!--      <span slot="label"><i class="el-icon-service"></i> 音乐</span>-->
-<!--      <el-row>-->
-<!--        <el-col :span="6">-->
-<!--          <div class="thumb-div">-->
-<!--            <img style="width: 100px" v-if="objData.thumbMediaUrl" :src="objData.thumbMediaUrl" />-->
-<!--            <i v-else class="el-icon-plus avatar-uploader-icon"></i>-->
-<!--            <div class="thumb-but">-->
-<!--              <el-upload-->
-<!--                :action="actionUrl"-->
-<!--                :headers="headers"-->
-<!--                multiple-->
-<!--                :limit="1"-->
-<!--                :file-list="fileList"-->
-<!--                :data="uploadData"-->
-<!--                :before-upload="beforeThumbImageUpload"-->
-<!--                :on-success="handleUploadSuccess"-->
-<!--              >-->
-<!--                <el-button slot="trigger" size="mini" type="text">本地上传</el-button>-->
-<!--                <el-button size="mini" type="text" @click="openMaterial" style="margin-left: 5px"-->
-<!--                  >素材库选择</el-button-->
-<!--                >-->
-<!--              </el-upload>-->
-<!--            </div>-->
-<!--          </div>-->
-<!--          <el-dialog-->
-<!--            title="选择图片"-->
-<!--            v-model:visible="dialogThumbVisible"-->
-<!--            width="80%"-->
-<!--            append-to-body-->
-<!--          >-->
-<!--            <wx-material-select-->
-<!--              :objData="{ type: 'image', accountId: objData.accountId }"-->
-<!--              @selectMaterial="selectMaterial"-->
-<!--            />-->
-<!--          </el-dialog>-->
-<!--        </el-col>-->
-<!--        <el-col :span="18">-->
-<!--          <el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />-->
-<!--          <div style="margin: 20px 0"></div>-->
-<!--          <el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />-->
-<!--        </el-col>-->
-<!--      </el-row>-->
-<!--      <div style="margin: 20px 0"></div>-->
-<!--      <el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />-->
-<!--