触摸播放视频,并用iframe实现播放外站视频
效果:

html:
<div:style="{ height: homedivh }"class="rightOne_content_div_div"@mouseenter="divSeenter(i)"@mouseleave="divLeave(i)"@click="ItemClick(i)"><!-- isUser是否是用户上传 --><divv-if="i.isUser"style="width: 20px;position: absolute;height: 20px;right: 1%;top: 2%;"><svgt="1715653701623"class="icon"viewBox="0 0 1024 1024"version="1.1"xmlns="http://www.w3.org/2000/svg"p-id="8731"width="100%"height="100%"><pathd="M512 981.333333C252.8 981.333333 42.666667 771.2 42.666667 512S252.8 42.666667 512 42.666667s469.333333 210.133333 469.333333 469.333333-210.133333 469.333333-469.333333 469.333333z m36.394667-283.093333l80.810666 48.085333c19.968 11.904 34.602667 2.688 32.426667-20.736l-9.130667-98.048c-2.218667-23.509333 8.96-56.277333 24.96-73.386666l61.610667-66.005334c16.128-17.322667 10.410667-34.986667-12.373333-39.850666l-88.064-18.858667c-23.04-4.949333-50.176-25.941333-61.098667-47.018667l-45.738667-88.234666c-10.965333-21.205333-28.672-21.077333-39.594666 0l-45.738667 88.234666c-10.965333 21.162667-38.314667 42.112-61.098667 47.018667l-88.064 18.858667c-23.04 4.949333-28.373333 22.698667-12.373333 39.850666l61.610667 66.005334c16.128 17.28 27.136 49.962667 24.96 73.386666l-9.130667 98.048c-2.218667 23.509333 12.330667 32.725333 32.426667 20.736l80.810666-48.085333c19.968-11.904 52.693333-11.946667 72.789334 0z"p-id="8732"fill="#FFA53D"></path></svg></div><imgv-show="!i.showImage"class="rightOne_content_div_img":src="i.cover"alt=""/><div class="rightOne_content_div_img_div"><CrossSiteVideoclass="rightOne_content_div_img"v-if="i.showImage":src="zfgvideo":controls="false"@click="ItemClick(i)"/></div><div class="rightOne_content_div_img"><div class="rightOne_content_div_time"><!-- {{ i.duration | formatTime }} --></div></div></div>
js:
// 首页鼠标移入divSeenter(i) {console.log("🚀 ~ divSeenter ~ i:", i);this.zfgvideo = `${i.videoUrl}`;i.showImage = true;console.log("🚀 ~ divSeenter ~ this.zfgvideo:", this.zfgvideo);this.$forceUpdate();},divLeave(i) {i.showImage = false;this.zfgvideo = "";this.$forceUpdate();},
组件CrossSiteVideo:
<template><iframe @load="syncAttrs" ref="vref" frameborder="0" src="/video.html"></iframe>
</template><script setup name="CrossSiteVideo">
import Vue, { reactive, getCurrentInstance, onBeforeUnmount, ref, watch, onMounted, defineEmits, defineProps } from "vue";const vref = ref();const props = defineProps(['src','controls']);
const emits = defineEmits(['click']);
const events = {click: (...arg) => emits('click', ...arg),
}const syncEvents = (isDestroy) => {const win = vref?.value?.contentWindow;if (typeof win?.updateVideoEvents === 'function') {win.updateVideoEvents(events,isDestroy)}
}
const syncAttrs = () => {const win = vref?.value?.contentWindow;if (typeof win?.updateVideoAttributes === 'function') {syncEvents();win.updateVideoAttributes(props)}
}// onMounted(syncAttrs);
watch(props, syncAttrs);
onBeforeUnmount(() => {syncEvents(true);
});</script><style scoped lang="less">
iframe {-ms-overflow-style: none;/* IE和Edge */scrollbar-width: none;/* Firefox */
}
</style>相关文章:
触摸播放视频,并用iframe实现播放外站视频
效果: html: <div:style"{ height: homedivh }"class"rightOne_content_div_div"mouseenter"divSeenter(i)"mouseleave"divLeave(i)"click"ItemClick(i)"><!-- isUser是否是用户上传 --><divv-if…...
接口自动化-requests库
requests库是用来发送请求的库,本篇用来讲解requests库的基本使用。 1.安装requests库 pip install requests 2.requests库底层方法的调用逻辑 (1)get / post / put / delete 四种方法底层调用 request方法 注意:data和json都…...
队列的实现与OJ题目解析
"不是你变优秀了, 那个人就会喜欢你." 文章索引 前言1. 什么是队列2. 队列的实现3. OJ题目解析4. 总结 前言 感情可以培养是个伪命题. 如果有足够多的时间和爱, 就可以让另一个人爱上你的话, 那谁和谁都可以相爱了. 爱情之所以会让人死去活来, 是因为, 答案都写在了…...
中北大学软件学院javaweb实验三JSP+JDBC综合实训(一)__数据库记录的增加、查询
目录 1.实验名称2.实验目的3.实验内容4.实验原理或流程图5.实验过程或源代码(一)编程实现用户的登录与注册功能【步骤1】建立数据库db_news2024和用户表(笔者使用的数据库软件是navicat)【步骤2】实现用户注册登录功能(与上一实验报告不同的是࿰…...
高通QCS6490开发(一): 广翼智联FV01 AI板卡简介
《高通QCS6490开发》是一系列AIoT应用开发文章,我们将会在系列文章中陆续介绍基于QCS6490平台上的AIoT应用开发,在文章中,我们选择了广翼智联(FAIOT)公司的FV01产品作为开发板,介绍如何从底层的硬件板卡接线…...
【知识拓展】大白话说清楚:IP地址、子网掩码、网关、DNS等
前言 工作中常听别人说的本地网络是什么意思?同一网段又是什么意思?它俩有关系吗? 在工作中内经常会遇到相关的网络问题,涉及网络通信中一些常见的词汇,如IP地址、子网掩码、网关和DNS等。具体一点:经常会…...
Java 高级面试问题及答案2
Java 高级面试问题及答案 问题 1: 请解释 Java 中的多线程和并发的区别,并举例说明如何避免常见的并发问题。 答案: 多线程是指程序中有多个线程同时执行,而并发是指程序设计中允许多个操作看起来是同时执行的,即使它们可能不是…...
2024年网络安全威胁
随着2024年的到来,数字世界的版图正在以前所未有的速度扩张,引领我们进入一个技术革新的新时代。然而,这飞速的发展同时也催生了一系列错综复杂的网络安全挑战。在这个数字平台与我们生活日益紧密交织的时代,深入了解这些新兴的威…...
应用层之 HTTP 协议
HTTP 协议 HTTP (全称为 "超文本传输协议") 是一种应用非常广泛的 应用层协议。所谓 "超文本" 的含义, 就是传输的内容不仅仅是文本(比如 html, css 这个就是文本), 还可以是一些 其他的资源, 比如图片, 视频, 音频等二进制的数据。浏览器获取到网页&#…...
解决Word文档中页眉有部分有,有部分没有的问题
问题描述:一个Word文档中,在页眉上添加文档名称和页码,但是有的有,有的没有,选择“链接到前一节”也无法解决该问题。 原因分析:页眉页脚中,勾选了“首页不同”的选项,如下图&#…...
Python爬虫基础知识学习(以爬取某二手房数据、某博数据与某红薯(书)评论数据为例)
一、爬虫基础流程 爬虫的过程模块化,基本上可以归纳为以下几个步骤: 1、分析网页URL:打开你想要爬取数据的网站,然后寻找真实的页面数据URL地址; 2、请求网页数据:模拟请求网页数据,这里我们介…...
JavaScript-输入输出语句
输出语句 document.write( 输出的内容 ) 语法:document.write( 输出的内容) 作用:内容会显示在网页上 如果输出的内容是标签,也会被解析为网页元素 代码: <!DOCTYPE html> <html lang"en"> <head>&…...
peft+llama3训练自定义数据
要微调自己的模型训练 LLaMA 3,则需要准备一个 JSON 格式的数据集,其中每个条目包含输入文本和相应的标签(如果有的话)。以下是一个 JSON 数据集的示例格式: [{"input": "这是一个输入样本。",&q…...
vue+ts+vite+pinia+less+echarts 前端可视化 实战项目
1.初始化前端 输入 npm init vuelatest 命令 然后 选择需要的插件2.构建完成后 在终端切换到vue-project文件夹下 npm install 下载依赖 3.下载 less样式 npm install less less-loader -D 4.下载axios npm install axios 5.下载echarts npm install echarts -S 6.引入中国…...
文心一言指令多样化,你知道的有哪些?
文心一言的指令非常多样化,可以根据用户的需求和场景进行灵活调整。以下是一些常见的文心一言指令示例: 知识问答: 帮我解释一下什么是芯片?中国的历史上有哪些重要的朝代?人工智能在未来会有哪些发展趋势?…...
QT状态机8-使用恢复策略自动恢复属性
当状态分配的属性不再活动时,可能希望将其恢复到初始值,通过设置全局的恢复策略可以使状态机进入一个状态而不用明确制定属性的值。 QStateMachine machine; machine.setGlobalRestorePolicy(QStateMachine::RestoreProperties);当设置了恢复策略以后,状态机将自动恢复所有…...
第83天: 代码审计-PHP 项目RCE 安全调试追踪代码执行命令执行
案例一:CNVD拿1day-RCE命令执行-百家CMS 这里用代码审计系统搜索system,可以利用的是第一种 打开看细节 查找函数引用 查找$_file第一次出现的地方 这个时候就明白了,必须上传文件,然后利用文件名,去执行system命令 …...
学习Uni-app开发小程序Day8
前面几天,学习了vue的button组件、input组件,vue模版语法、计算属性等,在昨天又根据前面学习的,跟着做了一个小的购物车功能,今天学习了侦听器和计算属性 计算属性 computed computed是一个只读的状态,如果要修改…...
OpenHarmony标准设备应用开发(二)——布局、动画与音乐
本章是 OpenHarmony 标准设备应用开发的第二篇文章。我们通过知识体系新开发的几个基于 OpenHarmony3.1 Beta 标准系统的样例:分布式音乐播放、传炸弹、购物车等样例,分别介绍下音乐播放、显示动画、动画转场(页面间转场)三个进阶…...
mysql字段乱序 information_schema
select COLUMN_NAME from information_schema.columns where table_namecollect_column_info and table_schema nz; 返回ASCII排列 导致 sqoop import \ --connect "jdbc:mysql://your_host/collect" \ --username your_username \ --password your_password \ --t…...
基于算法竞赛的c++编程(28)结构体的进阶应用
结构体的嵌套与复杂数据组织 在C中,结构体可以嵌套使用,形成更复杂的数据结构。例如,可以通过嵌套结构体描述多层级数据关系: struct Address {string city;string street;int zipCode; };struct Employee {string name;int id;…...
MFC内存泄露
1、泄露代码示例 void X::SetApplicationBtn() {CMFCRibbonApplicationButton* pBtn GetApplicationButton();// 获取 Ribbon Bar 指针// 创建自定义按钮CCustomRibbonAppButton* pCustomButton new CCustomRibbonAppButton();pCustomButton->SetImage(IDB_BITMAP_Jdp26)…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
React19源码系列之 事件插件系统
事件类别 事件类型 定义 文档 Event Event 接口表示在 EventTarget 上出现的事件。 Event - Web API | MDN UIEvent UIEvent 接口表示简单的用户界面事件。 UIEvent - Web API | MDN KeyboardEvent KeyboardEvent 对象描述了用户与键盘的交互。 KeyboardEvent - Web…...
使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装
以下是基于 vant-ui(适配 Vue2 版本 )实现截图中照片上传预览、删除功能,并封装成可复用组件的完整代码,包含样式和逻辑实现,可直接在 Vue2 项目中使用: 1. 封装的图片上传组件 ImageUploader.vue <te…...
在Ubuntu中设置开机自动运行(sudo)指令的指南
在Ubuntu系统中,有时需要在系统启动时自动执行某些命令,特别是需要 sudo权限的指令。为了实现这一功能,可以使用多种方法,包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法,并提供…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
重启Eureka集群中的节点,对已经注册的服务有什么影响
先看答案,如果正确地操作,重启Eureka集群中的节点,对已经注册的服务影响非常小,甚至可以做到无感知。 但如果操作不当,可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
JS设计模式(4):观察者模式
JS设计模式(4):观察者模式 一、引入 在开发中,我们经常会遇到这样的场景:一个对象的状态变化需要自动通知其他对象,比如: 电商平台中,商品库存变化时需要通知所有订阅该商品的用户;新闻网站中࿰…...
