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

微信小程序video 点击自动全屏播放

在这里插入图片描述

//因为这个地址可能是图片也可能是视频  点击 图片可以预览,点击视频可放大全屏自动播放。 代码如下
<view v-else :class='{contentImg: x.picture.length==0}' style="margin-top: 10px;"v-for="(x1, y1) in x.picture" :key="y"><image v-if="imgType.includes(x.picture[y1].split('.').pop())" style="width: 217px;height: 167px; margin-top: 14px"  :src="x.picture[y1]" @click="yulan(x.picture,y)"></image><video  :id="'video_play'+x.id" v-else style="width: 217px;height: 167px; margin-top: 14px" @play="playVedio(x.id)" @fullscreenchange="fullscreenchange" :src="x.picture[y1]" :poster="x.capture_videos_img" controls   ></video></view><script>	methods: {				yulan(url,index){uni.previewImage({urls: url, // 图片地址,urls是数组格式current: index, // 选填:图片默认打开第一张;第一次打开的图片url地址success: function(res) {console.log("333",res)},fail: function(res) {console.log("22",res)},complete: function(res) {},})},playVedio(index){this.indexVideo=index;//此处需要注意一下,因为是for循环里边的视频或者图片吗,这里id要保持唯一,不然会出现无论点击哪一个都会播放同一个视频的情况。this.videoContext=uni.createVideoContext("video_play"+index,this);//进入全屏状态this.videoContext.requestFullScreen();},fullscreenchange(e) {if (!e.detail.fullScreen) {uni.createVideoContext('video_play'+this.indexVideo, this).pause();} }}<script>
http://www.lryc.cn/news/305234.html

相关文章:

  • MySQL基础面试问题(一)
  • 抖音爬虫批量视频提取功能介绍|抖音评论提取工具
  • mac真的安装不了vmware吗 mac如何安装crossover crossover序列号从哪里买 购买正版渠道
  • C语言-指针详解速成
  • C# RabbitMQ使用--动态更新
  • Unity资源加密解决方案
  • 使用 yarn 的时候,遇到 Error [ERR_REQUIRE_ESM]: require() of ES Module 怎么解决?
  • 多维时序 | Matlab实现基于VMD-DBO-BiLSTM、VMD-BiLSTM、BiLSTM的多变量时间序列预测
  • 实战营第四节笔记
  • 【网络】HTTPS协议原理
  • C#常识篇(一)
  • Linux使用C语言获取进程信息
  • tomcat通过JAVA_OPTS注入自定义变量 —— 筑梦之路
  • Linux——简单的Shell程序
  • 计算机网络-网络互联与互联网(一)
  • Android 解决后台服务麦克风无法录音问题
  • 【计网】TCP的三次握手四次挥手
  • android pdf框架-4,分析vudroid源码2
  • [算法沉淀记录] 排序算法 —— 希尔排序
  • conda 进入虚拟环境命令报错
  • 域名 SSL 证书信息解析 API 数据接口
  • 学习JAVA的第二天(基础)
  • 代码随想录算法训练营第二十七天|93.复原IP地址、78.子集、90.子集II
  • 【蓝桥备赛】字串简写
  • nios ii开发随笔
  • SpringBoot项目嵌入RabbitMQ
  • 提升网络质量:UDPspeeder 实现网络优化与提速
  • 为什么前端开发变得越来越复杂了?这可能是我们的错
  • VR系统的开发流程
  • 前端输入框校验限制不能输入中文