javascript------H5调用手机相机录像拍照并回显(input操作)

最新推荐文章于 2025-02-20 13:48:59 发布

绝世唐门三哥

最新推荐文章于 2025-02-20 13:48:59 发布

阅读量2.2k

点赞数

分类专栏： JavaScript 知识点总结 html标签文章标签： javascript webview 前端

本文链接：https://blog.csdn.net/COCOLI_BK/article/details/122986891

版权

知识点总结同时被 3 个专栏收录

260 篇文章

订阅专栏

JavaScript

79 篇文章

订阅专栏

html标签

3 篇文章

订阅专栏

本文介绍HTML5中不同输入元素的应用，如拍照、录像和音频选择，重点讲解了如何通过JavaScript处理用户上传的文件，并展示了如何实时预览选择的视频。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下面代码直接复制，去本地操作看结果！！！

文件下载链接：https://download.csdn.net/download/COCOLI_BK/81145436

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=`, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <input type="file" accept="image/*" capture="camera"> 相机

  <input type="file" accept="video/*" capture="camcorder"> 录像

  <input type="file" accept="audio/*" capture="microphone"> 系统相册

  <input type="file" accept="image/*" multiple> 多选
  <p><video width="200" height="100" controls>
      << /video>/p>
        <script>
          document.getElementsByTagName("input")[0].onchange = function (value) {
            console.log("相机", value);
          }
          document.getElementsByTagName("input")[1].onchange = function (value) {
            console.log("录像", value, value.target.files, document.getElementsByTagName("input")[1].value);
          }
          document.getElementsByTagName("input")[2].onchange = function (value) {
            console.log("系统相册", value);
          }
          document.getElementsByTagName("input")[3].onchange = function (value) {
            console.log("多选", value);
          }

          document.getElementsByTagName("input")[1].addEventListener('change', function (e) {
            for (let i = 0; i < this.files.length; i++) {
              let file = this.files[i];
              var fileReader = new FileReader();
              fileReader.readAsDataURL(file);
              fileReader.onload = function () {
                // 获取得到的结果
                console.log(this.result);
                var data = this.result;
                console.log(document.querySelector("video"));
                document.querySelector("video").setAttribute("src", data)
              }
            }
          }, false)

        </script>
</body>

</html>