vue3 视频播放功能整体复盘梳理

       

        回顾工作中对视频的处理,让工作中处理的问题的经验固化成成果,不仅仅是完成任务,还能解答任务的知识点。

遇到的问题

        1、如何隐藏下载按钮?

        video 标签中的controlslist属性是可以用来控制播放器上空间的显示,在原来默认的基础上进行优化,多个值可选择的值:

                nodownload: 不要下载、

                nofullscreen: 不要全屏、

                noremoteplayback: 不要远程回放。

        2、控制视频起始位置?

        video标签中有currentTime属性,这个可以设置视频从什么时间节点开始播放,默认是0秒。

        3、当视频运行到指定时间点暂停一次,第二次不暂停?

        在视频播放时,会同步更新timeupdate方法,可以同步记录当前的播放数据。

        4、如何在视频更新时,记录播放的状态?

        每次调用组件,可以直接运用initData方法,传参,设置视频的数据;其中@play方法,是在开启播放时执行;@pause在视频暂停时播放。@seeked 是在拉动视频播放条的回调。

        5、如何路由判断是图片、文件、还是视频,切换不同的标签?

        在下文的末尾有判断路由的状态封装方法:vue3 常用的一些字符串处理-CSDN博客

        6、如何从操作上如何防止视频被下载?

        两种方法可以同时进行,首先隐藏视频上的下载标签,即controlslist="nodownload";另外一种是防止右键下载,在video标签上嵌套一个div,并阻止右键点击事件,如 @contextmenu.prevent="menuPlayer()"。

        除此之外还有一些其它的方法,如防盗链,将视频转换成数据流的形式,只是这些需求服务端的支持。

代码实施

