视频播放问题

stdiet-ui/public/index.html

@@ -13,10 +13,13 @@
       rel="stylesheet"
       href="//at.alicdn.com/t/font_2343184_w0runuauamq.css"
     />
+    <link rel="stylesheet" href="https://g.alicdn.com/de/prismplayer/2.9.6/skins/default/aliplayer-min.css" />
     <script src="../lib/aliyunVideo/es6-promise.min.js"></script>
     <script src="../lib/aliyunVideo/aliyun-oss-sdk-6.13.0.min.js"></script>
     <script src="../lib/aliyunVideo/aliyun-upload-sdk-1.5.2.min.js"></script>
+    <script src="https://g.alicdn.com/de/prismplayer/2.9.6/aliplayer-min.js"></script>
 
+    
     <title><%= webpackConfig.name %></title>
     <style>
       html,

stdiet-ui/src/api/custom/nutritionalVideo.js

@@ -96,5 +96,14 @@ export function getVideoSnapshot(id) {
   })
 }
 
+// 查询营养视频播放凭证
+export function getVideoPlayAuth(id) {
+  return request({
+    url: '/custom/nutritionalVideo/getVideoPlayAuth/' + id,
+    method: 'get'
+  })
+}
+
+
 
 

stdiet-ui/src/components/OrderAdd/index.vue

@@ -275,14 +275,14 @@
             </el-date-picker>
           </el-form-item>
         </el-col>
-        <el-col :span="8">
+        <!--<el-col :span="8">
           <el-form-item label="食谱是否连续" prop="recipesPlanContinue">
             <el-select v-model="form.recipesPlanContinue" placeholder="请选择食谱连续状态">
               <el-option label="是" :value="parseInt('1')"></el-option>
               <el-option label="否" :value="parseInt('0')"></el-option>
             </el-select>
           </el-form-item>
-        </el-col>
+        </el-col>-->
         <el-col :span="10">
           <el-form-item label="服务开始时间" prop="startTime" label-width="180">
             <el-date-picker

stdiet-ui/src/components/VideoPlay/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="visible"
+    width="680px"
+    append-to-body
+    :close-on-click-modal="false"
+  >
+
+  <VideoTemplate v-if="visible" :videoId="video.videoId" :playAuth="video.playAuth" ></VideoTemplate>
+    
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="cancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+
+import VideoTemplate from "@/components/VideoPlay/video";
+export default {
+  name: "VideoPlay",
+  props: {
+    
+  },
+  data() {
+    return {
+      title: "",
+      visible:false,
+      player: null,
+      video: null
+    }
+  },
+  created() {
+  
+  },
+  computed: {
+    
+  },
+  components:{
+      VideoTemplate
+  },
+  methods: {
+    showDialog(video) {
+      this.player = null;
+      this.video = video;
+      this.title = this.video.title;
+      this.visible = true;
+      /*let self = this;
+      let t = setTimeout(function(){
+          self.createPlayer();
+      },500);*/
+    },
+    // 取消按钮
+    cancel() {
+      this.visible = false;
+      // this.reset();
+    },
+  },
+  watch: {
+
+  }
+};
+</script>

stdiet-ui/src/components/VideoPlay/video/index.vue

@@ -0,0 +1,78 @@
+<template>
+<div>
+  <div class="prism-player" id="J_prismPlayer" :style="'height:'+height+'px;width:'+width+'px'"></div>
+</div>
+  
+</template>
+<script>
+
+export default {
+  name: "video",
+  props: {
+    videoId: {
+        type: String,
+        default: ''
+    },
+    playAuth: {
+        type: String,
+        default: ''
+    },
+    width:{
+        type: Number,
+        default: 630
+    },
+    height:{
+        type: Number,
+        default: 350
+    }
+  },
+  data() {
+    return{
+        player: null
+    }
+  },
+  created() {
+      
+     
+  },
+  mounted(){
+      this.$nextTick(function(){
+         this.createPlayer();
+      });
+  },
+  computed: {
+     
+  },
+  methods: {
+    createPlayer(){
+        this.player = new Aliplayer({
+            /*id: 'J_prismPlayer',
+            width: '100%',
+            autoplay: false,
+            //支持播放地址播放,此播放优先级最高
+            source : this.video.playUrl*/
+            "id": "J_prismPlayer",
+            "vid": this.videoId,
+            "playauth": this.playAuth,
+            "qualitySort": "asc",
+            "format": "mp4",
+            "mediaType": "video",
+            "width": "100%",
+            "height": "500px",
+            "autoplay": false,
+            "isLive": false,
+            "rePlay": false,
+            "playsinline": true,
+            "preload": true,
+            "controlBarVisibility": "hover",
+            "useH5Prism": true
+        },function(){
+            
+        })
+    }
+  },
+  watch: {
+
+  }
+};
+</script>

stdiet-ui/src/views/custom/nutritionalVideo/index.vue

@@ -208,7 +208,7 @@
             size="mini"
             type="text"
             icon="el-icon-edit"
-            @click="getVideoPlayUrl(scope.row.id)"
+            @click="showVideoPlay(scope.row)"
             v-hasPermi="['custom:nutritionalVideo:query']"
             >播放</el-button
           >
@@ -360,6 +360,9 @@
 
     <!-- 手动选择封面 -->
     <VideoSelectCover ref="videoSelectCoverRef"></VideoSelectCover>
+
+    <!-- 视频播放 -->
+    <VideoPlay ref="videoPlayRef"></VideoPlay>
   </div>
 </template>
 
@@ -373,6 +376,7 @@ import {
   exportNutritionalVideo,
   updateWxShow,
   getVideoPlayUrlById,
+  getVideoPlayAuth
 } from "@/api/custom/nutritionalVideo";
 import { getAllClassify } from "@/api/custom/videoClassify";
 import UploadVideo from "@/components/UploadVideo";
@@ -383,6 +387,7 @@ import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
 import IconSelect from "@/components/IconSelect";
 import VideoSelectCover from "@/components/VideoSelectCover";
+import VideoPlay from "@/components/VideoPlay";
 export default {
   name: "NutritionalVideo",
   data() {
@@ -452,6 +457,7 @@ export default {
     Treeselect,
     IconSelect,
     VideoSelectCover,
+    VideoPlay
   },
   methods: {
     /** 查询营养视频列表 */
@@ -649,6 +655,16 @@ export default {
         })
         .catch(function () {});
     },
+    showVideoPlay(row){
+      getVideoPlayAuth(row.id).then((response) => {
+        row.playAuth = response.data.playAuth;;
+        if (row.playAuth != undefined && row.playAuth != null) {
+           this.$refs.videoPlayRef.showDialog(row);
+        }else{
+          this.msgError("视频资源不存在");
+        }
+      });
+    }
   },
 };
 </script>