流媒体播放视频

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",