zc视频切片播放

package.json

@@ -84,7 +84,10 @@
     "vuedraggable": "^2.20.0",
     "vuex": "3.1.0",
     "wechat-jssdk": "^5.0.4",
-    "xlsx": "0.14.1"
+    "xlsx": "0.14.1",
+    "xgplayer": "^2.6.25",
+    "xgplayer-hls.js": "^2.2.2",
+    "xgplayer-music": "^2.1.7"
   },
   "devDependencies": {
     "@babel/core": "7.0.0",

src/api/resource/video.js

@@ -70,4 +70,11 @@ export function importAPI(data) { //导入
         method: 'post',
         data
     })
+}
+
+export function getFileScanAPI(oid) { //audio-file
+    return request({
+        url: `${requestPath.file}getScan?fileName=${oid}`,
+        method: 'get',
+    })
 }
\ No newline at end of file

src/views/resource_manage/paperbook_module/divideGroups.vue

@@ -89,6 +89,12 @@
             <span v-if="scope.row.resourceType == 12">{{scope.row.typeView}}</span>
           </template>
         </el-table-column>
+        <el-table-column label="视频状态" min-width="10%" align="center" v-if="bindListQuery.resourceType == 5">
+          <template slot-scope="scope">
+            <span v-if="scope.row.videoStatus == '1'" style="color:#909399;">转码中</span>
+            <span v-else style="color:#67C23A;">转码成功</span>
+          </template>
+        </el-table-column>
         <el-table-column prop="createdTime" label="上传时间" min-width="25%" align="center"></el-table-column>
       </el-table>
       <div class="block">
@@ -146,6 +152,12 @@
             <span v-if="scope.row.resourceType == 12">{{scope.row.typeView}}</span>
           </template>
         </el-table-column>
+        <!-- <el-table-column label="视频状态" min-width="10%" align="center" v-if="bindManageQuery.resourceType == 5">
+          <template slot-scope="scope">
+            <span v-if="scope.row.isScan == 1" style="color:#67C23A;">转码成功</span>
+            <span v-else style="color:#909399;">转码中</span>
+          </template>
+        </el-table-column> -->
         <el-table-column prop="createrTime" label="上传时间" min-width="10%" align="center"></el-table-column>
         <el-table-column label="操作" min-width="20%" align="center">
           <template slot-scope="scope">

src/views/resource_manage/recommendedContent/content_dialog.vue

@@ -38,6 +38,12 @@
               <span v-else>否</span>
             </template>
           </el-table-column>
+          <!-- <el-table-column label="视频状态" min-width="10%" align="center" v-if="listQuery.resourceType == 5">
+            <template slot-scope="scope">
+              <span v-if="scope.row.isScan == 1" style="color:#67C23A;">转码成功</span>
+              <span v-else style="color:#909399;">转码中</span>
+            </template>
+          </el-table-column> -->
           <el-table-column label="上传时间" min-width="12%" align="center">
             <template slot-scope="scope">
               <span v-if="scope.row.createdTime">{{scope.row.createdTime}}</span>

src/views/resource_manage/video_module/component.vue

@@ -85,7 +85,9 @@
             <i v-if="dataForm.video" class="el-icon-delete" style="color:#f56c6c;font-size:16px;cursor:pointer" @click="deleteSource"></i>
             <div class="progress" v-if="showProgress"><el-progress :percentage="progressPercent"></el-progress></div>
             <div v-if="dataForm.video">
-              <video :src="`${fileUrl}?fileName=${dataForm.video}&isOnLine=true`" controls class="video_style"></video>
+              <div id="videoLink" v-if="dataForm.isScan == 1" class="video_style"></div>
+              <video :src="`${fileUrl}?fileName=${dataForm.video}&isOnLine=true`" controls class="video_style" v-else></video>
+              <div class="tipText" v-if="(!dataForm.isScan || dataForm.isScan == 0) && dataForm.video.indexOf('.mp4') == -1">本视频转码中……</div>
             </div>
           </el-form-item>
           <div class="resource_title" style="margin-top: 80px">
@@ -133,11 +135,13 @@
 </template>
 
 <script>
-import { videoSaveAPI, videoDetailsAPI } from '@/api/resource/video'
+import HlsJsPlayer from 'xgplayer-hls.js'
+import Player from 'xgplayer'
+import { videoSaveAPI, videoDetailsAPI, getFileScanAPI } from '@/api/resource/video'
 import { sortListAPI,labelListAPI,authorLibraryAPI,deleteFileAPI, uploadFileAPI, getBookRelationAPI, } from '@/api/common'
 import { authorRecDelAPI } from '@/api/resource/author'
 import { confirm } from "@/utils/function"
-import { fileUrl } from '@/utils/global'
+import { fileUrl, courseUrl } from '@/utils/global'
 import { formatSort } from '@/utils/format'
 import { valValidate } from '@/utils/validate'
 import relationBookDialog from "@/components/dialog/relation_book_dialog";
