知识点总结-1
一、video的注意事项
<video x5-playsinline="true" playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true" src="1.mp4" preload class="video"></video>
playsinline:可用于防止ios用户视频播放自动全屏(safari是顽疾暂时没办法搞定),android是不自动全屏的。
$('.video').on('ended',function(){}) 用于检测在视频播放完(不管是快进还是自动播完)之后执行某些操作。
$('.video').trigger('play')和$("video").get(0).play()和document.getElementById('video').play() 用于触发播放视频,由于autoplay在手机端为保护用户流量而被禁用的。
基于微信,在安卓手机上,视频播放是悬浮在最上面的一层,可以用canvas解决这个问题,代码地址:http://www.cnblogs.com/winteronlyme/p/9002002.html
preload:如果出现该属性,则视频在页面加载时进行加载,并预备播放。不与autoplay同用。
Safari出于用户体验考虑是禁止自动播放的。
自动播放失败是因为我是用的谷歌浏览器,在新版浏览器当中,谷歌禁止了flash播放~需要再设置=隐私设置-内容设置-flash-允许;
IE浏览器的自动播放正常。
其他问题可参考:
1.https://www.cnblogs.com/colima/archive/2016/04/01/5345635.html
2.https://www.cnblogs.com/zlp520/p/6410739.html
3.https://www.cnblogs.com/zzsdream/p/6372528.html
4.http://www.haorooms.com/post/weixin_hidevideo_control
5.https://x5.tencent.com/tbs/guide/video.html
二、canvas的注意事项
在js中设置canvas的宽高时,如果设置方式不正确,或者在css中设置时,在绘制图像时就会出现拉伸的情况。这是因为canvas的默认宽高为300px*150px,在css中设置canvas的宽高,实际上是把canvas在300px*150px的基础上进行了拉伸。所以绘制出来的图像会发生变形。
在js中设置canvas的宽高时应当使用以下方法:
document.getElementById("canvas").width = 600;
document.getElementById("canvas").height = 600;
从image到canvas
// 把image 转换为 canvas对象 function convertImageToCanvas(image) { // 创建canvas DOM元素,并设置其宽高和图片一样 var canvas = document.createElement("canvas"); canvas.width = image.width; canvas.height = image.height; // 坐标(0,0) 表示从此处开始绘制,相当于偏移。 canvas.getContext("2d").drawImage(image, 0, 0); return canvas; }
从canvas到image
// 从 canvas 提取图片 image function convertCanvasToImage(canvas) { //新Image对象,可以理解为DOM var image = new Image(); // canvas.toDataURL 返回的是一串Base64编码的URL,当然,浏览器自己肯定支持 // 指定格式 PNG image.src = canvas.toDataURL("image/png"); return image; }
参考:https://www.cnblogs.com/jacobb/p/6814317.html
参考:https://blog.csdn.net/renfufei/article/details/9855519
三、如果有悬挂的线作为背景,需要通过计算才能获得准确的高度的进行拉伸的,在页面切换的过程中,因为背景是通过background-repeat:repeat进行拉伸的,所以在切换时,会出现悬挂的线会有动态绘制的动画出现。解决办法是:悬挂的线做个长的,主页面盖在上面,不管在什么什么手机屏幕尺寸上,都不会出现问题。
四、JSON.stringify(object)可在控制台打印出具体的object。
五、chrome自带模拟器是没有把屏幕顶部,也就是手机信号电量那一栏算在内的,这就导致做出来的效果跟模拟器不一致。微信内置浏览器正确的高度应该减去状态栏和顶部黑边,也就是减去64px;如果背景是不规则的,那么请确定主体内容是哪部分,切图的时候就要注意了。主体内容要垂直居中处理。
六、关于长按二维码的坑,参考:https://devework.com/weixin-qrcode-bug2.html