// 第一页

<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的一种方式的更多相关文章

  1. 微信小程序的两个BUG?

    微信小程序的两个BUG,也许可能是我搞错了 1.wx.uploadFile 用循环上传图片的时候,电脑.苹果手机上都会正常,安卓机上面则会出现the same task is working的问题 2 ...

  2. 微信小程序&mpvue问题总结(1)

    微信小程序进入到首页的时候,日志打印出"created", "onlaunch", "mounted",具体代码如下:那么,在小程序中 cr ...

  3. 微信小程序mpvue项目使用WuxWeapp前端UI组件

    前言:这是一篇简单粗暴的使用指南 在最近的小程序项目里前端UI框架最后选择使用WuxWeapp,这篇文章记录一下如何在小程序mpvue项目中使用该UI组件. 步骤一:下载源码 (地址在这里)主要是里面 ...

  4. 原创+转发:微信小程序navigator、redirectTo、switchTab几种页面跳转方式

    什么是事件? 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 详解(以常见的tap点击事情为例) 模板.wxml代码: <view id="tapTest ...

  5. 微信小程序详解——页面之间的跳转方式【路由】和参数传递

    微信小程序拥有web网页和Application共同的特征,我们的页面都不是孤立存在的,而是通过和其他页面进行交互,来共同完成系统的功能.今天我们来研究小程序页面之间的跳转方式. 1.先导 在Andr ...

  6. 微信小程序开发之常见BUG

    1.wx:if 当前版本为1.3.0,正常使用 <view wx:if="{{length > 5}}"> 1 </view> <view wx ...

  7. 微信小程序 mpvue vant

    Mpvue中使用Vant Weapp组件库 https://segmentfault.com/a/1190000016228410?utm_source=tag-newest 小程序采坑记 mpvue ...

  8. 微信小程序里解决app.js onLaunch事件与小程序页面的onLoad加载前后异常问题

    使用 Promise 解决小程序页面因为需要app.js onLaunch 参数导致的请求失败 app.js onLaunch 的代码 "use strict"; Object.d ...

  9. 微信小程序:解决小程序中有些格式如webpiPhone手机暂不支持的问题

    问题:小程序中有些格式是iPhone手机暂不支持的,如goods_introduce中的webp格式,在小程序的模拟器中是可以正常显示webp格式的,但是一旦你做真机调试,很可能某些iPhone手机是 ...

随机推荐

  1. HTML标记

    html:超文本标记语言 标记,标签,元素 单标签:<标签名  属性名="属性值" 属性名=“属性值” /> 双标签:<标签名  属性名="属性值” 属 ...

  2. Ketlle

    public class Kettle { private int volume; public Kettle(int water) {  volume =water;  System.out.pri ...

  3. xadmin邮箱验证码 标题 EmailVerifyRecord object

    [修改users-models模块] 1.如果这样不生效 def __unicode__(self): return '{0}({1})'.format(self.code, self.email) ...

  4. 判断PDF文件是否相同(通过二进制流判断)

    一.Java代码 1.将PDF转为字节流    /*     * @step     *  1.使用BufferedInputStream和FileInputStream从File指定的文件中读取内容 ...

  5. ibatis项目应用

    创建数据库表: create table u_student( student_id number 16, student_name varchar2(108), student_code numbe ...

  6. ReactNative快速开发App一步到位

    http://www.ifenxiang.net/thread-626-1-1.html

  7. ZYNQ DMA驱动及测试分析

    之前没有接触过DMA驱动.不了解它的原理,稍作学习先总结下dma驱动步骤: 1. 申请DMA中断. 2. 申请内存空间作为src和dts的空间. 3. 注册设备注册节点 4. 将申请到的src和dst ...

  8. hdu第4场j.Let Sudoku Rotate

    Problem J. Let Sudoku Rotate Time Limit: / MS (Java/Others) Memory Limit: / K (Java/Others) Total Su ...

  9. 使用Vue-cli搭建多页面应用时对项目结构和配置的调整

    前提:在这里使用的是webpack模板进行搭建 第一步.安装Vue-cli并且进行初始化 首先打开git,在里面使用npm全局安装Vue-cli,并且进行初始化 npm i vue-cli -g 然后 ...

  10. Linux c codeblock的使用(二):在工程中编译多个文件

    (一)前言 我们刚开始学习linux c的时候,一般都是在一个c文件里面写完所有程序,然后用gcc编译这个c文件就好了,十分简单. 但是你有没有想过,如果我们希望将不同模块的代码放到不同的c文件,然后 ...