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

【音视频】 视频的播放和暂停,当播放到末尾时触发 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 音频&#xff0c;当不想让 视频显示出来的话&#xff0c;可以 给 video 设置宽和高 1rpx &#xff0c;不可以隐藏 <template><view class"form2box"><u-navbar leftClick"leftClick"><view slot"left&q…...

Python数据分析高薪实战第一天 python基础与项目环境搭建

开篇词 数据赋能未来&#xff0c;Python 势不可挡 互联网公司从红利下的爆发期&#xff0c;进入新的精细化发展阶段&#xff0c;亟须深入分析与挖掘业务与数据价值&#xff0c;从而找到新的增长点突破现有增长瓶颈。各行各业的数据分析需求井喷&#xff0c;数据分析人才成为争…...

pandas数据分析——groupby得到分组后的数据

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

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&#xff0c;Key Management Service&#xff0c;即密钥管理服务&#xff0c;在K8S集群中&#xff0c;以驱动和插件的形式启用对Secret&#xff0c;Configmap进行加密。以保护敏感数据&#xff0c; 驱动和插件需要使用者按照需求进行定制和实现自己的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数据库数据库回放功能之论文二翻译及学习

目录结构 注&#xff1a;提前言明 本文借鉴了以下博主、书籍或网站的内容&#xff0c;其列表如下&#xff1a; 1、参考书籍&#xff1a;《Oracle Database SQL Language Reference》 2、参考书籍&#xff1a;《PostgreSQL中文手册》 3、EDB Postgres Advanced Server User Gui…...

排序算法:归并排序

约翰冯诺伊曼在 1945 年提出了归并排序。在讲解归并排序之前&#xff0c;我们先一起思考一个问题&#xff1a;如何将两个有序的列表合并成一个有序的列表&#xff1f; 将两个有序的列表合并成一个有序的列表 这太简单了&#xff0c;笔者首先想到的思路就是&#xff0c;将两个列…...

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的神经网络部分自定义设计

一、基础概念&#xff08;学习笔记&#xff09; &#xff08;1&#xff09;训练误差和泛化误差[1] 本质上&#xff0c;优化和深度学习的目标是根本不同的。前者主要关注的是最小化目标&#xff0c;后者则关注在给定有限数据量的情况下寻找合适的模型。训练误差和泛化误差通常不…...

持续更新串联记忆English words

&#xff08;一&#xff09;这是一组关于“服装搭配”的单词。通过在记忆中检索&#xff0c;回忆起隐藏的信息吧~ >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>今日单词>>&…...

postgresql 内核源码分析 btree索引的增删查代码基本原理流程分析,索引膨胀的原因在这里

B-Tree索引代码流程分析 ​专栏内容&#xff1a; postgresql内核源码分析手写数据库toadb并发编程 ​开源贡献&#xff1a; toadb开源库 个人主页&#xff1a;我的主页 管理社区&#xff1a;开源数据库 座右铭&#xff1a;天行健&#xff0c;君子以自强不息&#xff1b;地势坤&…...

详细了解G1、了解G1、G1垃圾收集器详解、G1垃圾回收器简单调优

4.详细了解G1&#xff1a; 4.1.一&#xff1a;什么是垃圾回收 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 项目中&#xff0c;package.json 是一个重要的配置文件&#xff0c;它包含了项目的名称、版本、作者、依赖等信息。下面是一份详细的 Vue 项目 package.json 配置说明&#xff1a; 1.name&#xff1a;项目的名称&#xff0c;用于标识项目&#xff0c;例如&#xff1a;&q…...

为什么要进行管网水位监测,管网水位监测的作用是什么

管网水位监测是城市排水系统管理的重要手段&#xff0c;对于保障城市排水设施安全运行和提升城市管理水平具有重要意义。通过对排水管网的水位进行实时监测和分析&#xff0c;能够及时发现问题并采取措施&#xff0c;提高排水系统的运行效率和管理水平。本文将详细介绍为什么要…...

webpack学习笔记

1. webpack基本概念 webpack&#xff1a; JavaScript 应用程序的静态模块打包器&#xff0c;是目前最为流行的JavaScript打包工具之一。webpack会以一个或多个js文件为入口&#xff0c;递归检查每个js模块的依赖&#xff0c;从而构建一个依赖关系图&#xff0c;然后依据该关系…...

解析代理IP在跨境电商和社媒营销中的关键作用

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

Unity 之 Start 与Update 方法的区别

文章目录 当谈论Unity中的 Start和 Update方法时&#xff0c;我们实际上是在讨论MonoBehaviour类中的两个常用方法&#xff0c;用于编写游戏逻辑。这两个方法在不同的时机被调用&#xff0c;因此您可以根据需要选择在哪个方法中编写特定的代码。 Start 方法&#xff1a; Start…...

Spring Boot中如何编写优雅的单元测试

单元测试是指对软件中的最小可测试单元进行检查和验证。在Java中&#xff0c;单元测试的最小单元是类。通过编写针对类或方法的小段代码&#xff0c;来检验被测代码是否符合预期结果或行为。执行单元测试可以帮助开发者验证代码是否正确实现了功能需求&#xff0c;以及是否能够…...

练习(含atoi的模拟实现,自定义类型等练习)

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 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&#xff1f; debug时使用的launch文件 1.task.json {"tasks": [{"type": "cppbuild","label": "C/C: gcc.exe 生成活动文件"…...

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?

论文网址&#xff1a;pdf 英文是纯手打的&#xff01;论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误&#xff0c;若有发现欢迎评论指正&#xff01;文章偏向于笔记&#xff0c;谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)

文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

Mysql8 忘记密码重置,以及问题解决

1.使用免密登录 找到配置MySQL文件&#xff0c;我的文件路径是/etc/mysql/my.cnf&#xff0c;有的人的是/etc/mysql/mysql.cnf 在里最后加入 skip-grant-tables重启MySQL服务 service mysql restartShutting down MySQL… SUCCESS! Starting MySQL… SUCCESS! 重启成功 2.登…...