vue2 项目中嵌入视频

news/2024/5/18 22:01:19

案例:

代码:

<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 属性 | 菜鸟教程


https://dhexx.cn/news/show-5071528.html

相关文章

android去掉 原生锁屏

1. /frameworks/base/core/java/com/android/internal/widget/LockPatternUtils.java 直接 return true 2./packages/apps/Settings/src/com/android/settings/password/ScreenLockType.java 都改成 none 类型

CSS 实现祥云纹理背景

&#x1fab4; 背景 最近掘金出来一个中秋创意活动&#xff0c;我准备参加一下。作品方向选择用纯css做一个中秋贺卡&#xff0c;其中有一些中秋的元素和一些简单的动画&#xff0c;而贺卡背景的实现就是本文要讲的内容。 中秋贺卡成果图&#xff08;生成gif有点失真&#x1f6…

安防视频监控平台EasyNVR无法控制云台,该如何解决?

TSINGSEE青犀视频安防监控平台EasyNVR可支持设备通过RTSP/Onvif协议接入&#xff0c;并能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等多种格式。在智慧安防等视频监控场景中&#xff0c;EasyNVR可提供视频实时监控直播、云端…

小插曲 -- 使用Linux编写 判断程序是否在运行的小程序

编写思路 首先&#xff0c;在执行“ps -elf |grep xxx”时&#xff0c;如果xxx存在&#xff0c;通常会有两条结果&#xff0c;一个是xxx对应的PID&#xff0c;一个则是grep对应的PID&#xff0c;但是如果我希望执行命令后&#xff0c;xxx存在就只有xxx对应的PID&#xff0c;不…

Windows Server 2008安装.NET Framework 3.5

安装.NET Framework 3.5一、打开服务器管理器 在开始菜单中搜索“服务器管理器” 二、添加.NET Framework 3.5.1功能 &#xff08;一&#xff09;功能-》添加功能 &#xff08;二&#xff09;选择功能“.NET Framework 3.51” 1.点击“NET Framework 3.5.1”勾选框 2.点击“添…

多线程的学习上篇

座右铭: 天行健&#xff0c;君子以自强不息;地势坤&#xff0c;君子以厚德载物. 引入进程这个概念的目的 引入进程这个概念,最主要的目的,是为了解决“并发编程"这样的问题. 这是因为CPU进入了多核心的时代 要想进一步提高程序的执行速度,就需要充分的利用CPU 的多核资源…

【Gradle-8】Gradle插件开发指南

1、前言 Gradle插件开发在Android进阶知识中是占有一定比例的&#xff0c;特别是在性能优化领域&#xff0c;基本都会涉及&#xff0c;而且跟我们日常的编译打包也息息相关&#xff0c;加上有不少招聘要求里也明确要有Gradle插件开发经验&#xff0c;所以即使大部分人的日常开…

libevent数据结构——TAILQ_结构体

TAILQ_结构体 TAILQ_结构体在文件event2/event_struct.h和文件event2/keyvalq_struct.h中都有定义&#xff0c;并且他们的定义都是一样的&#xff0c;定义了TAILQ_ENTRY、TAILQ_HEAD结构体&#xff1a; #ifndef TAILQ_ENTRY #define EVENT_DEFINED_TQENTRY_ #define TAILQ_EN…

vue项目打包_以生产环境prod模式打包_vue-cli-service 不是内部或外部命令,也不是可运行的程序---vue工作笔记0025

打开命令行: 首先执行npm install 不执行会报错: npm run build:prod --scripts-prepend-node-pathauto 然后再这样执行就是以生产环境模式打包了.

【ELK】日志分析系统概述及部署(ELFK部署实验)

目录 一、ELK概述 1、ELK是什么&#xff1f; 2、ELK的组成部分 2.1 ElasticSearch &#xff08;1&#xff09;分片和副本 &#xff08;2&#xff09;es和传统数据库的区别 2.2 Kiabana 2.3 Logstash &#xff08;1&#xff09;Log Stash主要组件 2.4 可添加的其它组件…