当前位置： 首页 > 编程日记 > 正文

小程序点击图片自动播放视频，停止上一个视频播放

编程日记 2024-08-10 07:40:00

微信小程序开发交流qq群   173683895

   承接微信小程序开发。扫码加微信。

通过列表的点击事件自动播放列表对应的视频，同时停止上一个视频的播放

源码：

<view><view class='vv' wx:for='{{vedio_data}}' wx:key=''><view class='block' style='margin-left:20rpx;'><image src='/img/1.png' class='img1' style='margin-left:20rpx'></image><text class='text'>{{item.title}} </text><view id="{{index}}" class="cover" style="display: {{ _index == index ? 'none' : 'block' }};" bindtap="videoPlay" ><!-- 视频图层 --><image class="videoVideo2" src="{{item.img}}" mode="scaleToFill"><!-- 视频按钮 --><image class="videoPlay" src="/img/bf.png" mode="scaleToFill"></image></image></view></view><!-- 视频 --><video src="{{item.url}}" id="{{index}}" class='video' wx:if="{{_index == index}}" >
<!-- log --></video></view><view class='di'><image src='/img/qd.png' class='bottom'></image><text class='bottom_text'>敬请期待</text></view>
</view>

/* 边框 */
.vv {width: 700rpx;height: 530rpx;border-left: gainsboro 1px solid;border-right: gainsboro 1px solid;border-top: gainsboro 1px solid;margin-bottom: 80rpx;border-radius: 15rpx;overflow: hidden;position: relative;top: 40rpx;left: 20rpx;
}/* 小图标 */
.img1 {width: 36rpx;height: 28rpx;margin-top: 30rpx;
}/* 标题文字 */
.text {font-size: 28rpx;color: #585858;margin-left: 10rpx;
}/* 视频 */
.video {width: 100%;height: 450rpx;margin-top: 20rpx;border-bottom-left-radius: 15rpx;border-bottom-right-radius: 15rpx;
}
.videoVideo2 {width: 703rpx;height: 453rpx;position: absolute;top: 80rpx;left: 20rpx;z-index: 99;
}
.videoPlay{position: absolute;width: 80rpx;height: 80rpx;top:45%;left: 45%;margin: -30rpx 0 0 -30rpx;z-index: 100;
}/* 底部盒子 */
.bottom {width: 40rpx;height: 40rpx;
}/* 底部图片 */
.di {display: flex;flex-direction: row;padding: 60rpx 0rpx 100rpx 280rpx;
}/* 底部文字 */
.bottom_text {font-size: 34rpx;color: #d8d8d8;margin-left: 10rpx;
}

// pages/class/class.js
Page({/*** 页面的初始数据*/data: {videoPlay: null,vedio_data: [{title: '无13131（大班）',url: 'xxx',img: 'xxx',},{title: ' 如何23 1 、 2 、2423、4）',url: 'xxx',img: 'xxx'},{title: '温热碍',url: 'xxx',img:'xxx'},{title: '挑嘎嘎嘎输',url: 'xxx',img: 'xxx'},{title: '延伸挑战：运输圆球',url: 'xxx',img:'xxx'},]},// 点击cover播放，其它视频结束videoPlay: function (e) {var _index = e.currentTarget.idthis.setData({_index: _index})//停止正在播放的视频var videoContextPrev = wx.createVideoContext(this.data._index)videoContextPrev.stop();setTimeout(function(){//将点击视频进行播放var videoContext = wx.createVideoContext(_index)videoContext.play();},500)},
})

视频和图片地址就不提供了


https://www.dkcj.cn/info/13618.html

相关文章：

hitchhiker部署_Hitchhiker的React Router v4指南：无限远的递归路径！

hitchhiker部署Welcome to the third part of the Hitchhiker’s Guide to React Router v4. In this article we’re going to focus on recursive paths. If you’ve missed the first two parts, you can find part 1 here and part 2 here.欢迎阅读《 Hitchhiker React Rou…

编程日记2024/08/10 07:30:00

smbpasswd 和 pdbedit 的区别

smbpasswd 和 pdbedit 的区别 以前我们在windows上共享文件的话&#xff0c;只需右击要共享的文件夹然后选择共享相关的选项设置即可。然而如何实现windows和linux的文件共享呢&#xff1f;这就涉及到了samba服务了&#xff0c;这个软件配置起来也不难&#xff0c;使用也非常简…

编程日记2024/08/10 07:20:00

DB天气app冲刺二阶段第十一天（完结）

今天最后一天冲刺了&#xff0c;明天就不再冲刺了。。已经把所有的技术的问题还有设计的问题都弄好了吧应该说 至少目前来说是的。因为有的实现不了的或者需要耗费时间的已经果断舍弃了&#xff0c;然后需要完善的也都基本完善了。 现在还需要做的就是素材的收集整理。需要抽半…

