小程序点击图片实现自动播放视频

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

源码:

<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>

CSS:

/* 边框 */
.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;
}

JS:

// 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.id
 this.setData({
  _index: _index
 })
 //停止正在播放的视频
 var videoContextPrev = wx.createVideoContext(this.data._index)
 videoContextPrev.stop();

 setTimeout(function(){
 //将点击视频进行播放
  var videoContext = wx.createVideoContext(_index)
  videoContext.play();
 },500)
 },
})

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例

    本文介绍了微信小程序的开发,主要包括图片.录音.音频播放.音乐播放.视频.文件,具体如下: 图片: wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照. OBJECT参数说明: 注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到. 示例代码: wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'],

  • 微信小程序 vidao实现视频播放和弹幕的功能

    微信小程序 vidao视频播放及弹幕的功能的实现. vidao 我现在看到的官方文档是不带danmu(弹幕)属性的,之前是有的,不过现在这个属性还可以生效.控制视频的状态可以根据video标签的唯一id得到一个对象实例.video组件并不具备action属性,不能通过action来控制. .wxml <view class="section tc"> <video src="{{src}}" controls ></video>

  • 小程序视频列表中视频的播放与停止的示例代码

    效果类似一条视频的小程序,就是视频列表,然后每个视频上覆盖一张视频的封面图,点击封面图的播放按钮视频播放,点击别的视频的时候,停止播放当前视频,播放点击的视频.差不多是这样: 一条视频 首先上代码: wxml <block wx:for="{{videoList}}"> <view class='video-item'> <view class='wrapper'> <video class='video-video' wx:if='{{ind

  • 微信小程序使用video组件播放视频功能示例【附源码下载】

    本文实例讲述了微信小程序使用video组件播放视频功能.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 复制代码 代码如下: <video src="../../pages/video/movie.mp4" binderror="videoErrorCallback"></video> ② index.js Page({ data:{ // text:"这是一个页面" }, vide

  • 在小程序中使用腾讯视频插件播放教程视频的方法

    在我们开发的一个小程序里面,为了给客户了解一些教程内容,我们需要增加一个在线播放视频的模块,考虑过直接使用视频组件播放服务器上的视频不成功,因此使用腾讯视频插件来播放最终测试成功.本篇随笔介绍微信小程序使用视频组件和腾讯视频插件两种方式的解决方式,并重点介绍视频插件方式的处理过程. 1.使用视频组件播放视频 由于是我们自己录制的视频内容,本来想直接通过视频组件来播放自己服务器上的视频,理想很丰满,现实很骨感,不知道是视频内部比较大的原因还是腾讯禁止,虽然在开发工具上测试的时候可以播放,不过最终发

  • 微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例

    把录音的模块尝试过之后就想着微信小程序的视频播放会不会更有趣? 果然,微信小程序视频自带弹幕.是不是很爽,跟我一起来看看. 先上gif: 再上几张图: 1.视频播放器 2.选择弹幕颜色 3.弹幕来了... 1.视频播放器 微信已经封装的非常好.我这里只用了很简单的几个属性 由于以前没做过弹幕,看到danmu-list就激动了.而且只需要将弹幕内容加入集合即可. 弹幕列表的元素: { text: '第 1s 出现的红色弹幕',//文本 color: '#ff0000',//颜色 time: 1//

  • 小程序点击图片实现自动播放视频

    通过列表的点击事件自动播放列表对应的视频,同时停止上一个视频的播放. 源码: <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> <tex

  • 微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能

    1.多张图片循环渲染后预览.保存.识别带参数二维码 wxml页面 <view wx:for="{{imgalist}}" wx:for-item="image" class="previewimg"> <image src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>

  • 小程序点击图片实现png转jpg

    这篇文章主要介绍了小程序点击图片实现png转jpg,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 页面数据初始化添加参数:isSignCanvassShow<br><br>//通过canvas将图片转为jpg,使图片生成白色底便于查看预览 //list为原图片数组列表,index表示当前图片下标, //imgList表示已经通过canvas转化的图片列表 trasformImgType(list,index,imgList){ t

  • 微信小程序实现自动播放视频模仿gif动图效果实例

    需求背景: 在小程序页面插入gif动态图,但gif图一般体积比较大,转而用自动播放视频的模式来模拟gif图的效果,丰富页面展示.自动播放的视频,无控制条,无声音,自动循环播放. 技术难点: 因为微信小程序在同一个页面,存在多个视频时(建议不超过3个视频),会出现卡顿甚至闪退的情况. developers.weixin.qq.com/community/d- 方案: 参考小程序社区讨论方案,当视频未出现在屏幕可视区域时,用图片占位,出现在屏幕中,把图片替换成视频,并且自动播放. 代码注意点: vi

  • JavaScript onclick点击事件-点击切换图片且自动播放

    在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片(翻到最后一张自动切换到第一张).用户点击自动播放,每隔两秒自动切换(类似轮播图),点击停止播放,就终止播放,运用了定时器.先看效果图.  下面是完整的代码: <body>     <img id="img" src="./img/0.webp" alt=""><br>     //给四个button加上点击事件     <butto

  • JavaScript onclick点击事件-点击切换图片且自动播放

    在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片(翻到最后一张自动切换到第一张).用户点击自动播放,每隔两秒自动切换(类似轮播图),点击停止播放,就终止播放,运用了定时器.先看效果图.  下面是完整的代码: <body>     <img id="img" src="./img/0.webp" alt=""><br>     //给四个button加上点击事件     <butto

  • js实现点击切换和自动播放的轮播图

    本文实例为大家分享了js实现点击切换和自动播放的轮播图,供大家参考,具体内容如下 轮播图案例 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0"&

  • 微信小程序 点击控件后选中其它反选实例详解

    微信小程序 点击控件后选中其它反选实例详解 前言: 如果需要实现进来进行给按钮加上买一送一的样式,或者单击就选中单个按钮,只能靠css结合js进行控制了,小程序暂时没有这样的控件. 实现效果图: 微信小程序进来的时候自动进行按钮样式的初始化,这个需要一个字段做判断,加上正则表达式wxml文件: <block wx:for="{{liuliangItems}}"> <block wx:if="{{item.one2one == 1}}"> &l

  • 微信小程序 chooseImage选择图片或者拍照

    微信小程序 chooseImage选择图片或者拍照 一.使用API wx.chooseImage(OBJECT) var util = require('../../utils/util.js') Page({ data:{ src:"../image/pic4.jpg" }, gotoShow: function(){var _this = this wx.chooseImage({ count: 9, // 最多可以选择的图片张数,默认9 sizeType: ['original'

  • 微信小程序动态设置图片大小的方法

    我们都知道微信小程序的组件image是用来显示图片的,它有一下几个属性: 1.src              图片资源地址 2.mode          图片裁剪.缩放的模式 3.binderror     当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: 'something wrong'} 4.bindload     当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height

随机推荐