视频播放

TEAMModelOS.SmartTeach/ClientApp/components/resource/TeachTopclass.vue

@@ -55,16 +55,16 @@
     data() {
       return {
         video_list: [
-          { "id": 1, "imgurl": require("../../assets/image/resource/teach03.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=1' },
-          { "id": 2, "imgurl": require("../../assets/image/resource/teach01.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=2' },
-          { "id": 3, "imgurl": require("../../assets/image/resource/teach02.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=3' },
-          { "id": 4, "imgurl": require("../../assets/image/resource/teach04.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=4' },
+          { "id": 1, "imgurl": require("../../assets/image/resource/teach03.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', },
+          { "id": 2, "imgurl": require("../../assets/image/resource/teach01.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析',  },
+          { "id": 3, "imgurl": require("../../assets/image/resource/teach02.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', },
+          { "id": 4, "imgurl": require("../../assets/image/resource/teach04.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', },
         ],
         video_lists: [
-          { "id": 1, "imgurl": require("../../assets/image/resource/teach03.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=1' },
-          { "id": 2, "imgurl": require("../../assets/image/resource/teach01.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=2' },
-          { "id": 3, "imgurl": require("../../assets/image/resource/teach02.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=3' },
-          { "id": 4, "imgurl": require("../../assets/image/resource/teach04.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', "url": '/videodetails?id=4' },
+          { "id": 1, "imgurl": require("../../assets/image/resource/teach03.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析',  },
+          { "id": 2, "imgurl": require("../../assets/image/resource/teach01.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析',  },
+          { "id": 3, "imgurl": require("../../assets/image/resource/teach02.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析', },
+          { "id": 4, "imgurl": require("../../assets/image/resource/teach04.jpg"), "slogan": '选修3-1第二章恒定电流,电流的微观解析',  },
 
         ],
       }
@@ -116,7 +116,7 @@
     margin-top: 35px;
     width: 90%;
     background: #fff;
-    height: 9380px;
+    height:380px;
     border: 1px solid #ededed;
   }
 

TEAMModelOS.SmartTeach/ClientApp/components/resource/TeacherVideos.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="activity_container">
+    <div class="activity_details">
+      <div class="activity_details_box">
+        <div class="title">
+          <Icon type="ios-home-outline" size="22" />
+          <p><router-link to="/TeacherZone/ZonesHome">工作室首页</router-link></p><span>>名师课堂</span><span>>视频详情</span>
+        </div>
+        <div class=video-info>
+          <h1>选修3-1第二章恒定电流，2电流的微观解析.mp4</h1>
+          <div class="video">
+            <video-player class="video-player-box" style="width:600px;height:600px;"
+                          ref="videoPlayer"
+                          :options="playerOptions"
+                          :playsinline="true">
+            </video-player>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+
+  export default {
+    data() {
+      return {
+      }
+    },
+    methods: {
+      showVideo(index) {
+        //alert(index);
+        this.$router.push(
+          {
+            name: 'video',
+            query: {
+              rewardIndex: index
+            }
+          }
+        );
+        this.$refs.videoPlayer.player.src({ type: "application/x-mpegURL", src: "https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/history/history.m3u8" });
+      }
+    }
+
+  }
+</script>
+<style scoped>
+  .activity_details {
+    width: 100%;
+    height: auto;
+    background: #f8f8f8;
+    padding-top: 20px;
+    padding-bottom: 8%;
+  }
+
+  .activity_details_box {
+    width: 1200px;
+    height: auto;
+    margin: 0 auto;
+  }
+
+  .clearfix {
+    display: block;
+  }
+  .video-info{
+    width:1000px;
+    height:600px;
+    border:1px solid red;
+  }
+  .video-info h1 {
+    text-align:center;
+  }
+  .video{
+    width:800px;
+    height:600px;
+  }
+
+
+
+
+</style>

TEAMModelOS.SmartTeach/ClientApp/router/routes.js

@@ -22,6 +22,7 @@ import TeacherZone from '@/view/resource/TeacherZone'
 import ZonesHome from '../components/resource/ZonesHome.vue'
 import TeacherWork from '../components/resource/TeacherWork.vue'
 import TeachDetails from '../components/resource/TeachDetails.vue'
+import TeachVideos from '../components/resource/TeacherVideos.vue'
 import TeachSource from '../components/resource/TeachSource.vue'
 import TeachResearch from '../components/resource/TeachResearch.vue'
 import TeachTopic from '../components/resource/TeachTopic.vue'
@@ -59,7 +60,8 @@ export const routes = [
       { name: 'TeachTopic', path: 'TeachTopic', component: TeachTopic },
       { name: 'TeachActivies', path: 'TeachActivies', component: TeachActivies },
       { name: 'TeachClass', path: 'TeachClass', component: TeachClass },
-      { name: 'TeachTopclass', path: 'TeachTopclass', component: TeachTopclass }
+      { name: 'TeachTopclass', path: 'TeachTopclass', component: TeachTopclass },
+      { name: 'TeachVideos', path: 'TeachVideos', component: TeachVideos }
     ]
 
   },