智慧教室视频播放

src/components/right.vue

@@ -81,7 +81,8 @@
 
     <!-- 视频播放弹框 -->
     <el-dialog class="videoDialog" v-model="videoDialog" title="互动教师1" width="60%" align="center" top="4%">
-        <videoPlay v-bind="videoData" @play="onPlay" />
+        <videoPlay v-bind="videoData" />
+        <!-- {{ videoData.src }} -->
     </el-dialog>
 </template>
 
@@ -91,7 +92,7 @@ import { ElCarousel, ElCarouselItem } from "element-plus";
 import "vue3-video-play/dist/style.css";
 import { videoPlay } from "vue3-video-play";
 import CircleProgress from './CircleProgress.vue';
-import { getDevice } from '../request/api';
+import { getDevice, getVideoUrl } from '../request/api';
 
 
 export default ({
@@ -104,7 +105,9 @@ export default ({
             height: "100%", //播放器高度
             color: "red", //主题色
             title: "互动教室", //视频名称
-            src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
+            // src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
+            src: "",
+            type: "m3u8",
             muted: false, //静音
             webFullScreen: false,
             // speedRate: ["0.75", "1.0", "1.25", "1.5", "2.0"], //播放倍速
@@ -132,7 +135,11 @@ export default ({
         const lookVideo = function (src) {
             videoDialog.value = true;
             // console.log("点击了播放视频", 12312312, "播放路径", src)
-            videoData.src = src
+            getVideoUrl({ "rtsp": src }).then((res) => {
+                console.log("视频处理", res);
+                videoData.src = res.data.httpFlv
+            })
+            // videoData.src = src
 
         }
         // 播放视频

src/request/api.js

@@ -1,5 +1,5 @@
 
-import { service } from './http'
+import { service, post } from './http'
 
 
 // export const getClass = () => get("http://192.168.4.219:12397/ioc-server/wisdomClass/classroomStatistic")
@@ -15,3 +15,5 @@ export const getDevice = () => service.get("/wisdomClass/deviceStatistic")
 
 
 export const getClassDetail = (deviceCode) => service.get(`/wisdomClass/deviceDetail/${deviceCode}`)
+
+export const getVideoUrl = (data) => service.post(`/ioc-server/camera/getUrl`, data)

src/request/http.js

@@ -71,9 +71,9 @@ export function get(url, params) {
 
 export function post(url, params) {
     return new Promise((resolve, reject) => {
-        service.post(url, {
-            data: params
-        }).then(res => {
+        service.post(url,
+            params
+        ).then(res => {
             resolve(res)
         }).catch(err => {
             reject(err)