2021SC@SDUSC 软件工程应用与实践（8）——知识图谱视频的获取与播放（下）

2021SC@SDUSC

一、引言

本篇博客将对老年健康知识图谱系统中的播放视频功能的前端代码进行分析。

二、代码分析

1.知识图谱视频的获取

Element UI组件 Table 表格

在系统中，我们使用Element的Table表格组件，用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。

<el-table
        :header-cell-style="{background:'#fafafa',color:black}"
        :data="tableData"
        style="width: 100%">
        <el-table-column
          type="index"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="indexName"
          width="200"
          label="指标名称">
        </el-table-column>
        <el-table-column
          prop="fileName"
          width="400"
          label="文件名称">
        </el-table-column>
        <el-table-column
          prop="fileType"
          width="100"
          label="文件类型">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              round
              @click="showDetail(scope.$index, scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>

其中，在表格的“操作”这一列中，提供了“查看详情”的按钮，通过点击这个按钮可以实现对视频和word文档等的播放与查看。

showDetail方法

“查看详情”的功能被定义在showdetails的方法内。

  methods:{
    //查看详情
    showDetail(index,row){
      //获取文件名称
      let fileName = row.fileName;
      let fileType = row.fileType;
      //根据文件名和文件类型发送axios请求获取链接
      if(fileType == '视频'){
        this.videoSrc = "http://localhost:8989/video/" + fileName;
        //显示视频对话框
        this.videoDialogVisible = true;
      }
      else if(fileType == '文字'){
        this.wordSrc = "http://localhost:8989/word/" + fileName;
        this.audioSrc = "http://localhost:8989/audio/" + fileName.substring(0,fileName.indexOf('.')) + ".wav";
        //读取word文档对应的路径，转为html，并显示在页面上
        let vm = this;
        const xhr = new XMLHttpRequest();
        xhr.open("get", this.wordSrc, true);
        xhr.responseType = "arraybuffer";
        xhr.onload = function () {
          if (xhr.status == 200) {
            mammoth
              .convertToHtml({ arrayBuffer: new Uint8Array(xhr.response) })
              .then(function (resultObject) {
                vm.$nextTick(() => {
                  vm.word=resultObject.value;
                });
              });
          }
        };
        xhr.send();
        this.wordDialogVisible = true;
      }
    },

2.知识图谱视频的对话框

在获取到视频链接后执行 this.videoDialogVisible = true语句，显示视频对话框。
:visible指的是属性绑定，表示弹框的显示隐藏，当:visible的值为ture的时候，弹框显示，当为false的时候，弹框隐藏

后面的.sync是什么意思呢，指的就是同步动态双向的来表示visible的值，当我们关闭窗口的时候，这个弹框隐藏了，visible的值发生了变化，但是关闭窗口这个动作，我们没法用确定的动作去判断这个值，所以用到了vue中的双向绑定的原则，在vue中统一加上了.sync来表示同步的修改了visible的值。

知识图谱中的相关视频会通过dialog对话框播放。
before-close 仅当用户通过点击关闭图标或遮罩关闭 Dialog 时起效。如果你在 footer 具名 slot 里添加了用于关闭 Dialog 的按钮，那么可以在按钮的点击回调函数里加入 before-close 的相关逻辑。

<el-dialog
      title="视频"
      :visible.sync="videoDialogVisible"
      :before-close="closeVideoDialog"
      width="640">
      <video ref="video" :src="videoSrc" width="100%" height="360" controls>
        <source type="video/mp4">
      </video>
    </el-dialog>

当关闭对话框时，会停止视频的播放。

    closeVideoDialog(done){
      this.$refs.video.pause();
      done()
    },

pause() 方法停止（暂停）当前播放的音频或视频。this.$refs.video.pause()语句使视频的播放暂停，done()将播放视频的对话框关闭。
HTMLVideoElement 接口提供了用于操作视频对象的特殊属性和方法。它同时还继承了HTMLMediaElement 和 HTMLElement 的属性与方法。
在不同浏览器中 支持的媒体格式 是不一样的。因此在提供媒体文件的时候，或者提供一种所有浏览器都支持的格式，或者提供格式不同的多个视频源来支持不同浏览器，保证你想要支持的浏览器都能够播放。