计划的任务
- 环境的搭建与配置
- 视频在线播放
- Input框在IOS下不能贴着软键盘的问题
- 写登录和绑定框的js逻辑
实际完成
- 环境的搭建与配置(早上2.5小时+下午1.5小时 = 4小时)
- 视频在线播放(下午2.5小时+晚上1小时 = 3.5 小时)
- Input框在IOS下不能贴着软键盘的问题(未解决完,晚上1个小时)
- 写登录和绑定框的js逻辑(未解决)
总结
环境的搭建与配置
勤发有一套针对移动端静态页面的配置文件,今天给我详细地对每个插件和命令做一些介绍。虽然之前有接触到webpack,但是对每个配置并不是很熟悉,花了相当大的时间去理解和记录,还未完全消化。视频播放
取格式主要为mp4的资源,直接用video标签上就可播放,如果是swf格式就比较特殊,用embed处理。当然要兼容多钟视频格式的话,参考在 HTML 中播放视频的方法
主要遇到的问题是:
---- 在本机上,点击播放时必定先转向横屏,点击左上角的返回键会停止播放。一开始以为是属性设置问题,纠结了一点时间看video属性,后来发现另一手机上并不会出现这样的问题,应该是我手机设置问题,就先留着这个有可能会出现的事,暂不做处理。意外发现小窗口的播放是微信的处理,可以把视频“取”出来在屏幕上进行移动。
---- js动态设置src不一定能获取到视频。 参考上述文档后,有些方法是可以直接获取到该元素修改src值指向视频,但是有点方法的src必须要在页面上定义,如果页面上src为空,js动态修改,最终也获取不到视频。Input框在IOS下不能贴着软键盘的问题
在评论区的Input框一般用position:fixed
+bottom:0
,但是在IOS在会出现Input不会紧贴在软键盘上方。看了解决方案,用position:absolute
可能可以解决。暂时没苹果机,所以写了个demo,明天再试。but,对移动端适配不太了解,踩了个小坑,不知道为啥input框点击之后页面会放大,用user-scalable =no
能解决的问题这里就好好记住就是。明天,继续加油!