当前位置: 首页 > news >正文

vue2 项目中嵌入视频

案例:

代码:

<template><div class="schematicDiagramIndex"><el-container><el-aside width="20rem">
<!--       <h4 style="font-size: 18px">视频演示</h4>--><div style="height: 100%;overflow-y: scroll"><el-inputplaceholder="输入关键字进行过滤"v-model="filterText"></el-input><el-treeclass="filter-tree":data="CompanyLeftData":props="defaultProps"default-expand-all:expand-on-click-node="false":default-checked-keys="[1]"highlight-currentnode-key="value"@node-click="handleNodeClick":filter-node-method="filterNode"ref="treeList"></el-tree></div></el-aside><el-divider direction="vertical" style="border: 1px solid #ccc;height: 48rem"></el-divider><el-main><!-- 视频 --><videoid="video1"controlsclass="video1"loop="loop"ref="video"><source  :src="video" type="video/mp4"  />您的浏览器不支持 HTML5 video 标签。</video></el-main></el-container></div>
</template><script>
export default {name: 'schematicDiagramIndex',data () {return {defaultProps: {children: "children",label: "label",id: "ID",},CompanyLeftData:[{value: '1',label: 'XXXX车',children: [{value: '1-1',label: '324324',},{value: '1-2',label: '箱胜多负少的体组成',},{value: '1-3',label: '电胜多负少',},],},{value: '2',label: 'XXX车',children: [{value: '2-1',label: '',},],},],filterText:"",video:"",}},created() {},mounted() {this.setCurrentKeyData()},methods: {//进行切换数据(点击事件)handleNodeClick(data, checked) {this.$refs.video.load()if (checked) {//进行勾选的数据this.$refs.treeList.setCheckedNodes([data]);this.video="src/views/userManagement/油泵车-"+data.value+".mp4"}},//进行模糊查询filterNode(value, data) {if (!value) return true;return data.Text.indexOf(value) !== -1;},//  默认选中setCurrentKeyData() {this.$nextTick(() => {this.$refs.treeList &&this.$refs.treeList.setCurrentKey(this.CompanyLeftData[0].children[0].value);this.handleNodeClick(this.CompanyLeftData[0].children[0], true);});},},computed: {},}
</script><style scoped>.schematicDiagramIndex{width: 100%;height: 45rem ;}.video1{width: 100%;height: 85%;}::v-deep .el-tree-node__content {color: black;font-size: 14px;font-weight: 400;margin: 5px;}/*::v-deep .el-input__wrapper {*//*  background-color: transparent !important;*//*}*/::v-deep .el-tree {background-color: transparent;--el-tree-node-hover-bg-color: #b5b7b7;margin-top: 20px;padding-top: 10px;padding-bottom: 10px;/*background: url("@/assets/imgList/memuBG.png") no-repeat;*/background-size: 100% 100%;}::v-deep.el-tree--highlight-current.el-tree-node.is-current> .el-tree-node__content {background-color: #1a518c;color: #fcfbfb;}.filter-tree {padding-top: 1%;height: 44rem;}
</style>

参考:HTML video autoplay 属性 | 菜鸟教程

相关文章:

vue2 项目中嵌入视频

案例&#xff1a; 代码&#xff1a; <template><div class"schematicDiagramIndex"><el-container><el-aside width"20rem"> <!-- <h4 style"font-size: 18px">视频演示</h4>--><div styl…...

第二章 进程与线程 十二、进程同步与进程互斥

目录 一、进程同步 1、定义 二、进程互斥 1、定义 2、四个部分 3、原则 一、进程同步 1、定义 进程同步是指在多个进程之间协调执行顺序的一种机制&#xff0c;使得进程按照一定的顺序执行&#xff0c;以避免出现不一致的情况。常见的实现方式有信号量、管程、屏障等。…...

Linux内核链表(list)移植到任意平台

一、前言 linux内核链表在include/linux/list.h文件中&#xff0c;内核中实现的链表比较简洁&#xff0c;实用性很强&#xff0c;因此想把它单独移植出来使用。 内核中的代码只能使用gnuc编译器编译&#xff0c;stdc编译器编译是会报错的&#xff0c;主要是因为typeof这个宏是…...

【操作系统】聊聊什么是CPU上下文切换

对于linux来说&#xff0c;本身就是一个多任务运行的操作系统&#xff0c;运行远大于CPU核心数的程序&#xff0c;从用户视角来看是并发执行&#xff0c;而在CPU视角看其实是将不同的CPU时间片进行分割&#xff0c;每个程序执行一下&#xff0c;就切换到别的程序执行。那么这个…...

CMake教程-第 2 步 添加一个库

CMake教程-第 2 步 添加一个库 1 CMake教程介绍2 学习步骤Step 1: A Basic Starting PointStep 2: Adding a LibraryStep 3: Adding Usage Requirements for a LibraryStep 4: Adding Generator ExpressionsStep 5: Installing and TestingStep 6: Adding Support for a Testin…...

DS 顺序表--类实现(C++数据结构题)

实现顺序表的用 C 语言和类实现顺序表 属性包括&#xff1a;数组、实际长度、最大长度&#xff08;设定为 1000 &#xff09; 操作包括&#xff1a;创建、插入、删除、查找 类定义参考 #include<iostream> using namespace std; #define ok 0 #define error -1 // 顺…...

0.UML

1.图 1.1类图含义 第一层显示类的名称,如果是抽象类,则就用斜体显示。第二层是类的特性,通常就是字段和属性。第三层是类的操作,通常是方法或行为。注意前面的符号, ,表示public,-,表示private,#,表示protected。 1.2接口图 与类图的区别主要是顶端有<< interface >…...

PostgreSQL设置主键为自增

1、创建自增序列 CREATE SEQUENCE table_name_id_seq START 1; 2、设置字段默认值 字段默认值中设置 nextval(table_name_id_seq) 3、常用查询 -- 查询所有序列 select * from information_schema.sequences where sequence_schema public; -- 查询自增序列的当前值 select cu…...

input修改checkbox复选框默认选中样式

问题描述&#xff1a; <input type"checkbox" /> input修改checkbox默认选中样式&#xff0c;直接设置选中后的样式不生效&#xff0c;需要先给复选框设置-webkit-appearance: none&#xff08;取消默认样式&#xff09;&#xff0c; 再设置样式才会生效。 …...

高云FPGA系列教程(10):letter-shell移植

文章目录 letter-shell简介letter-shell源码获取letter-shell移植函数和变量应用示例 本文是高云FPGA系列教程的第10篇文章。 shell&#xff0c;中文是外壳的意思&#xff0c;就是操作系统的外壳。通过shell命令可以操作和控制操作系统&#xff0c;比如Linux中的Shell命令就包括…...

【C语言学习笔记---指针进阶02】

C语言程序设计笔记---017 C语言进阶之回调函数1、函数指针数组2、回调函数3、 回调函数的应用 --- qsort库函数4、模拟qsort函数5、结语 C语言进阶之回调函数 前言&#xff1a; 通过C语言进阶前篇的指针进阶01的知识&#xff0c;继续学习。这篇引用一个简易计算器的程序进行深…...

低功耗蓝牙物联网:未来连接的无限可能

物联网是连接各种设备和传感器的网络&#xff0c;其目的是实现信息的交换和共享&#xff0c;提高效率并优化生活。在这个领域&#xff0c;低功耗蓝牙&#xff08;BLE&#xff09;正在发挥着越来越重要的作用。 低功耗蓝牙是一种无线通信技术&#xff0c;它的主要特点是低功耗和…...

安装社区版本OB

获取一键安装包 https://www.oceanbase.com/softwarecenter 离线安装 [admintest001 ~]$ tar -xzf oceanbase-all-in-one-*.tar.gz [admintest001 ~]$ cd oceanbase-all-in-one/bin/ [admintest001 bin]$ ./install.sh [admintest001 bin]$ source ~/.oceanbase-all-in-one/…...

JSON 串和 Java 对象的相互转换

JSON 串和 Java 对象的相互转换 以 json 格式的数据进行前后端交互 前端发送请求时&#xff0c;如果是复杂的数据就会以 json 提交给后端&#xff1b; 而后端如果需要响应一些复杂的数据时&#xff0c;也需要以 json 格式将数据响应回给浏览器 为达到以上目的就需要重点学习…...

爬虫 — App 爬虫(一)

目录 一、介绍二、APP 爬虫常见反爬三、APP 抓包常用工具四、模拟器五、安装 APP1、下载 APP2、安装 APP 六、fiddler1、工作原理2、安装3、基本介绍 七、环境配置1、fiddler 的配置2、夜神模拟器的配置 八、案例 一、介绍 爬虫分类——数据来源 1、PC 端爬虫&#xff08;网页…...

如何使用正则表达式实现Java日志信息的抓取与收集

首先&#xff0c;什么是Java日志信息&#xff1f;简单来说&#xff0c;Java应用程序在运行过程中会输出一些信息&#xff0c;这些信息可以用来追踪程序运行状态、调试错误等。而Java日志信息就是这些输出信息的集合。 那么为什么要抓取和收集Java日志信息呢&#xff1f;一方面…...

C/C++算法入门 | 简单模拟

不爱生姜不吃醋⭐️ 如果本文有什么错误的话欢迎在评论区中指正 与其明天开始&#xff0c;不如现在行动&#xff01; 文章目录 &#x1f334;前言&#x1f334;一、害死人不偿命的&#xff08;3n1&#xff09;猜想1.题目&#xff08;PAT B1001&#xff09;2.思路3.代码实现 &am…...

stm32学习-芯片系列/选型/开发方式

【03】STM32HAL库开发-初识STM32 | STM概念、芯片分类、命名规则、选型 | STM32原理图设计、看数据手册、最小系统的组成 、STM32IO分配_小浪宝宝的博客-CSDN博客  STM32&#xff1a;ST是意法半导体&#xff0c;M是MCU/MPU&#xff0c;32是32位。  ST累计推出了&#xff1a…...

mnist数据集

训练模型 import tensorflow as tfimport keras from keras.models import Sequential from keras.layers import Dense,Dropout, Flatten,Conv2D, MaxPooling2D # from keras.optimizers import SGD from tensorflow.keras.optimizers import Adam,Nadam, SGDfrom PIL import…...

Java之IO概述以及

1.1 什么是IO 生活中&#xff0c;你肯定经历过这样的场景。当你编辑一个文本文件&#xff0c;忘记了ctrls &#xff0c;可能文件就白白编辑了。当你电脑上插入一个U盘&#xff0c;可以把一个视频&#xff0c;拷贝到你的电脑硬盘里。那么数据都是在哪些设备上的呢&#xff1f;键…...

未来机器人的大脑:如何用神经网络模拟器实现更智能的决策?

编辑&#xff1a;陈萍萍的公主一点人工一点智能 未来机器人的大脑&#xff1a;如何用神经网络模拟器实现更智能的决策&#xff1f;RWM通过双自回归机制有效解决了复合误差、部分可观测性和随机动力学等关键挑战&#xff0c;在不依赖领域特定归纳偏见的条件下实现了卓越的预测准…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

django filter 统计数量 按属性去重

在Django中&#xff0c;如果你想要根据某个属性对查询集进行去重并统计数量&#xff0c;你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求&#xff1a; 方法1&#xff1a;使用annotate()和Count 假设你有一个模型Item&#xff0c;并且你想…...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

Java面试专项一-准备篇

一、企业简历筛选规则 一般企业的简历筛选流程&#xff1a;首先由HR先筛选一部分简历后&#xff0c;在将简历给到对应的项目负责人后再进行下一步的操作。 HR如何筛选简历 例如&#xff1a;Boss直聘&#xff08;招聘方平台&#xff09; 直接按照条件进行筛选 例如&#xff1a…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...