Merge branch 'master' of http://106.12.23.251:10080/CDHABOOK/TEAMModelOS

TEAMModelOS.SmartClass/ClientApp/view/smart-class/Video.vue

@@ -6,11 +6,27 @@
     <div class="video-info">
 
       <div class="video-src">
-        <video controls="controls" width="800" style="display:block;"
-               src="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190516/acalssOne%E7%BD%91%E9%A1%B5%E7%99%BB%E5%BD%95%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95.mp4">
-          您的浏览器不支持 video 标签。
-        </video>
-
+        <!--<video controls="controls" width="800" style="display:block;"
+         src="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190516/acalssOne%E7%BD%91%E9%A1%B5%E7%99%BB%E5%BD%95%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95.mp4">
+    您的浏览器不支持 video 标签。
+  </video>-->
+        <video-player class="video-player-box" style="width:800px;"
+                      ref="videoPlayer"
+                      :options="playerOptions"
+                      :playsinline="true"
+                      customEventName="customstatechangedeventname"
+                      @play="onPlayerPlay($event)"
+                      @pause="onPlayerPause($event)"
+                      @ended="onPlayerEnded($event)"
+                      @waiting="onPlayerWaiting($event)"
+                      @playing="onPlayerPlaying($event)"
+                      @loadeddata="onPlayerLoadeddata($event)"
+                      @timeupdate="onPlayerTimeupdate($event)"
+                      @canplay="onPlayerCanplay($event)"
+                      @canplaythrough="onPlayerCanplaythrough($event)"
+                      @statechanged="playerStateChanged($event)"
+                      @ready="playerReadied">
+        </video-player>
       </div>
 
       <div class="video-detail-info">
@@ -31,15 +47,15 @@
             <span>{{routerData.categoryName}}</span>
           </FormItem>
           <FormItem label="教学设计：">
-            <!--<span>{{routerData.activityAwardName}}</span>-->
+            <span>暂无数据</span>
           </FormItem>
           <FormItem label="教学反思：">
-            <!--<span>{{routerData.activityAwardName}}</span>-->
+            <span>暂无数据</span>
           </FormItem>
         </Form>
         <div class="download-video">
 
-          <a download="video" style="color:#999999;font-size:14px;" href="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190516/acalssOne%E7%BD%91%E9%A1%B5%E7%99%BB%E5%BD%95%E5%AD%A6%E4%B9%A0%E6%96%B9%E6%B3%95.mp4">
+          <a download="video" style="color:#999999;font-size:14px;" href="https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/%E5%B0%8F%E5%AD%A6%E8%8B%B1%E8%AF%AD301%E8%83%A1%E9%A2%96--2019.mp4">
             <Icon type="md-cloud-download" size="22" color="white" />
             下载视频
           </a>
@@ -62,6 +78,19 @@
   export default {
     data() {
       return {
+        playerOptions: {
+          // videojs options
+          muted: true,
+          language: 'en',
+          preload: 'auto',
+          playbackRates: [0.7, 1.0, 1.5, 2.0],
+          sources: [{
+            type: "video/mp4",
+            src: "https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/%E5%B0%8F%E5%AD%A6%E8%8B%B1%E8%AF%AD301%E8%83%A1%E9%A2%96--2019.mp4"
+            //src: "https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/%E5%B0%8F%E5%AD%A6%E8%8B%B1%E8%AF%AD301%E8%83%A1%E9%A2%96--20180419.MP4"
+          }],
+          poster: "/static/images/author.jpg",
+        },
         routerData: {},
         rewardDatas: [],
         videos: [
@@ -178,6 +207,10 @@
     width:800px;
     background:#000000;
   }
+    .video-src .video-js {
+      width:800px;
+      height:450px;
+    }
   .download-video {
     text-align:center;
     position:absolute;