编程日记2024/08/10 07:10:00

如何超越console.log并充分利用浏览器的调试控制台

by Gilad Dayagi通过吉拉德达亚吉 The console object is a very useful feature of browsers that has been around for many years. It provides access to the browser’s debugging console.Most web developers know how to print messages to the console using console…

编程日记2024/08/10 07:00:00

区域设置 ID (LCID) 表, 及获取方法

区域设置 ID (LCID) 表, 及获取方法 中国的区域设置 ID 是 2052, 如果经常打开微软软件的安装目录应该经常见到.获取很简单, 有现成的 API 函数: GetThreadLocale.beginShowMessage(IntToStr(GetThreadLocale)); //2052 end; 区域设置 ID (LCID) 表区域设置描述简写十六进制值十…

编程日记2024/08/10 06:50:00

E201700525-hm

skeleton n. 骨骼; &#xff08;建筑物等的&#xff09; 骨架; 梗概; 骨瘦如柴的人&#xff08;或动物&#xff09;;adj. 骨骼的; 骨瘦如柴的; 概略的; 基本的; cloud n. 云; 云状物; invoke vt. 乞灵&#xff0c;祈求; 提出或授引…以支持或证明; 召鬼; 借助;render …

编程日记2024/08/10 06:40:00

php不显示报错

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 error_reporting(E_ALL & ~E_NOTICE);

编程日记2024/08/10 06:30:00

致谢 开源开发者的贡献_对开源做出的贡献如何使我成为更好的开发人员，以及如何做到这一点...

致谢 开源开发者的贡献by Luciano Strika通过卢西亚诺斯特里卡(Luciano Strika) 对开源做出的贡献如何使我成为更好的开发人员&#xff0c;以及如何做到这一点 (How contributing to open source made me a better developer — and how you can do it, too) So you’ve been …

编程日记2024/08/10 06:20:00

欲精一行，必先通十行

将前端开发和服务器端开发做一个比较&#xff0c;前端开发没有服务器端开发“深”&#xff0c;服务器端开发没有前端开发“广”。经常听到做前端的同行抱怨需要学的东西太 多&#xff0c;东学一点西学一点&#xff0c;什么都会&#xff0c;但也什么都不精。很直接的结果就是沦为…

编程日记2024/08/10 06:10:00

LeetCode 228: Summary Ranges

Given a sorted integer array without duplicates, return the summary of its ranges. For example, given [0,1,2,4,5,7], return ["0->2","4->5","7"]. 代码要求对数组中的元素进行分段。 首先给出字符串格式化函数&#xff0c;假设be…

编程日记2024/08/10 06:00:00

JQ+ajax 提交表单不跳转页面

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 代码 <div class"apply_box"><h1>合作申请</h1><div class"apply_l"><input type"text" maxlength"20" id"name" name&q…

编程日记2024/08/10 05:50:00

node.js是开源的吗_为开源做贡献并不难：我为Node.js项目做贡献的旅程

node.js是开源的吗As a developer, you should consider contributing to open source software. Many of your potential employers will look favorably on these contributions.作为开发人员&#xff0c;您应该考虑为开源软件做贡献。 您的许多潜在雇主将对这些供款看好。 …

编程日记2024/08/10 05:40:00

超级简单的jquery轮播图demo

<!DOCTYPE html> <html><head><meta charset"UTF-8"><title>轮播图demo</title><script type"text/javascript" src"js/jquery-3.2.1.slim.js" ></script><link rel"stylesheet" …

编程日记2024/08/10 05:30:00

Mysql 操作技巧