@@ -155,6 +159,7 @@ export default {
       timer:null,
       loading:false,
       fileUrl,
+      courseUrl,
       dataForm:{
         video: null,
         author:null,
@@ -211,6 +216,8 @@ export default {
       resourceBookList:[],
       showRelationDialog:false,
       oldRelationBookId:null,
+      player:null,
+      progressPercent:0,
     }
   },
   created() {
@@ -231,13 +238,13 @@ export default {
       videoDetailsAPI(this.dataForm.id).then(res =>{
         if (res.data.code === 0) {
           this.dataForm = res.data.data
-           this.dataForm.price = this.dataForm.price ? this.dataForm.price : undefined
+          this.dataForm.price = this.dataForm.price ? this.dataForm.price : undefined
           if(this.dataForm.bookList == null) this.dataForm.bookList = {}
           if(this.dataForm.bookList){
             this.oldRelationBookId = this.dataForm.bookList.bookId
             this.dataForm.bookList.qbookId = this.dataForm.bookList.bookId
           }
-           if(res.data.data.diyTypeCode){
+          if(res.data.data.diyTypeCode){
             let arr = []
             res.data.data.diyTypeCode.forEach(item => {
               if(item){
@@ -246,15 +253,39 @@ export default {
             })
             this.dataForm.diyTypeCode = arr
           }
-           this.getLabel()
-           let reg1 = /<img src="\/file\/web\//g
-           this.dataForm.synopsis = this.dataForm.synopsis.replace(reg1,'<img src="http://ysj.class.com.cn/file/web/')
+          this.getLabel()
+          if(this.player){
+            let isDelDom = true
+            this.player.destroy(isDelDom)
+            this.player = null
+          }
+          if(this.dataForm.video){
+            this.getVideoPath()
+          }
+          let reg1 = /<img src="\/file\/web\//g
+          this.dataForm.synopsis = this.dataForm.synopsis?this.dataForm.synopsis.replace(reg1,'<img src="http://ysj.class.com.cn/file/web/'):''
         } else {
           this.$message.error('数据加载失败');
         }
       })
     },
-   
+    getVideoPath() {
+      if(this.dataForm.isScan == 1){
+        let that = this
+        this.$nextTick(() => {
+          this.player = new HlsJsPlayer({ //设置视频
+            id: 'videoLink',
+            width: 565,
+            height: 342,
+            playbackRate: [0.5, 0.75, 1, 1.5, 2],
+            url: that.courseUrl+that.dataForm.videoPath,
+            poster: that.dataForm.cover ? that.coverUrl(that.dataForm.cover) : that.courseUrl+that.dataForm.imgPath,
+            playsinline: true,
+            autoplay: false
+          })
+        })
+      }
+    },
     translatorLibrary() { //译者框输入作者查询作者
       authorLibraryAPI().then(res => {
         if(res.data.code === 0) {
@@ -442,6 +473,7 @@ export default {
           this.dataForm.size = res.data.size
           this.dataForm.timeLength = res.data.time
           this.$nextTick(() => {
+            this.getIsScan(this.dataForm.video)
             this.$refs['dataForm'].clearValidate('video');
           })
         } else {
@@ -455,6 +487,13 @@ export default {
       })
       // console.log('uploadRes',uploadRes);
     },
+    getIsScan(file){
+      getFileScanAPI(file).then((res) => {
+        if(res.data.code == 0){
+          this.dataForm.isScan = res.data.data
+        }
+      })
+    },
     handleVideoSuccess(response, file, fileList){//视频上传成功
       this.loading = false
       this.dataForm.video = response.fileName
@@ -490,42 +529,42 @@ export default {
       },50)
     },
     // 自定义标签
-      getLabel() {
-        labelListAPI(this.labelQuery).then(res => {
-          if(res.data.code == 0) {
-            if(this.dataForm.labelContentDiyTypeIds && this.dataForm.labelContentDiyTypeIds.length>0){//查看或者修改
-              res.data.data.list.map(el =>{
-                el.list.map(item =>{
-                  this.dataForm.labelContentDiyTypeIds.map(info => {
-                    if(item.id == info){
-                      if(el.selectId && el.selectId.length>0){
-                        el.selectId.push(info)
-                      } else{
-                        el.selectId = []
-                        el.selectId.push(info)
-                      }
+    getLabel() {
+      labelListAPI(this.labelQuery).then(res => {
+        if(res.data.code == 0) {
+          if(this.dataForm.labelContentDiyTypeIds && this.dataForm.labelContentDiyTypeIds.length>0){//查看或者修改
+            res.data.data.list.map(el =>{
+              el.list.map(item =>{
+                this.dataForm.labelContentDiyTypeIds.map(info => {
+                  if(item.id == info){
+                    if(el.selectId && el.selectId.length>0){
+                      el.selectId.push(info)
                     } else{
-                      if(!el.selectId){
-                        el.selectId = []
-                      }
+                      el.selectId = []
+                      el.selectId.push(info)
+                    }
+                  } else{
+                    if(!el.selectId){
+                      el.selectId = []
                     }
-                  })
+                  }
                 })
               })
-              if(this.$route.query.detailsId){//查看
-                res.data.data.list = res.data.data.list.filter(item => (item.selectId && item.selectId.length>0))
-              }
-            } else{
-              res.data.data.list.map(el =>{
-                if(!el.selectId){
-                  el.selectId = []
-                }
-              })
+            })
+            if(this.$route.query.detailsId){//查看
+              res.data.data.list = res.data.data.list.filter(item => (item.selectId && item.selectId.length>0))
             }
-            this.labelList = res.data.data.list
+          } else{
+            res.data.data.list.map(el =>{
+              if(!el.selectId){
+                el.selectId = []
+              }
+            })
           }
-        })
-      },
+          this.labelList = res.data.data.list
+        }
+      })
+    },
   },
 }
 </script>
@@ -534,6 +573,11 @@ export default {
 .progress{
   width:565px;
 }
+.tipText{
+  color:#ff4949;
+  line-height: 30px;
+  margin-top: 10px;
+}
 .video_style{
   width:565px;
   height:342px;