vue 上传视频-优快云博客

本文介绍了如何在Vue组件中使用controlslist属性控制视频播放默认控件，并结合el-tree组件和表单元素展示了一个创建、编辑和删除操作的示例，以及文件上传功能的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件

代码：

<template>
  <div class="schematicDiagramIndex">
    <el-container>
      <el-header v-if="this.radiooCar==1">
        <el-button @click="addOpen">新增</el-button>
        <el-button @click="updateOpen">编辑</el-button>
        <el-button @click="delOpen">删除</el-button>
      </el-header>
      <el-container>
        <!-- 左侧树 -->
        <el-aside width="20rem;height: 100%;">
          <div style="height: 100%;overflow-y: scroll">
            <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText"
            >
            </el-input>
            <el-tree
                :accordion="true"
                class="filter-tree"
                :data="CompanyLeftData"
                :props="defaultProps"
                :expand-on-click-node="false"
                :default-expanded-keys="[1]"
                highlight-current
                node-key="value"
                :default-expand-all="true"
                @node-click="handleNodeClick"
                :filter-node-method="filterNode"
                ref="treeList"
                :height="heights"
            >
            </el-tree>
          </div>
        </el-aside>
       
        <el-main  v-loading="showVideo">
          <!-- 视频 -->
         <div class="video1">
          <!-- controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件
             loop属性用于设置或返回视频结束时是否应该重新开始播放。
           -->
           <video
               id="video1"
               controls="controls"
               loop="loop"
               ref="video"
               :height="heights"
               controlslist="nodownload "
           >
             <source
                 :src="videoURL"
                 type="video/mp4"
             />
             您的浏览器不支持 HTML5 video 标签。
           </video>
         </div>
        </el-main>
      </el-container>
    </el-container>
    <!--    车的弹框-->
    <el-dialog
        :title="title"
        v-model="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <!--      表单-->
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="上级节点" prop="ParentId">
          <!--          <el-input v-model="ruleForm.ParentId" placeholder="请输入内容"></el-input>-->
          <el-select v-model="ruleForm.Par