update

package.json

@@ -32,6 +32,7 @@
     "vue-calendar-component": "^2.8.2",
     "vue-mobile-calendar": "^3.3.0",
     "vue-router": "^3.1.5",
+    "vue-video-player": "^5.0.2",
     "vue-wechat-title": "^2.0.7",
     "vuex": "^3.1.2",
     "weixin-js-sdk": "^1.6.0"

src/assets/css/player.css

@@ -0,0 +1,52 @@
+/*播放按钮设置成宽高一致，圆形，居中*/
+.vjs-custom-skin>.video-js .vjs-big-play-button {
+  background-color: rgba(0, 0, 0, 0.45);
+  font-size: 3.5em;
+  border-radius: 50%;
+  height: 2em !important;
+  line-height: 2em !important;
+  margin-top: -1em !important;
+  margin-left: -1em !important;
+  width: 2em !important;
+  outline: none;
+}
+
+.video-js .vjs-big-play-button .vjs-icon-placeholder:before {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+/*control-bar布局时flex，通过order调整剩余时间的位置到进度条右边*/
+.vjs-custom-skin>.video-js .vjs-control-bar .vjs-remaining-time {
+  order: 3 !important;
+}
+
+/*进度条背景轨道*/
+.video-js .vjs-slider {
+  border-radius: 1em;
+}
+
+/*进度条进度*/
+.vjs-custom-skin>.video-js .vjs-play-progress,
+.vjs-custom-skin>.video-js .vjs-volume-level {
+  border-radius: 1em;
+}
+
+/*鼠标进入播放器后，播放按钮颜色会变*/
+.video-js:hover .vjs-big-play-button,
+.vjs-custom-skin>.video-js .vjs-big-play-button:active,
+.vjs-custom-skin>.video-js .vjs-big-play-button:focus {
+  background-color: rgba(0, 0, 0, 0.4) !important;
+}
+
+/*control bar*/
+.video-js .vjs-control-bar {
+  background-color: rgba(0, 0, 0, 0.2) !important;
+}
+
+/*点击按钮时不显示蓝色边框*/
+.video-js .vjs-control-bar button {
+  outline: none;
+}

src/main.js

@@ -25,7 +25,12 @@ import 'lib-flexible/flexible.js'
 import './filters'
 // 全局注册微信js-sdk
 import WechatPlugin from '@/utils/wechatPlugin'
+import '@/assets/css/player.css'
+import VideoPlayer from 'vue-video-player'
+import 'video.js/dist/video-js.css' // videoJs的样式
+import 'vue-video-player/src/custom-theme.css' // vue-video-player的样式
 Vue.use(WechatPlugin)
+Vue.use(VideoPlayer)
 // 引入本地存储
 import { storage, sessionStorage } from '@/utils/storage'
 import hevueImgPreview from '@/components/hevue-img-preview'

src/plugins/vant.js

@@ -12,7 +12,8 @@ import {
   Toast,
   Dialog,
   PullRefresh,
-  Empty
+  Empty,
+  Overlay
 } from 'vant'
 Vue.use(Button)
   .use(Cell)
@@ -26,3 +27,4 @@ Vue.use(Button)
   .use(Dialog)
   .use(PullRefresh)
   .use(Empty)
+  .use(Overlay)

src/views/course/components/commentBox.vue

@@ -11,7 +11,12 @@
           <!--  -->
           <div class="pzDelete" @click="deletePz(pz.id)" v-if="pz.userid == userinfo.userid">删除</div>
         </div>
-        <div @click="checkImg(getImgList(pz.content))" class="pzContent cont navAndImg" v-html="pz.content" v-if="pz.type == '1'"></div>
+        <div
+          @click="checkImg(getImgList(pz.content))"
+          class="pzContent cont navAndImg"
+          v-html="pz.content"
+          v-if="pz.type == '1'"
+        ></div>
         <div class="pzContent" v-if="pz.type == '2'">
           <audio :src="pz.content" controls="controls" ref="audio">
             Your browser does not support the audio element.
@@ -56,8 +61,8 @@ export default {
       type: String,
       default: ''
     },
-    panelVisible:{
-      type:Boolean
+    panelVisible: {
+      type: Boolean
     },
     courseType: {
       type: Number,
@@ -73,16 +78,16 @@ export default {
   },
   data() {
     return {
-      pzList: [],
+      pzList: []
     }
   },
   computed: {
     ...mapGetters(['userinfo']),
     getImgList() {
-      return function (val) {
-        let srcList = [] // 定义一个数组用来接收后面的img地址
+      return function(val) {
+        const srcList = [] // 定义一个数组用来接收后面的img地址
 
-        val.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function (match, capture) {
+        val.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, function(match, capture) {
           // 查找匹配的元素   match为整个img标签  capture为src中的内容
           srcList.push(capture)
         })
@@ -102,7 +107,7 @@ export default {
     }
   },
   methods: {
-    setPanelVisible(bool){
+    setPanelVisible(bool) {
       this.$emit('update:panelVisible', bool)
     },
     previewImg(url) {
@@ -265,7 +270,7 @@ export default {
     }
   }
 
-  /deep/.navAndImg img{
+  /deep/.navAndImg img {
     width: 100%;
   }
 

src/views/course/components/works.vue

@@ -3,11 +3,27 @@
     <!-- v-if="work.type == " -->
     <div class="w-work">
       <div class="work" v-if="work.type == 0" @click="imageView(work.works)"><img :src="work.works" alt="" /></div>
+      <div class="work" v-else-if="work.type == 3" @click="mediaPreview(work.works)">
+        <img src="@/assets/images/works/isVideo.png" alt="" />
+      </div>
       <div class="work" v-else><img src="@/assets/images/works/noImg.png" alt="" /></div>
     </div>
     <div class="s-name">
       <span>{{ work.sName }}</span>
     </div>
+    <van-overlay :show="show" @click="overlayShow" style="display: flex; align-items: center">
+      <div class="wrapper" @click.stop>
+        <video-player
+          class="video-player vjs-custom-skin"
+          ref="videoPlayer"
+          :playsinline="playsinline"
+          @canplay="onPlayerCanplay($event)"
+          :options="playerO"
+          @play="onPlayerPlay($event)"
+          style="width: 100%; height: 100%"
+        ></video-player>
+      </div>
+    </van-overlay>
   </div>
 </template>
 
@@ -20,13 +36,65 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      playerOptions: {
+        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
+        autoplay: false, // 如果true,浏览器准备好时开始回放。
+        muted: false, // 默认情况下将会消除任何音频。
+        loop: false, // 导致视频一结束就重新开始。
+        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+        language: 'zh-CN',
+        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+        sources: [
+          {
+            type: 'video/mp4', // 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目   || "video/ogg"|| "video/webm"
+            src: '' // url地址require("../../assets/media/aaa.mp4")
+          }
+        ],
+        // poster: require("../../assets/tu31.png"), //你的封面地址
+        // poster: dataRes.imgUrl, //你的封面地址
+        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
+        controlBar: {
+          timeDivider: true, // 当前时间和持续时间的分隔符
+          durationDisplay: true, // 显示持续时间
+          remainingTimeDisplay: false, // 是否显示剩余时间功能
+          fullscreenToggle: true // 全屏按钮
+        }
+      },
+      show: false,
+      playerO: {}
+    }
+  },
+  computed: {
+    playsinline() {
+      const ua = navigator.userAgent.toLocaleLowerCase()
+      // x5内核
+      if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
+        return false
+      } else {
+        // ios端
+        return true
+      }
+    }
   },
   methods: {
     imageView(src) {
       // ImagePreview([src]);
       this.$hevueImgPreview({ url: src, clickMaskCLose: true })
-    }
+    },
+    mediaPreview(file) {
+      console.log(file)
+      this.show = true
+      this.playerOptions.sources[0].src = file
+      this.playerO = JSON.parse(JSON.stringify(this.playerOptions))
+    },
+    overlayShow() {
+      this.show = false
+      this.$refs.videoPlayer.player.pause()
+    },
+    onPlayerCanplay() {},
+    onPlayerPlay() {}
   }
 }
 </script>
@@ -67,5 +135,12 @@ export default {
       @include textoverflow();
     }
   }
+
+  .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+  }
 }
 </style>