微信小程序(mpvue)—解决视频播放bug的一种方式
// 第一页
<div @click="play(video.src, video.width, video.height)"></div>
methods: {
play (src, width, height) {
this.$router.push({path: `/pages/playVideo?src=${src}&width=${width}&height=${height}`})
}
}
// 第二页
<div class="video-box">
<video class="video"
:style="{width: width, height: height}"
id="video"
:src="src"
show-play-btn
controls
autoplay="true"
objectFit="cover"
:show-fullscreen-btn="fullscreenShow"
custom-cache="false"
></video>
</div>
export default {
data () {
return {
width: '100%',
height: '100%',
src: '',
fullscreenShow: false,
videoObj: wx.createVideoContext('video')
}
},
onLoad () {
this.src = this.$route.query.src
const width = this.$route.query.width
const height = this.$route.query.height
if (width > height) {
const radio = width / wx.getSystemInfoSync().windowWidth
this.width = width / radio + 'px'
this.height = height / radio + 'px'
this.fullscreenShow = true
} else {
this.fullscreenShow = false
}
}
}
微信小程序(mpvue)—解决视频播放bug的一种方式的更多相关文章
- 微信小程序的两个BUG?
微信小程序的两个BUG,也许可能是我搞错了 1.wx.uploadFile 用循环上传图片的时候,电脑.苹果手机上都会正常,安卓机上面则会出现the same task is working的问题 2 ...
- 微信小程序&mpvue问题总结(1)
微信小程序进入到首页的时候,日志打印出"created", "onlaunch", "mounted",具体代码如下:那么,在小程序中 cr ...
- 微信小程序mpvue项目使用WuxWeapp前端UI组件
前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...
- 原创+转发:微信小程序navigator、redirectTo、switchTab几种页面跳转方式
什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...
- 微信小程序详解——页面之间的跳转方式【路由】和参数传递
微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Andr ...
- 微信小程序开发之常见BUG
1.wx:if 当前版本为1.3.0,正常使用 <view wx:if="{{length > 5}}"> 1 </view> <view wx ...
- 微信小程序 mpvue vant
Mpvue中使用Vant Weapp组件库 https://segmentfault.com/a/1190000016228410?utm_source=tag-newest 小程序采坑记 mpvue ...
- 微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题
使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 "use strict"; Object.d ...
- 微信小程序:解决小程序中有些格式如webpiPhone手机暂不支持的问题
问题:小程序中有些格式是iPhone手机暂不支持的,如goods_introduce中的webp格式,在小程序的模拟器中是可以正常显示webp格式的,但是一旦你做真机调试,很可能某些iPhone手机是 ...
随机推荐
- HTML标记
html:超文本标记语言 标记,标签,元素 单标签:<标签名 属性名="属性值" 属性名=“属性值” /> 双标签:<标签名 属性名="属性值” 属 ...
- Ketlle
public class Kettle { private int volume; public Kettle(int water) { volume =water; System.out.pri ...
- xadmin邮箱验证码 标题 EmailVerifyRecord object
[修改users-models模块] 1.如果这样不生效 def __unicode__(self): return '{0}({1})'.format(self.code, self.email) ...
- 判断PDF文件是否相同(通过二进制流判断)
一.Java代码 1.将PDF转为字节流 /* * @step * 1.使用BufferedInputStream和FileInputStream从File指定的文件中读取内容 ...
- ibatis项目应用
创建数据库表: create table u_student( student_id number 16, student_name varchar2(108), student_code numbe ...
- ReactNative快速开发App一步到位
http://www.ifenxiang.net/thread-626-1-1.html
- ZYNQ DMA驱动及测试分析
之前没有接触过DMA驱动.不了解它的原理,稍作学习先总结下dma驱动步骤: 1. 申请DMA中断. 2. 申请内存空间作为src和dts的空间. 3. 注册设备注册节点 4. 将申请到的src和dst ...
- hdu第4场j.Let Sudoku Rotate
Problem J. Let Sudoku Rotate Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Su ...
- 使用Vue-cli搭建多页面应用时对项目结构和配置的调整
前提:在这里使用的是webpack模板进行搭建 第一步.安装Vue-cli并且进行初始化 首先打开git,在里面使用npm全局安装Vue-cli,并且进行初始化 npm i vue-cli -g 然后 ...
- Linux c codeblock的使用(二):在工程中编译多个文件
(一)前言 我们刚开始学习linux c的时候,一般都是在一个c文件里面写完所有程序,然后用gcc编译这个c文件就好了,十分简单. 但是你有没有想过,如果我们希望将不同模块的代码放到不同的c文件,然后 ...