转自;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. STL中的map

    map 容器 提供 1 对 1 的关系 定义方式: map<string,int>mp; 写在前面的是关键字. 数据插入: 1.使用 insert 插入 pair 数据 mp.insert ...

  2. 在页面和请求中分别使用XML Publisher生成PDF报表且自动上传至附件服务器

    两个技术要点: 1.使用TemplateHelper.processTemplate方法生成目标PDF的InputStream流,再使用ftp中上传流的方法将其上传至附件服务器. 2.在请求中调用AM ...

  3. RabbitMQ的几种工作模式

    maven: <dependencies> <!-- RabbitMQ的客户端 --> <dependency> <groupId>com.rabbit ...

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

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

  5. 正则,String中用法,Pattern Matcher

    package com.正则表达式; import java.util.Scanner; /** * * 校验qq号码 * 1:要求必须是5-15位数字 * 2: 0不能开头 * 分析: * A:键盘 ...

  6. Yii 入门

    跳转到不同module Redirect to module after login Yii $this->redirect( array('/tradesman/default/index') ...

  7. SQL优化:使用explain

    前文说了EXPLAIN的输出的含义,本文实战一下. Database Schema DROP DATABASE dbTest; CREATE DATABASE dbTest; USE dbTest; ...

  8. 命令行视频(ts/m3u8)下载工具 —— youtube-dl(ffmpeg 解码)

    youtube-dl 支持的站点:youtube-dl Supported sites youtube-dl 命令行参数: –version:查看版本: 1. 命令行工具安装 安装视频编解码工具 ff ...

  9. web程序1

  10. cratedb 基本试用

    安装 docker run -d -p 4200:4200 crate UI访问 http://localhost:4200/#!/ 创建数据 tweets 是默认导入的,点击帮助导航可以操作 登陆 ...