首页 > 其他分享 >uniapp 点击video全屏播放

uniapp 点击video全屏播放

时间:2023-10-08 16:00:24浏览次数:40  
标签:uniapp 全屏播放 代码 点击 video id

话不多说直接上代码
<video :id="item.id" @play="playFullscreen(item.id)" :src="$IMG_URL+item.video"></video>
不要写点击事件@click 不会生效的 要写@play播放事件 以上代码中由于作者需循环渲染video 故id是动态的 如果没有动态的需求也可以写死
playFullscreen(id) { uni.createVideoContext(id.toString(), this).requestFullScreen(); },
由于作者传过来的id为number类型 而此处又需要string类型的id名 故在此做了转换 各位按实际情况来就行 this参数写死 不需要动

————————记录于2023.10.08

标签:uniapp,全屏播放,代码,点击,video,id
From: https://www.cnblogs.com/silencesuzuka/p/17749412.html

相关文章

  • uniapp 输入框文本域(uni-easyinput)内容长度限制
    问题描述提示:uni-ui组件库中uni-easyinput输入框组件相关使用问题在使用uni-easyinput组件时,你会发现,默认情况下你输入内容的长度最大是140原因是,uni-easyinput组件内封装的maxlength属性,在不设置的情况下,默认值为140。我们可以通过maxlength属性,为使用的输入框限制其......
  • uniapp 使用z-paging 分页组件 写在头部插槽内的单选按钮无法点击
    这个问题是因为组件层级太低<z-pagingref="paging"v-model="dataList"@query="queryList"auto-show-back-to-top:empty-view-z-index="9999"class="paging">      <viewslot="top">         <vie......
  • Topaz Video AI:智能重塑视频画质,引领视觉体验升级 Mac+win版
    探索TopazVideoAI如何通过智能技术重塑您的视频画质,全面提升视觉体验。→→↓↓载TopazVideoAImac/win版TopazVideoAI是一款领先的智能视频修复软件,专为提升视频画质而生。通过对AI技术的深度集成,它可以帮助您将老旧、低分辨率的视频进行智能修复和增强,带来焕然一新的视......
  • uniapp微信小程序如何处理input输入空格问题?
    第一种方法用input组件自带的@input事件使用@input事件绑定变量用trim修剪掉前端和末尾的空格后用replace替换空格为空把处理过的值赋给自己<inputtype="text"class=""v-model="certNo"placeholder="请输入您的证书编号"@blur="certNo=certNo.trim().replace(/\s+/g,''......
  • uniapp微信小程序如何处理input输入空格问题?
    第一种方法用input组件自带的@input事件使用@input事件绑定变量用trim修剪掉前端和末尾的空格后用replace替换空格为空把处理过的值赋给自己<inputtype="text"class=""v-model="certNo"placeholder="请输入您的证书编号"@blur="certNo=certNo.trim().replace(/\s+/g,''......
  • uniapp项目实践总结(二十七)苹果应用商店上架教程
    导语:之前介绍了如何打包一个苹果安装包文件,如果想要上架苹果ios应用商店,那么就来这里学习一下方法吧。目录准备材料上架步骤审核事项准备材料基本信息构建版本:需要一个ipa格式安装包;logo:你应用的logo图标;应用名称:名称经过审核后才会显示在AppStore中;应用......
  • springboot+Uniapp+redis开发的AI医疗智能导诊系统源码
    AI+医疗的智能导诊系统源码 自主版权 支持二开一、什么是智能导诊系统?智能导诊系统是一种基于人工智能和大数据技术开发的医疗辅助软件,它能够通过对患者的症状、病史等信息进行计算分析,快速推荐科室和医生。通过简单的描述自身症状,系统即可找到最适合的科室,实现线上高效挂号,线下......
  • uniapp高度相关计算
    获取屏幕高度uni.getSystemInfo()获取状态栏高度uni.getSystemInfo()高度计算rpx转化onLoad(){ uni.getSystemInfo({ success:function(res){ console.log(res.screenHeight);//屏幕高度注意这里获得的高度宽度都是px需要转换rpx ......
  • vue 数据data-uniapp
    data属性data必须声明为返回一个初始数据对象的函数(注意函数内返回的数据对象不要直接引用函数外的对象);否则页面关闭时,数据不会自动销毁,再次打开该页面时,会显示上次数据。 //正确用法,使用函数返回对象 data(){ return{ title:'Hello' } } //错误写法,会导致再次......
  • uniapp中的三种组件
    uni-app中的模板——<template>: 第一类:内置组件/原生组件——无需导入直接使用 view、text、image、button、input 第二类:扩展组件(uni-ui组件库)——先下载再使用 uni-rate、uni-number-box 第三类:自定义组件——先创建再使用 创建:components>zh-go-top>zh......