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

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

@@ -9,10 +9,11 @@
         <div>
           <p style=" font-size: 14px; margin-bottom: 20px;"><span class="title-header">标题 : <span class="title-content">创新实验室（学科教室）课例20190508直播</span></span> <span class="title-header">主讲人 : 林燕<span class="title-content"></span></span> <span class="liveStatus">播放成功</span></p>
         </div>
-        <video controls="controls" width="780" 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">
+        </video-player>
         <p class="average-score">作品当前平均分 : <span>未评</span></p>
       </div>
 
@@ -46,9 +47,28 @@
 <script>
   import rewardList from '@/static/rewardList.json'
   import CList from '@/static/commentList.json'
+  import"videojs-contrib-hls.js/src/videojs.hlsjs"
   export default {
     data() {
       return {
+        playerOptions: {
+          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+          autoplay: false, //如果true,浏览器准备好时开始回放。
+          controls: true, //控制条
+          preload: 'auto', //视频预加载
+          muted: false, //默认情况下将会消除任何音频。
+          loop: false, //导致视频一结束就重新开始。
+          language: 'zh-CN',
+          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+          sources: [{
+            type: 'application/x-mpegURL',
+            src: 'https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/demo/2019.m3u8'
+          }],
+          poster: "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址
+          width: document.documentElement.clientWidth,
+          notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        },
         routerData: {},
         rewardDatas: [],
         commmentList:[],

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

@@ -6,27 +6,12 @@
     <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-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">
+                      :playsinline="true">
         </video-player>
+
       </div>
 
       <div class="video-detail-info">
@@ -75,21 +60,27 @@
 </template>
 <script>
   import rewardList from '@/static/rewardList.json'
+  import"videojs-contrib-hls.js/src/videojs.hlsjs"
   export default {
     data() {
       return {
         playerOptions: {
-          // videojs options
-          muted: true,
-          language: 'en',
-          preload: 'auto',
-          playbackRates: [0.7, 1.0, 1.5, 2.0],
+          playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+          autoplay: false, //如果true,浏览器准备好时开始回放。
+          controls: true, //控制条
+          preload: 'auto', //视频预加载
+          muted: false, //默认情况下将会消除任何音频。
+          loop: false, //导致视频一结束就重新开始。
+          language: 'zh-CN',
+          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
           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"
+            type: 'application/x-mpegURL',
+            src: 'https://teammodelstorage.blob.core.chinacloudapi.cn/teammodelcontest/20190517/demo/2019.m3u8'
           }],
-          poster: "/static/images/author.jpg",
+          poster: "http://static.smartisanos.cn/pr/img/video/video_03_cc87ce5bdb.jpg", //你的封面地址
+          width: document.documentElement.clientWidth,
+          notSupportedMessage: '此视频暂无法播放，请稍后再试' //允许覆盖Video.js无法播放媒体源时显示的默认信息。
         },
         routerData: {},
         rewardDatas: [],

TEAMModelOS.SmartClass/package.json

@@ -27,18 +27,20 @@
     "jwt-decode": "^2.2.0",
     "less": "^3.9.0",
     "moment": "^2.23.0",
+    "videojs-contrib-hls": "^5.15.0",
+    "videojs-contrib-hls.js": "^3.2.0",
     "vue": "^2.6.9",
     "vue-calendar-component": "^2.7.4",
     "vue-full-calendar": "^2.7.0",
     "vue-fullcalendar": "^1.0.9",
     "vue-infinite-loading": "^2.4.3",
+    "vue-jlunar-datepicker": "^2.3.0",
+    "vue-lunar-full-calendar": "^1.2.2",
     "vue-router": "^3.0.2",
     "vue-scroll": "^2.1.9",
     "vue-video-player": "^5.0.2",
     "vuex": "^3.1.0",
-    "vuex-router-sync": "^5.0.0",
-    "vue-jlunar-datepicker": "^2.3.0",
-    "vue-lunar-full-calendar": "^1.2.2"
+    "vuex-router-sync": "^5.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.2.2",

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

@@ -1,44 +1,60 @@
 
 <template>
   <div class="home">
-        <div class="title">
-          <!--顶部轮播图-->
-          <div >
-            <Carousel >
-              <CarouselItem v-for="(homeImagesList,index) in homeCarouselImg" :key="index">
-                <div class="demo-carousel">
-                  <img class="carousel-img" :src="homeImagesList.images" >
-                </div>
-              </CarouselItem>
-            </Carousel>
-          </div>
-        </div>
-        <div class="who-is">
-          <ul class="people-list">
-            <li class=" show animated slideInLeft delay-1s">
-              <img src="../../assets/image/resource/who01.png">
-              <span>我是管理者</span>
-            </li>
-            <li class=" show animated slideInLeft ">
-              <img src="../../assets/image/resource/who02.png">
-              <span>我是教师</span>
-            </li>
-            <li class="show animated slideInRight">
-              <img src="../../assets/image/resource/who03.png">
-              <span>我是学生</span>
-            </li>
-            <li class="show animated slideInRight delay-1s">
-              <img src="../../assets/image/resource/who04.png">
-              <span>我是家长</span>
-            </li>
-          </ul>
-        </div>
-        <div class="center-info">
-          <h1>已超过<span>1000</span>所学校开通了我们的服务</h1>
-          <img  src="../../assets/image/resource/center01.png" >
-          <img  src="../../assets/image/resource/bottom.png" >
-        </div>
-     </div>
+    <div class="title">
+      <!--顶部轮播图-->
+      <div>
+        <Carousel>
+          <CarouselItem v-for="(homeImagesList,index) in homeCarouselImg" :key="index">
+            <div class="demo-carousel">
+              <img class="carousel-img" :src="homeImagesList.images">
+            </div>
+          </CarouselItem>
+        </Carousel>
+      </div>
+    </div>
+    <div class="who-is">
+      <ul class="people-list">
+        <li class=" show animated slideInLeft delay-1s">
+          <img src="../../assets/image/resource/who01.png">
+          <span>我是管理者</span>
+        </li>
+        <li class=" show animated slideInLeft ">
+          <img src="../../assets/image/resource/who02.png">
+          <span>我是教师</span>
+        </li>
+        <li class="show animated slideInRight">
+          <img src="../../assets/image/resource/who03.png">
+          <span>我是学生</span>
+        </li>
+        <li class="show animated slideInRight delay-1s">
+          <img src="../../assets/image/resource/who04.png">
+          <span>我是家长</span>
+        </li>
+      </ul>
+    </div>
+    <div class="arrow">
+      <img src="../../assets/image/resource/arrow.png">
+      <h1>开通智慧学校</h1>
+      <div class="box"></div>
+    </div>
+    <img src="../../assets/image/resource/center01.png">
+    <div class="arrow">
+      <img src="../../assets/image/resource/arrow.png">
+      <h1>开通智慧云平台</h1>
+      <div class="box"></div>
+    </div>
+    <img src="../../assets/image/resource/bottom.png">
+    <div class="arrow">
+      <img src="../../assets/image/resource/arrow.png">
+      <h1>联系我们</h1>
+      <div class="box"></div>
+    </div>
+    <div class="center-info">
+      <!--<h1>已超过<span>1000</span>所学校开通了我们的服务</h1>
+    <img  src="../../assets/image/resource/center01.png" >-->
+    </div>
+  </div>
 </template>
 <script>
   export default {
@@ -87,13 +103,13 @@
   }
 
   .who-is {
-    height: 240px;
-    margin-top: -70px;
+    height: 260px;
+    margin-top: -20px;
     position: relative;
-    z-index: 21;
-    width: 64%;
-    /*overflow: hidden;*/
-    margin-left: 19%;
+    z-index: 20;
+    width: 56.5%;
+    overflow: hidden;
+    margin-left: 21.5%;
   }
 
   .people-list {
@@ -105,16 +121,18 @@
   }
 
     .who-is ul li span {
-      padding-top: 20px;
+      padding-top: 10px;
+      display: block;
       font-size: 24px;
-      font-weight:800;
+      /* margin-top: 35px; */
+      font-weight: 800;
       color: #141414;
     }
 
     .who-is ul li {
       float: left;
-      width: 266px;
-      height: 230px;
+      width: 255px;
+      height: 235px;
       text-align: center;
       position: relative;
       box-shadow: 1px 1px 1px 1px #808080;
@@ -129,13 +147,32 @@
     cursor:pointer;
   }
 
-      .who-is ul li img {
-        border: 0;
-        vertical-align: middle;
-        margin-top: 30%;
-      }
-  .center-info{
+  .who-is ul li img {
+    border: 0;
+    /* vertical-align: middle; */
+    margin-top: 10%;
+  }
+  .arrow{
     width:100%;
+    text-align:center;
+  }
+    .arrow h1 {
+      margin-top:15px;
+      font-weight: 800;
+      font-size: 26px;
+      color: #0099FF;
+      margin-bottom:20px;
+    }
+  .box {
+    width: 120px;
+    height: 5px;
+    background-color: #0099FF;
+    margin: auto;
+    margin-bottom:20px;
+    /*text-align:center;*/
+  }
+  .center-info {
+    width: 100%;
   }
   .center-info h1{
     font-size:40px;