h5中利用canvas绘制video 忽略浏览器自带视频播放控件

Posted 2023-04-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了h5中利用canvas绘制video 忽略浏览器自带视频播放控件相关的知识，希望对你有一定的参考价值。

参考技术A 1 要考虑ios和android系统自带的视频播放控件，还要考虑微信的内置X5浏览器
ios上视频控件还可以去除然后自己定义播放暂停没问题，
但是Android视频播放控件下面一排的控件可以去除，但是视频中间的暂停播放按钮去除不了
2手机浏览器自带的视频插件会在视频播放的时候 video层级最高，之前Video上的浮层就看不到了，无论定位后z-index设置多大都没用
3视频在播放的时候不同的手机会出现全屏的情况，这与之前的作为背景的初衷就不同了

效果如下：

上面canvas绘制视频的时候放大倍数不宜过大我这里是放大倍数过大以后在微信置X5浏览器上显示有问题（会出不来）
上面利用的定时器循环绘制视频：由于一般的MP4视频一秒钟多为24帧 30帧
所以为保证贴近真实的video视频播放这里的setInterval 给的时间不宜太小（会卡顿）太大（会有快进跳跃的感觉）由于使用到了定时器所以在视频暂停后清除定时器否则会一会运行下去影响浏览器性能

利用canvas生成二维码

实现原理是通过canvas利用input的value值在div内生成canvas绘制的二维码，然后toDataURL方法为img赋值最终实现二维码的生成和下载
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>收款二维码</title>
</head>

<body class="hold-transition skin-blue sidebar-mini">
<div style="text-align: center;display: none" id="qrPic"></div>
<input type="hidden" id="codeUrl" name="codeUrl" value="jebchjebch" />
<img src="" id="myImg"/>
<script type="text/javascript" src="jquery-1.8.1.js"></script>
<script src="jquery.qCode.min.js"></script>
<script type="text/javascript">
$(function() {
qr();
});

//生成二维码代码
function qr() {
$("#qrPic").empty();
var str = toUtf8($("#codeUrl").val());
$("#qrPic").qrcode({
render: "canvas",
width: 270,
height: 270,
text: str
});

$("canvas").attr("id", "erw");
var canvas = document.getElementById(‘erw‘);
var context = canvas.getContext(‘2d‘);
var strDataURI = canvas.toDataURL();
document.getElementById(‘myImg‘).src = strDataURI;
console.log(strDataURI)//可以得到url
}
</script>
</body>

</html>

以上是关于h5中利用canvas绘制video 忽略浏览器自带视频播放控件的主要内容，如果未能解决你的问题，请参考以下文章

关于h5绘制canvas生成图片的注意点！