新增创业公司登记查看视频功能

package.json

@@ -23,8 +23,10 @@
     "less-loader": "^11.1.0",
     "nprogress": "^0.2.0",
     "pizzip": "^3.1.4",
+    "video.js": "^8.5.2",
     "vue": "^2.6.14",
     "vue-router": "^3.5.1",
+    "vue-video-player": "^5.0.2",
     "vue2-editor": "^2.10.3",
     "vuex": "^3.6.2",
     "vuex-persistedstate": "^4.1.0"

src/main.js

@@ -6,10 +6,13 @@ import store from './config/config.js' //vuex
 import './plugins/element.js' //elementUI
 import './assets/sc/iconfont.css'
 import '@/permission' // permission control
+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的样式
 import ajax from './api/userApi' //封装axios
 Vue.prototype.ajax = ajax
     // Vue.prototype.$bus = {};
-
+Vue.use(VideoPlayer)
 Vue.config.productionTip = false
 Vue.prototype.$loading = Loading
 Vue.prototype.openLoading = function(target) {

src/views/firm.vue

@@ -2,7 +2,7 @@
   <!-- 创业公司登记 -->
   <div class="firm" v-loading="loading">
     <!-- <div class="pAHeader"> -->
-      <!-- <div class="pAHeader1">创业公司登记</div> -->
+    <!-- <div class="pAHeader1">创业公司登记</div> -->
     <!-- </div> -->
     <div class="pAHeader">
       <div class="pAHeader1">创业公司登记</div>
@@ -18,12 +18,25 @@
             @change="getData"
             placeholder="请输入"
           ></el-input>
-          <el-button type="primary" class="btn2" @click="getData">查询</el-button>
+          <el-button type="primary" class="btn2" @click="getData"
+            >查询</el-button
+          >
         </div>
       </div>
       <div class="upFile">
-        <el-progress v-if="progress.show" style="width: 300px;margin-top: 10px;" :percentage="progress.value" :format="ProgressFormat"></el-progress>
-        <beUpload @getFile="getFile" v-show="!progress.show" :navName="'上传文件'" :accept="accept" :progress="progress"></beUpload>
+        <el-progress
+          v-if="progress.show"
+          style="width: 300px; margin-top: 10px"
+          :percentage="progress.value"
+          :format="ProgressFormat"
+        ></el-progress>
+        <beUpload
+          @getFile="getFile"
+          v-show="!progress.show"
+          :navName="'上传文件'"
+          :accept="accept"
+          :progress="progress"
+        ></beUpload>
       </div>
     </div>
 
@@ -79,27 +92,25 @@
                 class="bt1"
                 size="mini"
                 @click="del(scope.row.startupId)"
-                style="width: 85px;"
+                style="width: 85px"
                 >删除</el-button
               >
             </div>
           </template>
         </el-table-column>
       </el-table>
-
-
     </div>
 
-          <!-- 分页 -->
-        <el-pagination
-          background
-          @current-change="changePage"
-          layout="prev, pager, next"
-          :page-size="Page.lim"
-          :total="Page.total"
-          class="paginations"
-        >
-        </el-pagination>
+    <!-- 分页 -->
+    <el-pagination
+      background
+      @current-change="changePage"
+      layout="prev, pager, next"
+      :page-size="Page.lim"
+      :total="Page.total"
+      class="paginations"
+    >
+    </el-pagination>
 
     <!-- 删除通知开始 -->
     <el-dialog
@@ -108,11 +119,14 @@
       width="600px"
       class="addDialog"
     >
-      
       <span class="deleteContent">确定删除文件?</span>
       <span slot="footer" class="dialog-footer">
-        <el-button type="primary" @click="commitDel" class="AllDialogBtn">确认删除</el-button>
-        <el-button @click="dialogVisible1 = false" class="AllDialogBtn">取消</el-button>
+        <el-button type="primary" @click="commitDel" class="AllDialogBtn"
+          >确认删除</el-button
+        >
+        <el-button @click="dialogVisible1 = false" class="AllDialogBtn"
+          >取消</el-button
+        >
       </span>
     </el-dialog>
     <!-- 删除通知结束-->
@@ -125,29 +139,51 @@
       width="70vw"
       :fullscreen="fullShow"
       class="addDialog showDialog"
-    > 
-    <template slot="title">
-      <div class="DialogBox">
-        <div class="DialogTitle">展示文件</div>
-        <span class="changeFull el-icon-zoom-in" @click="fullShow = !fullShow"></span>
-      </div>
-    </template>
-    <!-- <el-button type="primary" style="margin-bottom: 20px;" @click="fullShow=!fullShow">全屏查看</el-button> -->
+    >
+      <template slot="title">
+        <div class="DialogBox">
+          <div class="DialogTitle">展示文件</div>
+          <span
+            v-if="Wordss['name'] != '视频'"
+            class="changeFull el-icon-zoom-in"
+            @click="fullShow = !fullShow"
+          ></span>
+        </div>
+      </template>
+      <!-- <el-button type="primary" style="margin-bottom: 20px;" @click="fullShow=!fullShow">全屏查看</el-button> -->
       <div class="showFileArea">
-        
+        <video-player
+          class="video-player vjs-custom-skin"
+          :playsinline="true"
+          :options="videoDetail"
+          @play="onPlayerPlay($event)"
+          style="width: 100%; height: 100%"
+          v-if="Wordss['name'] == '视频'"
+        ></video-player>
         <vword
-            style="width: 100%; height: 100%; overflow: auto"
-            class="fullStyle"
-            v-if="Wordss['type']!='pdf' && Wordss['name']!='图片'"
-            :pdfUrl="'https://view.officeapps.live.com/op/view.aspx?src='+showFileUrl"
+          style="width: 100%; height: 100%; overflow: auto"
+          class="fullStyle"
+          v-if="
+            Wordss['type'] != 'pdf' &&
+            Wordss['name'] != '图片' &&
+            Wordss['name'] != '视频'
+          "
+          :pdfUrl="
+            'https://view.officeapps.live.com/op/view.aspx?src=' + showFileUrl
+          "
         ></vword>
         <vpdf
-            style="width: 100%; height: 100%; overflow: auto"
-            class="fullStyle"
-            :pdfUrl="showFileUrl"
-            v-if="Wordss['type']=='pdf'"
+          style="width: 100%; height: 100%; overflow: auto"
+          class="fullStyle"
+          :pdfUrl="showFileUrl"
+          v-if="Wordss['type'] == 'pdf'"
         ></vpdf>
-        <img :src="showFileUrl" alt="图片哦" v-if="Wordss['name']=='图片'" style="width: auto;height: auto;max-width: 100%;max-height: 100%;">
+        <img
+          :src="showFileUrl"
+          alt="图片哦"
+          v-if="Wordss['name'] == '图片'"
+          style="width: auto; height: auto; max-width: 100%; max-height: 100%"
+        />
       </div>
     </el-dialog>
     <!-- 展示文档结束 -->
@@ -164,54 +200,96 @@ export default {
   components: { beUpload, vpdf, vword },
   data() {
     return {
-      fullShow:false,
+      fullShow: false,
       accept: "*",
       // showFileType: 0,
       dialogVisible1: false,
-      loading:false,
-      delId:"",
-      input:"",
+      loading: false,
+      delId: "",
+      input: "",
       tableData: [],
       Page: {
         nowPage: 1,
         total: 0,
         lim: 8,
       },
-      progress:{
-        value:50,
-        show:false
+      progress: {
+        value: 50,
+        show: false,
       },
       // ProjectEndLookFile:{url:"",type:""},
       showFile: false,
       showFileUrl: "",
-      Wordss:{type:"",name:""},
-      canonical:{
-          Image:/^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
-          File:/^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i
+      Wordss: { type: "", name: "" },
+      canonical: {
+        Image:
+          /^https?:\/\/(.+\/)+.+(\.(gif|png|jpg|jpeg|webp|svg|psd|bmp|tif))$/i,
+        File: /^https?:\/\/(.+\/)+.+(\.(docx|xlsx|ppt|pdf))$/i,
+        video:
+          /^https?:\/\/(.+\/)+.+(\.(avi|wmv|mpg|mpeg|mov|rm|ram|mp4|swf|flv))$/i,
+      },
+      videoDetail: {},
+      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, //全屏按钮
+        },
       },
+      playerO: {},
     };
   },
   methods: {
     //展示文件
     checkFileType(url) {
-    console.log(url );
-    this.showFileUrl = url;
+      console.log(url);
+      this.showFileUrl = url;
       this.showFile = true;
 
-      if(typeof url=='undefined')return {type:"",name:""};
-          let urlSplit = url.split(".");
-          const type = urlSplit[urlSplit.length-1]
-          if(this.canonical.Image.test(url)){
-           
-             this.Wordss={type:type,name:"图片"}
-             return console.log(this.Wordss);
-          }
-          if(this.canonical.File.test(url)){
-             this.Wordss={type:type,name:"文档"}
-             return console.log(this.Wordss);
-          }
-          else return this.Wordss={type:type,name:type}
+      if (typeof url == "undefined") return { type: "", name: "" };
+      let urlSplit = url.split(".");
+      const type = urlSplit[urlSplit.length - 1];
+      if (this.canonical.Image.test(url)) {
+        this.Wordss = { type: type, name: "图片" };
+        return console.log(this.Wordss);
+      }
+      if (this.canonical.File.test(url)) {
+        this.Wordss = { type: type, name: "文档" };
+        return console.log(this.Wordss);
+      }
+      if (this.canonical.video.test(url)) {
+        this.Wordss = { type: type, name: "视频" };
+        this.videoDetail = {};
+        this.playerOptions.sources[0].src = url;
+        this.videoDetail = this.playerOptions;
+        return console.log(this.Wordss);
+      } else return (this.Wordss = { type: type, name: type });
+    },
+    switchVideo(media) {
+      this.playerO = {};
+      this.playerOptions.poster = "";
+      this.playerOptions.sources[0].src = media;
+      this.playerO = this.playerOptions;
     },
+    onPlayerPlay() {},
     del(Id) {
       this.delId = Id;
       this.dialogVisible1 = true;
@@ -248,7 +326,7 @@ export default {
           uid: this.$store.state.userInfo.userid,
           file: JSON.stringify(val),
         })
-        .then((res) => {  
+        .then((res) => {
           if (res.data == 1) {
             this.$message.success("上传成功");
           } else {
@@ -280,18 +358,18 @@ export default {
           console.log(err);
         });
     },
-    ProgressFormat(value){
-      return value ==100?'100%':`${value}%`
-    }
+    ProgressFormat(value) {
+      return value == 100 ? "100%" : `${value}%`;
+    },
   },
-  watch:{
-    input:{
-      handler(){
-        immediate:true
-        deep:true
-        this.getData()
-      }
-    }                                                                       
+  watch: {
+    input: {
+      handler() {
+        immediate: true;
+        deep: true;
+        this.getData();
+      },
+    },
   },
   mounted() {
     this.getData();
@@ -305,14 +383,12 @@ export default {
   height: 100%;
   position: relative;
 
-
   .addDialog {
-
     .el-dialog {
       border-radius: 5px;
       overflow: hidden;
     }
-    .el-dialog__body{
+    .el-dialog__body {
       text-align: center;
     }
     .deleteContent {
@@ -339,12 +415,12 @@ export default {
       background: #32455b;
     }
     .el-dialog__title {
-      color:#fff;
-        display: flex;
-        justify-content: center;
-        font-size: 18px;
-        position: relative;
-        top: -2px;
+      color: #fff;
+      display: flex;
+      justify-content: center;
+      font-size: 18px;
+      position: relative;
+      top: -2px;
     }
     .addDialogMid {
       box-sizing: border-box;
@@ -395,6 +471,10 @@ export default {
   height: 40px !important;
   width: auto;
 }
+
+/deep/ .video-player > .video-js {
+  height: 100%;
+}
 // #footerPage {
 //   width: 100%;
 //   position: absolute;
@@ -402,5 +482,4 @@ export default {
 //   display: flex;
 //   justify-content: flex-end;
 // }
-
 </style>