视频播放器的问题

html 复制代码
<template>
  <div class="app-container">
    <el-form :model="queryParam" ref="queryForm" :inline="true">
      <el-form-item label="题目ID:">
        <el-input v-model="queryParam.id" clearable></el-input>
      </el-form-item>
      <el-form-item label="题目内容:">
        <el-input v-model="queryParam.content" clearable></el-input>
      </el-form-item>

      <el-form-item label="年级:">
        <el-select v-model="queryParam.level" placeholder="年级" @change="levelChange" clearable>
          <el-option v-for="item in levelEnum" :key="item.key" :value="item.key" :label="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="学科:">
        <el-select v-model="queryParam.subjectId" clearable>
          <el-option v-for="item in subjectFilter" :key="item.id" :value="item.id"
            :label="item.name + ' ( ' + item.levelName + ' )'"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="题型:">
        <el-select v-model="queryParam.questionType" clearable>
          <el-option v-for="item in questionType" :key="item.key" :value="item.key" :label="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button plain type="primary" @click="submitForm">查询</el-button>
        <el-popover placement="bottom" trigger="click">
          <el-button plain type="warning" size="mini" v-for="item in editUrlEnum" :key="item.key"
            @click="$router.push({ path: item.value })">{{ item.name }}
          </el-button>
          <el-button plain slot="reference" type="primary" class="link-left">添加</el-button>
        </el-popover>
      </el-form-item>
    </el-form>
    <div class="content">
      <muiVideo :src="mySrc" :title="myTitle" :poster="myPoster" @mpVideo="mpVideo">
        <div class="topicModel" v-if="showTopic">
          <div class="topicModel-content">
            <span @click="clickMe">我是视频中的弹窗,点击我触发事件</span>
          </div>
        </div>
      </muiVideo>
    </div>
    <el-table :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="listLoading" :data="tableData"
      border fit highlight-current-row style="width: 100%">
      <el-table-column prop="id" label="Id" width="90px" />
      <el-table-column prop="subjectId" label="学科" :formatter="subjectFormatter" width="220px" />
      <el-table-column prop="questionType" label="题型" :formatter="questionTypeFormatter" width="70px" />
      <el-table-column prop="shortTitle" label="题干" show-overflow-tooltip />
      <el-table-column prop="score" label="分数" width="60px" />
      <el-table-column prop="difficult" label="难度" width="60px" />
      <el-table-column prop="createTime" label="创建时间" width="160px" />
      <el-table-column label="操作" align="center" width="220px">
        <template slot-scope="{row}">
          <el-button plain size="mini" @click="showQuestion(row)">预览</el-button>
          <el-button plain size="mini" @click="editQuestion(row)">编辑</el-button>
          <el-button plain size="mini" type="danger" @click="deleteQuestion(row)" class="link-left">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParam.pageIndex" :limit.sync="queryParam.pageSize"
      @pagination="search" />
    <el-dialog :visible.sync="questionShow.dialog" style="width: 100%;height: 100%">
      <QuestionShow :qType="questionShow.qType" :question="questionShow.question" :qLoading="questionShow.loading" />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapState, mapActions } from 'vuex'
import Pagination from '@/components/Pagination'
import QuestionShow from './components/Show'
import questionApi from '@/api/question'
import muiVideo from '@/components/muiVideo'

