转自;https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudehengxiangshipinheyemianlanjie58/

在手机拍摄视频的时候,存在2个情况,手机横这和手机竖着。如果是横着的情况下,我们竖着拿手机观看模式,包括抖音,快手,他们的解决方案都是上下出现黑色变宽,对视频进行等比例压缩。老铁我也参考这个来完成。另外如果用户为登录的情况下,想进入我的需要登录才可以,这个也需要页面通过缓存中获取用户信息来进行控制。源码:https://github.com/limingios/wxProgram.git 中No.15

详情页面横竖屏的控制

如果视频的宽度大于高度,video的填充模式就修改为正常的情况。不进行填充

var videoUtils = require('../../utils/videoUtils.js')
const app = getApp()
Page({ data: {
cover:'cover',
videoContext:"",
videoInfo:{},
videId:'',
src:''
}, showSearch:function(){
wx.navigateTo({
url: '../videoSearch/videoSearch',
})
},
onLoad:function(params){
var me = this;
me.videoContext = wx.createVideoContext('myVideo', me);
var videoInfo = JSON.parse(params.videoInfo);
var videoWidth = videoInfo.videoWidth;
var videoHeight = videoInfo.videoHeight;
var cover = 'cover';
if (videoWidth > videoHeight){
cover = '';
}
me.setData({
videId: videoInfo.id,
src: app.serverUrl + videoInfo.videoPath,
videoInfo: videoInfo,
cover: cover
}) },
showIndex:function(){
wx.redirectTo({
url: '../index/index',
})
}, onShow:function(){
var me = this;
me.videoContext.play();
},
onHide:function(){
var me = this;
me.videoContext.pause();
},
upload:function(){
videoUtils.uploadVideo();
},
showMine: function () {
var me = this;
var userInfo = app.getGlobalUserInfo();
if (userInfo.id == '' || userInfo.id == undefined){
wx.navigateTo({
url: '../userLogin/userLogin',
})
}else{
wx.navigateTo({
url: '../mine/mine',
})
} },
})

详情跳转到个人页面

判断缓存中是否存在用户信息,存在跳转到个人信息页面,不存在,跳转到登录页面

PS:小程序一般的开发思路就是尽量前端能办的少麻烦后端,减少交互。这样用户体验就上去了。

「小程序JAVA实战」小程序的横向视频和页面拦截(59)的更多相关文章

  1. 「小程序JAVA实战」小程序的个人信息作品,收藏,关注(66)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudegerenxinxizuopinshoucangguanzhu65 ...

  2. 「小程序JAVA实战」小程序头像图片上传(下)(45)

    转自:https://idig8.com/2018/09/09/xiaochengxujavashizhanxiaochengxutouxiangtupianshangchuan44/ 接下来,我们应 ...

  3. 「小程序JAVA实战」小程序多媒体组件(27)

    转自:https://idig8.com/2018/08/19/xiaochengxujavashizhanxiaochengxuduomeitizujian27/ 来说下 ,小程序的多媒体组件.源码 ...

  4. 「小程序JAVA实战」小程序的flex布局(22)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-22/ 之前已经把小程序的框架说完了,接下来说说小程序的组件,在说组件之前,先说说布局吧.源码:ht ...

  5. 「小程序JAVA实战」 小程序私有页面的生命周期以及导航(10)

    转自:https://idig8.com/2018/08/09/xiaochengxu-chuji-10/ 之前讲了小程序全局的生命周期,今天咱们说说单个页面的生命周期!源码:https://gith ...

  6. 「小程序JAVA实战」小程序视频处理工具ffmpeg(47)

    转自:https://idig8.com/2018/09/16/xiaochengxujavashizhanxiaochengxushipinchuligongjuffmpeg46/ 前面已经把视频成 ...

  7. 「小程序JAVA实战」小程序查看视频发布者信息(64)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxuchakanshipinfabuzhexinxi63/ 当我们点击右下 ...

  8. 「小程序JAVA实战」小程序的留言和评价功能(70)

    转自:https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/ 目前小程序这 ...

  9. 「小程序JAVA实战」小程序的举报功能开发(68)

    转自:https://idig8.com/2018/09/25/xiaochengxujavashizhanxiaochengxudeweixinapicaidancaozuo66-2/ 通过点击举报 ...

  10. 「小程序JAVA实战」小程序的关注功能(65)

    转自:https://idig8.com/2018/09/24/xiaochengxujavashizhanxiaochengxudeguanzhugongneng64/ 在个人页面,根据发布者个人和 ...

随机推荐

  1. bzoj1179: [Apio2009]Atm scc缩点+dag上dp

    先把强连通缩点,然后变成了dag,dp求终点是酒吧的最长路即可, /************************************************************** Pro ...

  2. 转-Linux启动过程详解(inittab、rc.sysinit、rcX.d、rc.local)

    http://blog.chinaunix.net/space.php?uid=10167808&do=blog&id=26042   1)BIOS自检2)启动Grub/Lilo3)加 ...

  3. 浅谈jsonp

    要谈jsonp,首先要弄明白jsonp是什么,它是用来干嘛的.jsonp其实就是我们常用的script标签,用来解决跨域的,只不过这个标签是动态创建的,为啥要动态创建涅. 举个小栗子: 假如我们远程文 ...

  4. java实现的18位身份证格式验证算法

    公民身份号码是特征组合码,由十七位数字本体码和一位数字校验码组成.排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位数字校验码.1.地址码表示编码对象常住户口所在县(市. ...

  5. html绘制三角形(兼容IE6)

    .sanjiao { width:; height:; overflow: hidden; border-width: 10px; border-color: red transparent tran ...

  6. hrbust 1621 迷宫问题II 广搜

    题目链接:http://acm.hrbust.edu.cn/vj/index.php?/vj/index.php?c=&c=contest-contest&cid=134#proble ...

  7. iOS多线程GCD详解

    在这之前,一直有个疑问就是:gcd的系统管理多线程的概念,如果你看到gcd管理多线程你肯定也有这样的疑问,就是:并发队列怎么回事,即是队列(先进先出)怎么会并发,本人郁闷了好久,才发现其实cgd管理多 ...

  8. 【LeetCode 36_哈希表】Valid Sudoku

    //occupyed_1检查行是否占用 //occupyed_2检查列是否占用 //occupyed_3检查块是否占用 bool isValidSudoku(vector<vector<c ...

  9. Internet Explorer 11.0.9600.16428 For Windows 7

    官方消息http://blogs.msdn.com/b/ie/archive/2013/11/07/ie11-for-windows-7-globally-available-for-consumer ...

  10. Alpha阶段贡献分配规则

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2244] 分配规则: 1.每人有基础分3分. 2.每参加一次组内会议及活动加0. ...