h5 活动页遇到的问题汇总

86 阅读 0 评论 57 点赞

我是靠谱客的博主纯情白羊，最近开发中收集的这篇文章主要介绍h5 活动页遇到的问题汇总，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

视频各类问题汇总（一般是兼容性问题，安卓，ios，微信等）
以下代码中，解释了currentTime属性出现误差的原因。介绍了为什么有的安卓真机没有准确的放在指定的节点，会有部分误差，以及解决方案。

 <div class="videoBox">
<video
id="Video"
preload="auto"
//预加载auto:当页面加载后载入整个视频
controls='true' //浏览器自带的控制条
poster="assets/images/9/video.png" //视频封面，没有播放时显示的图片
webkit-playsinline='true'
playsinline='true' //这个属性是ios 10中设置可以让视频在小窗内播放，也就是不是全屏播放
x-webkit-airplay='allow'
x5-video-player-type='h5' //启用H5播放器,是wechat安卓版特性
x5-video-player-fullscreen='true' //全屏设置，设置为 true 是防止横屏
x5-video-ignore-metadata='true'
width='100%' height='100%'
onClick={(e) => {
if (this.isVideoPlay) {
this.isVideoPlay = false;
document.querySelector("#Video").pause();
}
e.preventDefault();
}} >
//写多行source是为了兼容各个浏览器。因为浏览器对视频格式支持不统一，若支持ogg就播放，不支持接着往下查source，直到最后一个，还不支持就会显示浏览器不支持该标签
<source
src="assets/video.ogg"
type="video/ogg"></source>
<source
src="assets/mmm.mp4"
type='video/mp4'></source>
</video>
<div class="control"
// style={{ background: `url('assets/images/9/ready1x.png')` }} 
hidden={this.isVideoPlay}
onClick={(e) => {
if (!this.isVideoPlay) {
this.isVideoPlay = true;
let video = document.querySelector("#Video");
video.currentTime = 3; //设置到当前位置（s）

document.querySelector("#Video").play();//安卓需要再次paly()一下
}
e.preventDefault();
}} >
</div>
</div>

长按页面完成截图


shootEnd = () => {
clearTimeout(this.timer);
}
// touchstart
shootStart = () => {
this.timer = setTimeout(() => {
this.pic = true;//去掉视频区域，显示报表数据
setTimeout(this.takeScreenshot, 50)
}, 1500)
}
// 绘制图片
takeScreenshot = () => {
document.querySelector("#Video").pause()
var Cwidth = this.getWidth();
//html2canvas是一个组件，我们也可以用canvas.drawimage()自己写
html2canvas(document.querySelector(".post"), { useCORS: true, allowTaint: false, taintTest: true, }).then(canvas => {
var imge = new Image();
imge.crossOrigin = 'anonymous';//canvas处理不了跨域的图片
imge.onload = function(){
imge.src = canvas.toDataURL("image/png");
}
imge.width = Cwidth;
var img = canvas.toDataURL("image/png").split(',')[1]
imge.src = canvas.toDataURL("image/png").split(',')
$('.post').append(imge);
//将绘制的图片浮起来
$('.post>img').css({
'position': 'absolute',
'top': 0
})
})
}

图片压缩，canvas绘制等问题
首先，如何把canvas画布转换成img图像？
1.canvas.toDataURL(mimeType, qualityArgument)
/mimeType/表示canvas导出来的base64图片的类型，默认是png格式，也即是默认值是’image/png’，我们也可以指定为jpg格式
/qualityArgument/表示导出的图片质量，只要导出为jpg和webp格式的时候此参数才有效果，默认值是0.92，是一个比较合理的图片质量输出参数，通常情况下，我们无需再设定。
2.canvas.toBlob(callback, mimeType, qualityArgument)
可以把canvas转换成Blob文件，通常用在文件上传中，因为是二进制的，对后端更加友好。和toDataURL()方法相比，toBlob()方法是异步的，因此多了个callback参数，这个callback回调方法默认的第一个参数就是转换好的blob文件信息。将canvas图片转换成二进制的blob文件，然后再ajax上传的，代码如下：

// canvas转为blob并上传
canvas.toBlob(function (blob) {
// 图片ajax上传
var xhr = new XMLHttpRequest();
// 开始上传
xhr.open("POST", 'upload.php', true);
xhr.send(blob);
});

于是，经过“图片→canvas压缩→图片”三步曲，我们完成了图片前端压缩并上传的功能。

//HTML代码：
<input id="file" type="file">
//JS代码：
var eleFile = document.querySelector('#file');
// 压缩图片需要的一些元素和对象
var reader = new FileReader(), img = new Image();
// 选择的文件对象
var file = null;
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
// base64地址图片加载完毕后
img.onload = function () {
// 图片原始尺寸
var originWidth = this.width;
var originHeight = this.height;
// 最大尺寸限制
var maxWidth = 400, maxHeight = 400;
// 目标尺寸
var targetWidth = originWidth, targetHeight = originHeight;
// 图片尺寸超过400x400的限制
if (originWidth > maxWidth || originHeight > maxHeight) {
if (originWidth / originHeight > maxWidth / maxHeight) {
// 更宽，按照宽度限定尺寸
targetWidth = maxWidth;
targetHeight = Math.round(maxWidth * (originHeight / originWidth));
} else {
targetHeight = maxHeight;
targetWidth = Math.round(maxHeight * (originWidth / originHeight));
}
}
// canvas对图片进行缩放
canvas.width = targetWidth;
canvas.height = targetHeight;
// 清除画布
context.clearRect(0, 0, targetWidth, targetHeight);
// 图片压缩
context.drawImage(img, 0, 0, targetWidth, targetHeight);
// canvas转为blob并上传
canvas.toBlob(function (blob) {
// 图片ajax上传
var xhr = new XMLHttpRequest();
// 文件上传成功
xhr.onreadystatechange = function() {
if (xhr.status == 200) {
// xhr.responseText就是返回的数据
}
};
// 开始上传
xhr.open("POST", 'upload.php', true);
xhr.send(blob);
}, file.type || 'image/png');
};
// 文件base64化，以便获知图片原始尺寸
reader.onload = function(e) {
img.src = e.target.result;
};
eleFile.addEventListener('change', function (event) {
file = event.target.files[0];
// 选择的文件是图片
if (file.type.indexOf("image") == 0) {
reader.readAsDataURL(file);
}
});