export default {
  components: { Pagination, QuestionShow, muiVideo },
  data() {
    return {
      queryParam: {
        id: null,
        questionType: null,
        level: null,
        subjectId: null,
        pageIndex: 1,
        pageSize: 10
      },
      subjectFilter: null,
      listLoading: true,
      tableData: [],
      total: 0,
      questionShow: {
        qType: 0,
        dialog: false,
        question: null,
        loading: false
      },
      mySrc: "./demo.mp4", 	   	  //播放路径
      myTitle: '测试', 	  //视频左上角标题
      myPoster: '', 	  //视频封面
      showTopic: false  //默认不展示弹题模态窗
    }
  },
  created() {
    this.initSubject()
    this.search()
    let _this = this;
    setTimeout(function () {      //模拟3秒后弹出模态窗,实际开发中应该是随机时间弹出
      _this.showTopic = true;	 //展示答题模态窗
      setTimeout(function () { 	 //弹出模态窗后做一个延迟效果,暂停播放
        _video.pause();
      }, 500)
    }, 3000)
  },
  methods: {
    clickMe() {
      console.log("点到我了");
      this.showTopic = false; //关闭答题模态窗
    },
    mpVideo(video) {
      _video = video; 	     //吐出Video原生媒体实例,其他特殊功能可以使用Video来添加原生事件,例如禁用滚动条、禁用快进快退功能等等
    },
    submitForm() {
      this.queryParam.pageIndex = 1
      this.search()
    },
    search() {
      this.listLoading = true
      questionApi.pageList(this.queryParam).then(data => {
        const re = data.response
        this.tableData = re.list
        this.total = re.total
        this.queryParam.pageIndex = re.pageNum
        this.listLoading = false
      })
    },
    levelChange() {
      this.queryParam.subjectId = null
      this.subjectFilter = this.subjects.filter(data => data.level === this.queryParam.level)
    },
    addQuestion() {
      this.$router.push('/exam/question/edit/singleChoice')
    },
    showQuestion(row) {
      let _this = this
      this.questionShow.dialog = true
      this.questionShow.loading = true
      questionApi.select(row.id).then(re => {
        _this.questionShow.qType = re.response.questionType
        _this.questionShow.question = re.response
        _this.questionShow.loading = false
      })
    },
    editQuestion(row) {
      let url = this.enumFormat(this.editUrlEnum, row.questionType)
      this.$router.push({ path: url, query: { id: row.id } })
    },
    deleteQuestion(row) {
      let _this = this
      questionApi.deleteQuestion(row.id).then(re => {
        if (re.code === 1) {
          _this.search()
          _this.$message.success(re.message)
        } else {
          _this.$message.error(re.message)
        }
      })
    },
    questionTypeFormatter(row, column, cellValue, index) {
      return this.enumFormat(this.questionType, cellValue)
    },
    subjectFormatter(row, column, cellValue, index) {
      return this.subjectEnumFormat(cellValue)
    },
    ...mapActions('exam', { initSubject: 'initSubject' })
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      questionType: state => state.exam.question.typeEnum,
      editUrlEnum: state => state.exam.question.editUrlEnum,
      levelEnum: state => state.user.levelEnum
    }),
    ...mapGetters('exam', ['subjectEnumFormat']),
    ...mapState('exam', { subjects: state => state.subjects })
  }
}
</script>
<style lang="scss">
.content {
  width: 500px;
  height: 300px;
  margin: 300px auto;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.topicModel {
  padding: 0 10px;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.4s;

  &-content {
    width: 60%;
    height: 60%;
    background-color: #FFFFFF;

  }
}
</style>
相关推荐
九鼎科技-Leo2 小时前
什么是 WPF 中的依赖属性?有什么作用?
windows·c#·.net·wpf
Yang.994 小时前
基于Windows系统用C++做一个点名工具
c++·windows·sql·visual studio code·sqlite3
我不瘦但很逗4 小时前
Windows下使用DBeaver连接云数据库(MySQL)
数据库·windows
ashane13145 小时前
Java list
java·windows·list
万里沧海寄云帆6 小时前
Word 插入分节符页码更新问题
windows·microsoft·word
dot.Net安全矩阵7 小时前
.NET 通过模块和驱动收集本地EDR的工具
windows·安全·web安全·.net·交互
xcLeigh7 小时前
HTML5超酷响应式视频背景动画特效(六种风格,附源码)
前端·音视频·html5
编程修仙8 小时前
Collections工具类
linux·windows·python
韩曙亮8 小时前
【FFmpeg】FFmpeg 内存结构 ③ ( AVPacket 函数简介 | av_packet_ref 函数 | av_packet_clone 函数 )
ffmpeg·音视频·avpacket·av_packet_clone·av_packet_ref·ffmpeg内存结构
程序员小羊!9 小时前
高级 SQL 技巧讲解
windows