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

Vue:加载本地视频

目录

    • 封装视频弹框
    • 调用视频组件


封装视频弹框

<template><el-dialog class="videoBox" :title="title" :visible.sync="visible" width="40%" :before-close="handleOnClose" :close-on-click-modal="false" :close-on-press-escape="false"><video id="video" controls preload autoplay="autoplay" style="width: 100%"><source :src="videoUrl" type="video/mp4"></video></el-dialog>
</template>
<script>export default {name: 'videoData',data() {return {// 标题title: null,// 是否显示弹框visible: false,// 视频地址videoUrl: null}},methods: {/*** 初始化视频*/initVideo(){this.$nextTick(() => {let myVideo = document.getElementById('video')myVideo.pause()myVideo.load()});},/*** 取消*/handleOnClose() {this.videoUrl = nullthis.visible = false},}
}
</script>
<style>
.videoBox .el-dialog__header {background-color: #000000;
}
.videoBox .el-dialog__header .el-dialog__title {color: #fff;
}
.videoBox .el-dialog__body {padding: 0 !important;
}
</style>

调用视频组件

/*** 视频查看* @param row*/
handleVideo(row){this.$refs.videoData.title = '视频详情'this.$refs.videoData.visible = truethis.$refs.videoData.videoUrl = row.wzsp + '?t=' + new Date().valueOf()this.$refs.videoData.initVideo()
},

相关文章:

Vue:加载本地视频

目录 封装视频弹框调用视频组件 封装视频弹框 <template><el-dialog class"videoBox" :title"title" :visible.sync"visible" width"40%" :before-close"handleOnClose" :close-on-click-modal"false" …...

论文阅读:A Generalization of Transformer Networks to Graphs

论文阅读&#xff1a;A Generalization of Transformer Networks to Graphs 论文地址1 摘要2 贡献Graph TransformerOn Graph Sparsity&#xff08;图稀疏&#xff09;On Positional Encodings&#xff08;位置编码&#xff09;3 Graph Transformer Architecture&#xff08;架…...

中国计量大学《2022年801+2022年819自动控制原理真题》 (完整版)

本文内容&#xff0c;全部选自自动化考研联盟的&#xff1a;《25届中国计量大学801819自控考研资料》的真题篇。后续会持续更新更多学校&#xff0c;更多年份的真题&#xff0c;记得关注哦~ 目录 2022年801真题 2022年819真题 Part1&#xff1a;2022年完整版真题 2022年801…...

创客匠人运营课堂|增强用户的参与度和忠诚度,这一个工具就能实现!

活动投票是通过营销活动来提升用户粘性及平台裂变效果的工具。可以让活动得到更好的传播&#xff0c;平台品牌得到更大的曝光。 使用场景 活动投票是一种互动营销手段&#xff0c;适用于各种活动场景&#xff0c;具有增强用户的参与度和忠诚度&#xff0c;提高活动的透明度和公…...

k8s 微服务 ingress-nginx 金丝雀发布

目录 一 什么是微服务 二 微服务的类型 三 ipvs模式 3.1 ipvs模式配置方式 四 微服务类型详解 4.1 clusterip 4.2 ClusterIP中的特殊模式headless 4.3 nodeport 4.4 loadbalancer 4.5 metalLB 4.6 externalname 五 Ingress-nginx 5.1 ingress-nginx功能 5.2 部署…...

Elasticsearch不停机切换(上云)方案

如何给飞行中的飞机换引擎? 背景 业务背景 略 技术背景 线下集群40个索引左右&#xff0c;总数据量不大,不到100G因为ES承担的业务鉴权业务&#xff0c;所以不能接受停机割接 还有就是ES中数据来自各个业务方&#xff0c;推送的时机不定&#xff0c;也没有完备的重推机制&…...

归纳一下Invoke,beginInvoke,还有InvokeRequire

1.在WinForms中的Invoke和BeginInvoke WinForms是一个单线程的UI框架。在多线程的环境下操作UI控件时。需要使用Invoke和BeginInvoke跨线程调起UI线程 这两的区别如下Invoke&#xff1a;同步调用&#xff0c;当前代码不在UI线程上执行时&#xff0c;会卡住当前线程&#xff0…...

Prompt最佳实践|指定输出的长度

在OpenAI的官方文档中已经提供了[Prompt Enginerring]的最佳实践&#xff0c;目的就是帮助用户更好的使用ChatGPT 编写优秀的提示词我一共总结了9个分类&#xff0c;本文讲解第6个分类&#xff1a;指定输出长度 提供更多的细节要求模型扮演角色使用分隔符指定任务步骤提供样例…...

离散制造 vs 流程制造:锚定精准制造未来,从装配线到化学反应,实时数据集成在制造业案例中的多维应用

使用 TapData&#xff0c;化繁为简&#xff0c;摆脱手动搭建、维护数据管道的诸多烦扰&#xff0c;轻量替代 OGG, Kettle 等同步工具&#xff0c;以及基于 Kafka 的 ETL 解决方案&#xff0c;「CDC 流处理 数据集成」组合拳&#xff0c;加速仓内数据流转&#xff0c;帮助企业…...

教你一招:在微信小程序中为用户上传的图片添加时间水印

在微信小程序开发过程中&#xff0c;我们常常需要在图片上添加水印&#xff0c;以保护版权或增加个性化元素。本文将为大家介绍如何在微信小程序中为图片添加时间水印&#xff0c;让你的小程序更具特色。 实现步骤&#xff1a; 1. 创建页面结构 在pages目录下创建一个名为upl…...

MySQL --基本查询(上)

文章目录 1.Create1.1单行数据全列插入1.2多行数据指定列插入1.3插入否则更新1.4替换 2.Retrieve2.1 select列2.1.1全列查询2.1.2指定列查询2.1.3查询字段为表达式2.1.4 为查询结果指定别名2.1.5结果去重 2.2where 条件2.2.1英语不及格的同学及英语成绩 ( < 60 )2.2.2语文成…...

mysql学习教程,从入门到精通,SQL 删除数据(DELETE 语句)(19)

1、SQL 删除数据&#xff08;DELETE 语句&#xff09; 在SQL中&#xff0c;TRUNCATE TABLE 语句用于删除表中的所有行&#xff0c;但不删除表本身。这个操作通常比使用 DELETE 语句删除所有行要快&#xff0c;因为它不记录每一行的删除操作到事务日志中&#xff0c;而是直接重…...

RoguelikeGenerator Pro - Procedural Level Generator

这是怎么一回事? Roguelike Generator Pro:简单与力量的结合。使用GameObjects、Tilemaps或自定义解决方案轻松制作3D/2D/2.5D关卡。享受内置功能,如碰撞处理、高度变化、基本控制器和子随机化器,所有这些都由Drunkard Wlak程序生成算法提供支持。 我该如何使用它? 简单:…...

反病毒技术和反病毒软件(网络安全小知识)

一、反病毒技术的难点 病毒变异与多态性&#xff1a;病毒开发者不断利用新技术和漏洞&#xff0c;创造出新的病毒变种和多态病毒。这些病毒能够自我变异&#xff0c;从而避开传统的基于特征码的检测方法&#xff0c;使得反病毒软件难以识别和清除。 未知病毒检测&#xff1a;在…...

位图与布隆过滤器

引例 给40亿个不重复的无符号整数&#xff0c;没排过序。给一个无符号整数&#xff0c;如何快速判断一个数是否在这40亿个数中。 思路1&#xff1a;排序二分查找 思路2&#xff1a;哈希或红黑树 因为40亿个整数要占用16GB 102410241024Byte 约等于10亿Byte1GB 40亿*4Byte 16G…...

【题解】—— LeetCode一周小结38

&#x1f31f;欢迎来到 我的博客 —— 探索技术的无限可能&#xff01; &#x1f31f;博客的简介&#xff08;文章目录&#xff09; 【题解】—— 每日一道题目栏 上接&#xff1a;【题解】—— LeetCode一周小结37 16.公交站间的距离 题目链接&#xff1a;1184. 公交站间的距…...

EvilScience靶机详解

主机发现 arp-scan -l 得到靶机ip 192.168.229.152 端口扫描 nmap -sV -A -T4 192.168.1.20 这段代码使用 nmap 命令来扫描目标主机 192.168.1.20&#xff0c;并执行以下操作&#xff1a;-sV&#xff1a;探测开放的端口&#xff0c;以确定服务/版本信息。-A&#xff1a;启…...

算法练习题24——leetcode3296移山所需的最小秒数(二分模拟)

【题目描述】 【代码示例&#xff08;java&#xff09;】 class Solution {// 计算让工人们将山的高度降到0所需的最少时间public long minNumberOfSeconds(int mountainHeight, int[] workerTimes) {long left 0; // 最少时间初始为0long right 0; // 最大时间初始化为0// …...

excel 单元格一直显示年月日

excel 单元格一直显示年月日&#xff0c;在单元格上右键选择单元格格式&#xff0c;选择日期时单元格会显示成日期格式...

【线程】线程的控制

本文重点&#xff1a;理解线程控制的接口 前言 内核中是没有很明确线程的概念的&#xff0c;只有轻量级进程的概念&#xff0c;不会提供直接给我们线程的系统调用&#xff0c;而会给我们提供轻量级进程的系统调用。我们用户是需要线程的接口的&#xff0c;在应用层&#xff0…...

【杂谈】-递归进化:人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

<6>-MySQL表的增删查改

目录 一&#xff0c;create&#xff08;创建表&#xff09; 二&#xff0c;retrieve&#xff08;查询表&#xff09; 1&#xff0c;select列 2&#xff0c;where条件 三&#xff0c;update&#xff08;更新表&#xff09; 四&#xff0c;delete&#xff08;删除表&#xf…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

C# 求圆面积的程序(Program to find area of a circle)

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

Web中间件--tomcat学习

Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机&#xff0c;它可以执行Java字节码。Java虚拟机是Java平台的一部分&#xff0c;Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...