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

 

 

 

 

 

posted @ 2018-05-09 08:45  winteronlyme  阅读(186)  评论(0编辑  收藏  举报