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

最新推荐文章于 2024-08-04 18:05:17 发布

原创最新推荐文章于 2024-08-04 18:05:17 发布 · 675 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一个基于H5的手机视频录制及上传功能实现方法。通过HTML5的input元素选择摄像头源并录制视频，利用FileReader API读取视频文件，并将其转换为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 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>
片
``