<template><a-modal v-model:visible="videoVisible.visible" width="50%" title="课程预览" :footer="null" destroyOnClose@cancel="closeVideo"><div class="videoBox"><div class="videoTitleBox"><div class="videoTitle">{{ videoVisible.title }}</div><div class="videoCopy" @click="copyLink()">复制链接</div></div><div class="videoStyle" @contextmenu.prevent="menuPlayer()"><video :src="videoVisible.src" controls controlslist="nodownload" :currentTime="learnedTime"style="width:100%;height:100%;" disablePictureInPicture preload @timeupdate="timeupdate" @play="onPlay"@pause="onPause" @seeked="seeked"></video></div></div></a-modal>
</template><script setup>
import { defineExpose, onBeforeUnmount, ref } from 'vue';
import defHttp from "@/utils/http.js";
import useClipboard from 'vue-clipboard3'
import { message } from 'ant-design-vue';
const props = defineProps(['info'])const { toClipboard } = useClipboard()
const emits = defineEmits(['callback'])const videoVisible = ref({ visible: false, src: "", title: "", chaptersId: "",isFirst:false,endTime:0  })
const currentTime = ref(0)
const learnedTime = ref(0)
const schedule = ref(0)
const isPlay = ref(false)
const renew = ref(0)
const copyType = ref(0)const showVideo = (courseId, chaptersId, item) => {videoVisible.value.visible = truevideoVisible.value.src = item.urlvideoVisible.value.title = item.titlevideoVisible.value.chaptersId = chaptersIdif (copyType.value == 1) {videoVisible.value.link = '复制的路由地址'} else {videoVisible.value.link = '复制的路由地址'}//视频播放暂停节点videoVisible.value.endTime = item.endTimelearnedTime.value = item.studySecondstakeInfo.value = {detailId: courseId,chaptersId: chaptersId,catalogueId: item.id,}
}
//关闭弹框时,回调父级方法,子级与父级之间通讯
const closeVideo = () => {videoVisible.value.visible = falseemits('callback')
}
//复制功能,将路由地址复制下来
const copyLink = async () => {try {// 复制await toClipboard(videoVisible.value.link)// 复制成功message.success('复制成功');} catch (e) {// 复制失败}
}
//视频播放时同步更新当前播放进度
const timeupdate = (e) => {currentTime.value = e.target.currentTime//当视频第一次播放到指定位置时,视频暂停;再开启时,视频不会暂停if(!videoVisible.value.isFirst){if(currentTime.value > videoVisible.value.endTime){videoVisible.value.isFirst = trueisPlay.value = falsee.target.pause()}}
}
//定时器,开始播放是,打开定时器
const initData = (type, courseId, chaptersId, item) => {//每次播放时,将原来的定时器进行清理if (renew.value) {clearInterval(renew.value)renew.value = null}copyType.value = typeshowVideo(courseId, chaptersId, item)
}
const takeInfo = ref({detailId: '',chaptersId: '',catalogueId: '',
})
//记录视频播放情况
const handleRenew = () => {if (currentTime.value > 0) {let params = {lessonsId: takeInfo.value.catalogueId,seconds: parseInt(currentTime.value)}defHttp.post('更新学习进度接口', params).then(data => {if (!data.Success) {message.error(`${data.Message}`)}})}}//播放视频时,开启定时器 记录视频播放情况,5秒每次
const onPlay = () => {isPlay.value = truerenew.value = setInterval(() => {handleRenew()}, 5000);
}//点击暂停视频,记录当前播放情况
const onPause = () => {isPlay.value = falseclearInterval(renew.value);handleRenew()
}//拉取进度条事件,重新记录当前播放情况
const seeked = () => {if (currentTime.value != 0) {handleRenew()}
}
//空方法,主要是阻止点击视频右键弹框时
const menuPlayer = () => {}
//暴露初始方法,让组件在每次更新时,重新设置参数
defineExpose({initData
})</script>
<style lang="less" scoped>
.videoBox {cursor: pointer;.videoTitleBox {display: flex;justify-content: space-between;align-items: center;.videoTitle {font-size: 14px;color: rgba(102, 102, 102, 0.8);}.videoCopy {border: 1px solid #D03E2C;padding: 4px 10px;border-radius: 4px;}}.videoStyle {margin-top: 10px;}
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/292095.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

k8s的pod访问service的方式

背景 在k8s中容器访问某个service服务时有两种方式&#xff0c;一种是把每个要访问的service的ip注入到客户端pod的环境变量中&#xff0c;另一种是客户端pod先通过DNS服务器查找对应service的ip地址&#xff0c;然后在通过这个service ip地址访问对应的service服务 pod客户端…

Hive on Spark 配置

目录 1 Hive 引擎简介2 Hive on Spark 配置2.1 在 Hive 所在节点部署 Spark2.2 在hive中创建spark配置文件2.3 向 HDFS上传Spark纯净版 jar 包2.4 修改hive-site.xml文件2.5 Hive on Spark测试2.6 报错 1 Hive 引擎简介 Hive引擎包括&#xff1a;MR&#xff08;默认&#xff09…

Mistral 7B v0.2 基础模型开源,大模型微调实践来了

Mistral AI在3月24日突然发布并开源了 Mistral 7B v0.2模型&#xff0c;有如下几个特点&#xff1a; 和上一代Mistral v0.1版本相比&#xff0c;上下文窗口长度从8k提升到32k&#xff0c;上下文窗口&#xff08;context window&#xff09;是指语言模型在进行预测或生成文本时&…

竞赛 python+深度学习+opencv实现植物识别算法系统

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 &#x1f6a9; 基于深度学习的植物识别算法研究与实现 &#x1f947;学长这里给一个题目综合评分(每项满分5分) 难度系数&#xff1a;4分工作量&#xff1a;4分创新点&#xff1a;4分 &#x1f9ff; 更多…

jupyter 设置工作目录

本博客主要介绍&#xff1a; 如何为jupyter设置工作目录 1.打开 anaconda prompt , 执行 jupyter notebook --generate-config 执行这个命令后会生成一个配置文件 2. 打开jupyter_notebook_config.py文件编辑 搜索notebook_dir&#xff0c;把这行代码的注释取消&#xff0c;…

Java学习笔记(23)

多线程 并发 并行 多线程实现方式 1.继承Thread类 自己创建一个类extends thread类 Start方法开启线程&#xff0c;自动执行重写之后的run方法 2.实现runable接口 自己创建一个类implements runnable Myrun不能直接使用getname方法&#xff0c;因为这个方法是thread类的方法…

win11 环境配置 之 Jmeter(JDK17版本)

一、安装 JDK 1. 安装 jdk 截至当前最新时间&#xff1a; 2024.3.27 jdk最新的版本 是 官网下载地址&#xff1a; https://www.oracle.com/java/technologies/downloads/ 建议下载 jdk17 另存为到该电脑的 D 盘下&#xff0c;新建jdk文件夹 开始安装到 jdk 文件夹下 2. 配…

C#基础知识总结

C语言、C和C#的区别 ✔ 面向对象编程&#xff08;OOP&#xff09;&#xff1a; C 是一种过程化的编程语言&#xff0c;它不直接支持面向对象编程。然而&#xff0c;C 是一种支持 OOP 的 C 的超集&#xff0c;它引入了类、对象、继承、多态等概念。C# 是完全面向对象的&#xff…

neo4j相同查询语句一次查询特慢再次查询比较快。

现象&#xff1a; neo4j相同查询语句一次查询特慢再次查询比较快。 分析&#xff1a; 查询语句 //查询同名方法match(path:Method) where id(path) in [244333030] and NOT path:Constructor//是rpc的方法match(rpc_method:Method)<-[:DECLARES]-(rpc_method_cls:Class) -…

实现ls -l 功能,index,rindex函数的使用

index(); rindex();----------------------------------------------------------------- index第一次遇到字符c&#xff0c;rindex最后一次遇到字符c&#xff0c;返回值都是从那个位置开始往后的字符串地址 #include <stdio.h> #include <sys/types.h> #include &…

【2023】kafka入门学习与使用(kafka-2)

目录&#x1f4bb; 一、基本介绍1、产生背景2、 消息队列介绍2.1、消息队列的本质作用2.2、消息队列的使用场景2.3、消息队列的两种模式2.4、消息队列选型&#xff1a; 二、kafka组件1、核心组件概念2、架构3、基本使用3.1、消费消息3.2、单播和多播消息的实现 4、主题和分区4.…

阿里云2核4G服务器租用价格_30元3个月_165元一年_199元

阿里云2核4G服务器租用优惠价格&#xff0c;轻量2核4G服务器165元一年、u1服务器2核4G5M带宽199元一年、云服务器e实例30元3个月&#xff0c;活动链接 aliyunfuwuqi.com/go/aliyun 活动链接如下图&#xff1a; 阿里云2核4G服务器优惠价格 轻量应用服务器2核2G4M带宽、60GB高效…

智慧城市数字孪生,综合治理一屏统览

现代城市作为一个复杂系统&#xff0c;牵一发而动全身&#xff0c;城市化进程中产生新的矛盾和社会问题都会影响整个城市系统的正常运转。智慧城市是应对这些问题的策略之一。城市工作要树立系统思维&#xff0c;从构成城市诸多要素、结构、功能等方面入手&#xff0c;系统推进…

Python面对对象 - 类的反射机制

Python面对对象类的反射机制是面向对象编程语言中比较重要的功能&#xff0c;可以动态获取对象信息以及动态调用对象。通过字符串形式的类名或属性来访问对应类或属性。 一、对象的反射 1. getattr 获取指定字符串名称的对象属性、方法&#xff1a; 当访问的属性不存在时&#…

微服务(基础篇-007-RabbitMQ)

目录 初识MQ(1) 同步通讯&#xff08;1.1&#xff09; 异步通讯&#xff08;1.2&#xff09; MQ常见框架&#xff08;1.3&#xff09; RabbitMQ快速入门(2) RabbitMQ概述和安装&#xff08;2.1&#xff09; 常见消息模型&#xff08;2.2&#xff09; 快速入门&#xff…

分布式理论:CAP理论 BASE理论

文章目录 1. CAP定理1.1 一致性1.3 分区容错1.4 矛盾 2. BASE理论3. 解决分布式事务的思路4. 扩展 解决分布式事务问题&#xff0c;需要一些分布式系统的基础知识作为理论指导。 1. CAP定理 Consistency(一致性): 用户访问分布式系统中的任意节点&#xff0c;得到的数据必须一…

【opencv】教程代码 —features2D(2)

使用SURF算法检测两幅图关键点后暴力匹配 SURF特征检测 使用SURF&#xff08;Speeded Up Robust Features&#xff09;算法来检测两张图像之间的关键点&#xff0c;并使用FLANN&#xff08;Fast Library for Approximate Nearest Neighbors&#xff09;基于特征描述符向量进行匹…

Windows中忘记MySQL ROOT密码的解决方法

在需要ROOT身份登录MySQL但又忘记密码时&#xff0c;可以先已管理员身份运行cmd命令窗口,输入以下命令停止MySQL服务 net stop mysql 随后cd到MySQL安装目录下的bin目录下 D: //我的安装在D盘 cd D:\MySQL\bin 使用跳过权限验证的方式起启动MySQL mysqld --console --skip-g…

跨境电商IP防关联是什么?有什么作用?

做跨境电商的朋友应该都知道IP防关联这个词,那么为何IP需要防关联呢&#xff1f;今天为大家来解答这个问题。 跨境电商IP防关联是指在跨境电商运营中&#xff0c;通过采取一系列技术手段&#xff0c;确保每个跨境电商账号使用独立的IP地址&#xff0c;以避免账号之间因为IP地址…

搜索与图论——Kruskal算法求最小生成树

kruskal算法相比prim算法思路简单&#xff0c;不用处理边界问题&#xff0c;不用堆优化&#xff0c;所以一般稀疏图都用Kruskal。 Kruskal算法时间复杂度O(mlogm) 每条边存结构体里&#xff0c;排序需要在结构体里重载小于号 判断a&#xff0c;b点是否连通以及将点假如集合中…