知识点总结-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