vue-video-player vue视频插件

介绍
vue-video-player是videojs的vue版本
引用一下官网介绍：Video.js是一个为HTML5世界从头开始构建的网络视频播放器。它支持HTML5视频和现代流媒体格式，它支持在桌面和移动设备上播放视频。

安装

安装依赖npm i vue-video-player -D

全局引入：

// 在mian.js里面引入
	import "video.js/dist/video-js.css";
	import {videoPlayer} from "vue-video-player";
	Vue.use(VideoPlayer)

用法：我直接沾的我的项目代码，具体实施请参考官方文档：https://videojs.com/

<template>
  <div class="i-content">
    <div class="page-container">
      <el-form :inline="true">
        <div class="header-top">
          <div>
            <el-form-item label="账号">
              <el-input
                v-model="query.username"
                placeholder="请输入账号名称"
                clearable
                @clear="getList()"
              />
            </el-form-item>
            <!--            <el-form-item label="性别">-->
            <!--              <dic-select v-model="query.sex" dicType="sex" clearable @change="getList()"/>-->
            <!--            </el-form-item>-->
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" @click="getList()"
                >查询</el-button
              >
              <el-button
                type="primary"
                icon="el-icon-plus"
                @click="handleEdit()"
                >新增</el-button
              >
            </el-form-item>
          </div>
          <div>
            <el-form-item>
              <el-button type="primary" @click="sortManage">分类管理</el-button>
              <el-button type="primary" @click="fileManage">文件管理</el-button>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <el-table :data="tableData" row-key="id" border stripe>
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column prop="username" label="账号"></el-table-column>
        <el-table-column
          prop="realname"
          label="用户姓名"
          align="center"
        ></el-table-column>
        <el-table-column label="头像" align="center">
          <template slot-scope="{ row }">
            <img width="50px" height="50px" :src="process + row.avatar" />
          </template>
        </el-table-column>
        <el-table-column
          prop="sex_dictText"
          label="性别"
          align="center"
        ></el-table-column>
        <!--            <el-table-column prop="birthday" label="生日" align="center"></el-table-column>-->
        <el-table-column
          prop="phone"
          label="手机号码"
          align="center"
        ></el-table-column>
        <!--            <el-table-column prop="orgCodeTxt" label="部门" align="center"></el-table-column>-->
        <!--            <el-table-column prop="departIds_dictText" label="负责部门" align="center"></el-table-column>-->
        <el-table-column
          prop="status_dictText"
          label="状态"
          align="center"
        ></el-table-column>
        <el-table-column label="操作" align="center" width="350">
          <template slot-scope="{ row }">
            <el-button
              :type="row.status === 1 ? 'warning' : 'success'"
              @click="handleFrozenBatch(row)"
            >
              {{ row.status === 1 ? "冻结" : "解冻" }}
            </el-button>
            <el-button type="primary" @click="handlePassword(row)"
              >重置密码</el-button
            >
            <el-button type="primary" @click="handleEdit(row)">修改</el-button>
            <el-button type="primary" @click="handleDelete(row)" plain
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <i-pagination :pages="query" :total="total" @changePage="getList" />

      <!--        新增、添加弹窗-->
      <edit-modal
        v-if="modal.dialogVisible"
        :dialogVisible="modal.dialogVisible"
        :formData="modal.formData"
        @onSubmit="onSubmit"
      />

      <!--        重置密码-->
      <el-dialog
        title="重置密码"
        :visible="passwordModal.dialogVisible"
        width="40%"
        @close="onClosePassword"
      >
        <el-form
          label-position="right"
          label-width="100px"
          :model="passwordModal.formData"
          label-suffix="："
          ref="editModal"
          :rules="passwordModal.rules"
        >
          <el-form-item :span="12" label="登录密码" prop="password">
            <el-input
              type="password"
              v-model="passwordModal.formData.password"
              auto-complete="new-password"
              placeholder="登录密码"
            ></el-input>
          </el-form-item>
          <el-form-item :span="12" label="确认密码" prop="confirmpassword">
            <el-input
              type="password"
              v-model="passwordModal.formData.confirmpassword"
              auto-complete="new-password"
              placeholder="确认密码"
            ></el-input>
          </el-form-item>
          <el-form-item :span="12">
            <el-button @click="onClosePassword">取消</el-button>
            <el-button type="primary" @click="onSubmitPassword">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 混入表格增删改
import sysTableMixins from "@/mixins/sysTableMixins";
import EditModal from "./EditModal";
import website from "@/config/website";

export default {
  name: "User",
  mixins: [sysTableMixins],
  components: { EditModal },
  data() {
    const validatePass = (rule, value, callback) => {
      if (this.passwordModal.formData.confirmpassword !== "") {
        this.$refs.editModal.validateField("confirmpassword");
      }
      callback();
    };
    const validateConfirmPass = (rule, value, callback) => {
      if (value && value !== this.passwordModal.formData.password) {
        callback(new Error("两次输入的密码不一样！"));
      } else {
        callback();
      }
    };
    return {
      // process: process.env.VUE_APP_HOST,
      process: process.env.VUE_APP_BASE_API,
      query: {},
      api: {
        list: `${this.$api.system.user}/list`,
        delete: `${this.$api.system.user}/delete`,
        update: `${this.$api.system.user}/edit`,
        save: `${this.$api.system.user}/add`,
      },
      initRow: { userIdentity: 1 },
      passwordModal: {
        dialogVisible: false,
        formData: {},
        rules: {
          password: [
            { required: true, trigger: "blur", message: "登录密码不能为空" },
            {
              pattern: website.pattern.pass,
              message: "登录密码必须大于6位英文和数字",
            },
            { validator: validatePass },
          ],
          confirmpassword: [
            { required: true, trigger: "blur", message: "确认密码不能为空" },
            { validator: validateConfirmPass },
          ],
        },
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleFrozenBatch(row) {
      const data = {
        ids: row.id,
        status: row.status === 1 ? 2 : 1,
      };
      const msg = row.status === 1 ? "确定冻结吗?" : "确定解冻吗?";
      this.$confirm(msg, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await this.$http.put(`${this.$api.system.user}/frozenBatch`, data);
          this.getList();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handlePassword(row) {
      this.passwordModal.formData = { username: row.username };
      this.passwordModal.dialogVisible = true;
    },
    onSubmitPassword() {
      this.$refs["editModal"].validate((valid) => {
        if (valid) {
          this.$http.put(
            `${this.$api.system.user}/changePassword`,
            this.passwordModal.formData
          );
          this.onClosePassword();
        } else {
          return false;
        }
      });
    },
    onClosePassword() {
      this.passwordModal.formData = {};
      this.passwordModal.dialogVisible = false;
    },
    sortManage() {
      this.$router.push({ path: "Category" });
    },
    fileManage() {
      this.$router.push({ path: "FileManage" });
    },
  },
};
</script>

<style scoped lang="scss">
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>