【音视频】 视频的播放和暂停,当播放到末尾时触发 ended 事件,循环播放,播放速度
video 也可以 播放 MP3 音频,当不想让 视频显示出来的话,可以 给 video 设置宽和高 1rpx ,不可以隐藏
<template><view class="form2box"><u-navbar @leftClick="leftClick"><view slot="left"><image src="@/static/img/fanhui.png" mode="" class="u-w-56 u-h-56" ></image></view></u-navbar><view class="content"><video id="myVideo" class="u-w-714"autoplay:style="{'height':winheight+'px'}" :src="videosrc"object-fit='cover':controls='true':show-fullscreen-btn='false':show-center-play-btn='false':show-play-btn='false':loop='loop'@ended='endedFun'></video><!-- 暂停 图标TODO..--><image src="@/static/img/zan1.png" mode="" class="anniu" @click="playFun(1)" v-if="item == 0"></image><!-- 播放 --><image src="@/static/img/you.png" mode="" class="anniu" @click="playFun(0)" v-if="item == 1"></image> </view><view class="fixbox"><!-- 图标TODO.. --><view class="flex_col flex_between" @click="loopFun"><image src="../../static/img/zan1.png" mode="" class="u-w-134 u-h-134" v-if="loop"></image><image src="../../static/img/xunhuan.png" mode="" class="u-w-134 u-h-134" v-else></image><view class="text"> {{loop ? '暂停' : '循环播放'}}</view></view><view class="you "><view class="scrollbox" v-if="scrollShow"><view v-for="(item,i) in timeList" :key="i"class="u-m-b-10":class="item.choose ? 'ac' :''"@click="timeFun(i)">{{item.time}}s</view></view><view class="flex_col flex_between" @click="scrollShow=!scrollShow"><view class="miao">{{time}}s</view><view class="text">间隔距离</view></view></view></view></view>
</template><script>// import {// xxx// } from "@/api/index/index.js"export default {components: {},data() {return {winheight:0,item:1, // 1默认播放 0暂停videosrc:'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4', // 视频videoContext:'',loop:true, // 是否循环播放 默认true是scrollShow:false, // 时间间隔默认不显示falsetimeList:[{choose:false,time:'1.0'},{choose:false,time:'1.5'},{choose:false,time:'2.0'},{choose:true,time:'2.5'},{choose:false,time:'3.0'},{choose:false,time:'3.5'},{choose:false,time:'4.0'},{choose:false,time:'4.5'},{choose:false,time:'5.0'},],time:'2.5' // 时间间隔 默认2.5s}},onLoad(option) {let that = this;uni.getSystemInfo({success: function (res) {// deviceOrientation获取到设备方向,横屏还是竖屏that.winheight = res.windowHeight - 240;}});this.videoContext = uni.createVideoContext("myVideo", this);// 播放速度// this.videoContext.playbackRate(Number(2.0))},methods: {playFun(num){this.item = num;if(num == 1){console.log('播放');this.$nextTick(() => {this.videoContext.play();});} else {console.log('暂停');this.$nextTick(() => {this.videoContext.pause();});}},// 是否循环播放loopFun(){this.loop = !this.loop;console.log(this.loop,'循环播放')if(this.item == 1 &&this.loop){this.videoContext.play();}},// 选中 时间间隔,自动默认循环和开始播放timeFun(i){this.timeList.forEach((item,index) => {if(i == index){item.choose = true;this.time = item.time;this.scrollShow = false;this.loop = true;this.item = 1;} else {item.choose = false;}});},// 当播放到末尾时触发 ended 事件,先暂停再延迟多长时间重新播放endedFun(){let that = this;let a = Number(this.time)*1000;this.$nextTick(() => {this.videoContext.pause();});setTimeout(function() {if(that.item == 1 && that.loop){console.log('延迟时间开始播放了',a);that.videoContext.play();}}, a);},leftClick(){uni.navigateBack();}},}
</script><style lang='scss'>page{background: #F8F8F8;}</style>
<style lang='scss' scoped>.form2box{.content{padding: 0 18rpx;box-sizing: border-box;width:750rpx;position: relative;.anniu{position: absolute;bottom: -107rpx;left: 50%;transform: translateX(-50%);width: 214rpx;height: 214rpx;}}.fixbox{position: fixed;bottom: 100rpx;width:750rpx;box-sizing: border-box;background: #FAFAFA;display: flex;align-items: center;justify-content: space-around;.miao{width: 134rpx;height:134rpx;line-height: 134rpx;text-align: center;color: #B0B0B0;font-size: 33.33rpx;font-family: MicrosoftYaHei;}.text{margin-top: 25rpx;font-family: Adobe Heiti Std R;font-size: 25rpx;color: #000000;}.you{position: relative;.scrollbox{box-sizing: border-box;position: absolute;top: -385rpx;left: -15rpx;background-color: #fff;width: 248rpx;border: 2rpx solid #000000;color:#B0B0B0;font-size: 25rpx;font-family: MicrosoftYaHei;padding: 20rpx 25rpx 0;.ac{color: #000000;}}}}}
</style>
相关文章:

【音视频】 视频的播放和暂停,当播放到末尾时触发 ended 事件,循环播放,播放速度
video 也可以 播放 MP3 音频,当不想让 视频显示出来的话,可以 给 video 设置宽和高 1rpx ,不可以隐藏 <template><view class"form2box"><u-navbar leftClick"leftClick"><view slot"left&q…...

Python数据分析高薪实战第一天 python基础与项目环境搭建
开篇词 数据赋能未来,Python 势不可挡 互联网公司从红利下的爆发期,进入新的精细化发展阶段,亟须深入分析与挖掘业务与数据价值,从而找到新的增长点突破现有增长瓶颈。各行各业的数据分析需求井喷,数据分析人才成为争…...

pandas数据分析——groupby得到分组后的数据
groupbyagg分组聚合对数据字段进行合并拼接 Pandas怎样实现groupby聚合后字符串列的合并(四十) groupby得到分组后的数据 pandas—groupby如何得到分组里的数据 date_range补齐缺失日期 在处理时间序列的数据中,有时候会遇到有些日期的数…...

Android studio 软件git使用
在 test 分支添加的方法 , 现在切换到 master分支 总共 2 个分支 , 当前的分支是 test 出现了 先试一下 force checkout , 尝试之后发现 , 你更改没有带过来 , 以为哪个类在master分支没有 , 所以这边也没有 , 切回分支 test 发现之前的跟改没有 , 这样即可以找回 继续切换…...

通过C实现sqlite3操作,导入电子词典
#include <stdio.h> #include <string.h> #include <stdlib.h> #include <sqlite3.h> int main(int argc, const char *argv[]) {//创建并打开一个数据库sqlite3 *db NULL;if(sqlite3_open("./dict.db",&db) ! SQLITE_OK){printf("…...

K8S集群中使用JDOS KMS服务对敏感数据安全加密 | 京东云技术团队
基本概念 KMS,Key Management Service,即密钥管理服务,在K8S集群中,以驱动和插件的形式启用对Secret,Configmap进行加密。以保护敏感数据, 驱动和插件需要使用者按照需求进行定制和实现自己的KMS插件&…...
SpringBoot+quartz实现定时任务的创建、删除、查询操作
1、在pom.xml文件中导入quartz的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-quartz</artifactId></dependency> 2、配置quartz的数据源等操作 package com.train.batch.config;imp…...

Oracle的学习心得和知识总结(二十八)|Oracle数据库数据库回放功能之论文二翻译及学习
目录结构 注:提前言明 本文借鉴了以下博主、书籍或网站的内容,其列表如下: 1、参考书籍:《Oracle Database SQL Language Reference》 2、参考书籍:《PostgreSQL中文手册》 3、EDB Postgres Advanced Server User Gui…...
排序算法:归并排序
约翰冯诺伊曼在 1945 年提出了归并排序。在讲解归并排序之前,我们先一起思考一个问题:如何将两个有序的列表合并成一个有序的列表? 将两个有序的列表合并成一个有序的列表 这太简单了,笔者首先想到的思路就是,将两个列…...
Hbase-技术文档-spring-boot整合使用hbase--简单操作增删改查--提供封装高可用的模版类
使用spring-boot项目来整合使用hbase。 引入依赖 <dependency><groupId>org.apache.hbase</groupId><artifactId>hbase-client</artifactId><version>2.4.3</version> </dependency> 依赖声明表示将把Apache HBase客户端库…...

基于Pytorch的神经网络部分自定义设计
一、基础概念(学习笔记) (1)训练误差和泛化误差[1] 本质上,优化和深度学习的目标是根本不同的。前者主要关注的是最小化目标,后者则关注在给定有限数据量的情况下寻找合适的模型。训练误差和泛化误差通常不…...
持续更新串联记忆English words
(一)这是一组关于“服装搭配”的单词。通过在记忆中检索,回忆起隐藏的信息吧~ >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>今日单词>>&…...
postgresql 内核源码分析 btree索引的增删查代码基本原理流程分析,索引膨胀的原因在这里
B-Tree索引代码流程分析 专栏内容: postgresql内核源码分析手写数据库toadb并发编程 开源贡献: toadb开源库 个人主页:我的主页 管理社区:开源数据库 座右铭:天行健,君子以自强不息;地势坤&…...

详细了解G1、了解G1、G1垃圾收集器详解、G1垃圾回收器简单调优
4.详细了解G1: 4.1.一:什么是垃圾回收 4.2.了解G1 4.3.G1 Yong GC 4.4.G1 Mix GC 4.5.三色标记算法 4.6.调优实践 5.G1垃圾收集器详解 5.1.G1垃圾收集器 5.2.G1的堆内存划分 5.3.G1的运行过程 5.4.三色标记 5.4.1.漏标问题 5.5.记忆集与卡表 5.6.安全点与…...
vue项目中 package.json 详解
在 Vue 项目中,package.json 是一个重要的配置文件,它包含了项目的名称、版本、作者、依赖等信息。下面是一份详细的 Vue 项目 package.json 配置说明: 1.name:项目的名称,用于标识项目,例如:&q…...

为什么要进行管网水位监测,管网水位监测的作用是什么
管网水位监测是城市排水系统管理的重要手段,对于保障城市排水设施安全运行和提升城市管理水平具有重要意义。通过对排水管网的水位进行实时监测和分析,能够及时发现问题并采取措施,提高排水系统的运行效率和管理水平。本文将详细介绍为什么要…...
webpack学习笔记
1. webpack基本概念 webpack: JavaScript 应用程序的静态模块打包器,是目前最为流行的JavaScript打包工具之一。webpack会以一个或多个js文件为入口,递归检查每个js模块的依赖,从而构建一个依赖关系图,然后依据该关系…...

解析代理IP在跨境电商和社媒营销中的关键作用
跨境电商和社媒营销领域的从业者深知,代理IP的价值愈发凸显。在推广营销的过程中,频繁遇到因IP关联而封禁账号的情况,或因使用不安全IP而导致异常问题。 这些问题促使人们开始高度重视代理IP的作用。但实际上,代理IP究竟是何物&a…...

Unity 之 Start 与Update 方法的区别
文章目录 当谈论Unity中的 Start和 Update方法时,我们实际上是在讨论MonoBehaviour类中的两个常用方法,用于编写游戏逻辑。这两个方法在不同的时机被调用,因此您可以根据需要选择在哪个方法中编写特定的代码。 Start 方法: Start…...
Spring Boot中如何编写优雅的单元测试
单元测试是指对软件中的最小可测试单元进行检查和验证。在Java中,单元测试的最小单元是类。通过编写针对类或方法的小段代码,来检验被测代码是否符合预期结果或行为。执行单元测试可以帮助开发者验证代码是否正确实现了功能需求,以及是否能够…...

练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了: 这一篇我们开始讲: 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下: 一、场景操作步骤 操作步…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

vscode(仍待补充)
写于2025 6.9 主包将加入vscode这个更权威的圈子 vscode的基本使用 侧边栏 vscode还能连接ssh? debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...
【解密LSTM、GRU如何解决传统RNN梯度消失问题】
解密LSTM与GRU:如何让RNN变得更聪明? 在深度学习的世界里,循环神经网络(RNN)以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而,传统RNN存在的一个严重问题——梯度消失&#…...

【机器视觉】单目测距——运动结构恢复
ps:图是随便找的,为了凑个封面 前言 在前面对光流法进行进一步改进,希望将2D光流推广至3D场景流时,发现2D转3D过程中存在尺度歧义问题,需要补全摄像头拍摄图像中缺失的深度信息,否则解空间不收敛…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成
厌倦手动写WordPress文章?AI自动生成,效率提升10倍! 支持多语言、自动配图、定时发布,让内容创作更轻松! AI内容生成 → 不想每天写文章?AI一键生成高质量内容!多语言支持 → 跨境电商必备&am…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...
Mysql8 忘记密码重置,以及问题解决
1.使用免密登录 找到配置MySQL文件,我的文件路径是/etc/mysql/my.cnf,有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...