H5手机录像并获取录像内容转base64

最新推荐文章于 2022-08-26 00:19:02 发布

xvzhengyang

最新推荐文章于 2022-08-26 00:19:02 发布

阅读量559

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/xvzhengyang/article/details/118310282

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

在这里插入代码<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>h5手机录像</title>
	</head>
	<script>
		let videoBtn = document.getElementById("uploadVideo");
		var videoBase = ""

		function uploadVideo(e) {
			let files = e.target.files;
			if (files && files.length > 0) {
				let file = files[0];
				//对录制的视频限制大小
				if (file.size > 8388608) {
					alter("录制视频时间过长");
					return;
				} else if (file.size < 211057) {
					alter("录制视频时间太短");
					return;
				}
				let reader = new FileReader();
				//将视频文件转换为base64格式
				reader.readAsDataURL(file);
				reader.onload = function() {
					if (reader.result) {
						videoBase = reader.result;
						//请求后端，传递数据
						alert(videoBase)
					} else {
						alter("视频录制异常");
					}
				});
		} else {
			alter("请重新录制视频");
		}
		}

		//监听change事件
		videoBtn.onchange = function() {
			uploadVideo(e)
		}
	</script>
	<body>
		<div class="next_submit">
			<span>开始录制视频</span>
			<input type="file" accept="video/*" id="uploadVideo" capture="camcorder" />
		</div>
	</body>
</html>
片
``

xvzhengyang

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
H5手机录像并获取录像内容转base64

在这里插入代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>h5手机录像</title> </head> <script> let videoBt
复制链接

扫一扫