复制表结构 表数据Mysql> create tables t2 like t1;Mysql> insert into t2 select * from t1; mysql 索引a、Alert Table 用来创建普通索引、Unique 唯一索引 (当前列数值不可重复) 或 Primary Key 主键索引Mysql> alter table table_name add index index_name(col…

编程日记2024/08/10 05:20:00

JS实现复制到剪切板效果

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta http-equiv"Content-Type" content"text/html; charsetutf-8" /><meta cha…

编程日记2024/08/10 05:10:00

如何管理多个Python版本和虚拟环境

Addition January 2019: If you are coming back to this blog after upgrading to macOS Mojave please see this github issue for a solution to the common pyenv ‘zlib not available’ problem.此外&#xff0c;2019年1月&#xff1a;如果在升级到macOS Mojave之后又回到…

编程日记2024/08/10 05:00:00

linux 下byte,char,unsigned char的区别

在linux中&#xff0c;对byte的定义为无符号char&#xff0c;而char默认为有符号char。 #ifndef BYTE #define BYTE unsigned char #endif以下ZZ百度知道&#xff1a; 在C中&#xff0c;默认的基础数据类型均为signed&#xff0c;现在我们以char为例&#xff0c;说明(signed) c…

编程日记2024/08/10 04:50:00

词法作用域和动态作用域

JavaScript采用的是词法作用域 1.词法作用域 即函数定义时&#xff0c;即确定的作用域。js中的作用域链&#xff0c;在函数声明时候&#xff0c;就已经确定了&#xff0c;无论函数在何处调用&#xff0c;其作用域变量的查找都是按照定义是包含关系去查找。 2.动态作用域 变量的…

编程日记2024/08/10 04:40:00

10-18 JS基础复习笔记

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 1.JS类型 Numbel String Boolean Symbol Null Undefined Object(Funtion,Array,Data,Regexp); 2.字符串转数字类型 "122" //122 var a 1 2; console.log(a) //3 3.null 和 u…

编程日记2024/08/10 04:30:00

vue.js crud_如何使用VS Code和ADO.NET使用ASP.NET Core执行CRUD操作

vue.js crud介绍 (Introduction) In this article we are going to create a web application using ASP.NET Core MVC with the help of Visual Studio Code and ADO.NET. We will be creating a sample Employee Record Management System and performing CRUD operations on…

编程日记2024/08/10 04:20:00

redis事物命令示例

命令示例&#xff1a; 1. 事务被正常执行&#xff1a;#在Shell命令行下执行Redis的客户端工具。/> redis-cli#在当前连接上启动一个新的事务。redis 127.0.0.1:6379>multiOK#执行事务中的第一条命令&#xff0c;从该命令的返回结果可以看出&#xff0c;该命令并没有立即执…

编程日记2024/08/10 04:10:00

JS 函数 函数递归

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 重要&#xff1a;函数也是对象&#xff0c;你可以给它们添加属性或者更改它们的属性。 函数内部对象&#xff1a;arguments 解析&#xff1a;函数实际上是访问了函数体中一个名为 arguments 的内部对象…

编程日记2024/08/10 04:00:00

swift设置启动图不现实_如何通过装饰房屋来开始在Swift中使用增强现实

swift设置启动图不现实by Ranadhir Dey由Ranadhir Dey 如何通过装饰房屋来开始在Swift中使用增强现实 (How to get started with augmented reality in Swift by decorating your home) If you’ve read my previous post, you already have a beautiful AR floor in your din…

编程日记2024/08/10 03:50:00

可用于nodejs的SuperAgent(ajax API)

简单示例&#xff1a; import request from superagent;//引用声明 request.post(api).withCredentials()//跨域.end((err, res) > {if (res.ok) {const json JSON.parse(res.text);} else {console.log(获取失败);}}); 1、get 方式 当使用get请求传递查询字符串的时候&…

编程日记2024/08/10 03:40:00

Java第四次实验

一、实验内容&#xff1a; 结对编程。运行TCP代码&#xff0c;结对进行&#xff0c;一人服务器&#xff0c;一人客户端&#xff1b;利用加解密代码包&#xff0c;编译运行代码&#xff0c;一人加密&#xff0c;一人解密&#xff1b; 集成代码&#xff0c;密后通过TCP发送。 二、…

编程日记2024/08/10 03:30:00

JS 面向对象编程之原型（prototype）

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 function Person(first, last) {this.first first;this.last last; } Person.prototype.fullName function() {return this.first this.last; } Person.prototype.fullNameReversed function() {…

编程日记2024/08/10 03:20:00

idea自动捕获_Smilefie：如何通过检测微笑来自动捕获自拍

idea自动捕获by Rishav Agarwal通过里沙夫阿加瓦尔 Smilefie&#xff1a;如何通过检测微笑来自动捕获自拍 (Smilefie: how you can auto-capture selfies by detecting a smile) Ten second takeaway: use Python and OpenCV to create an app that automatically captures a …

编程日记2024/08/10 03:10:00

hiho 1015 KMP算法 CF 625 B. War of the Corporations

#1015 : KMP算法 时间限制:1000ms单点时限:1000ms内存限制:256MB描述 小Hi和小Ho是一对好朋友&#xff0c;出生在信息化社会的他们对编程产生了莫大的兴趣&#xff0c;他们约定好互相帮助&#xff0c;在编程的学习道路上一同前进。 这一天&#xff0c;他们遇到了一只河蟹&#…

编程日记2024/08/10 03:00:00

React 组件绑定点击事件，并且传参完整Demo

微信小程序开发交流qq群 173683895 承接微信小程序开发。扫码加微信。 1.传数组下标给点击事件Demo&#xff1a; const A 65 // ASCII character codeclass Alphabet extends React.Component {constructor(props) {super(props);this.handleClick this.handleClick.bind…

编程日记2024/08/10 02:50:00

ScaleYViewPager

https://github.com/eltld/ScaleYViewPager 转载于:https://www.cnblogs.com/eustoma/p/4572925.html

编程日记2024/08/10 02:40:00