zoukankan      html  css  js  c++  java
  • H5调用手机的相机/摄像/录音等功能 _input:file的capture属性说明

    H5使用input标签调用系统默许相机,摄像,录音功能。使用input:file标签, 去调用系统默认相机,摄像,录音功能,其实是有个capture属性,直接说明需要调用什么功能:

    <input type="file" accept="image/*" capture="camera">
    <input type="file" accept="video/*" capture="camcorder">
    <input type="file" accept="audio/*" capture="microphone">

    capture表示可以捕获到系统默认的设备,比如:camera--照相机;camcorder--摄像机;microphone--录音。如果需要设备的面向用户的摄像头拍摄可以使用capture="user"

    51220网站目录 https://www.51220.cn

    input:file标签还支持一个multiple属性,表示可以支持多选,如:

    <input type="file" accept="image/*" multiple>

    加上这个multiple后,capture就没啥用了,因为multiple是专门用来支持多选的。

    例子:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="MobileOptimized" content="320" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>input视频测试</title>
    </head>
    
    <body>
    <!--拍照 <input id="myfile" type="file" name="file" accept="image/*" capture="camera"> -->
    //拍视频
    <input type="file" name="video" id="video-input" accept="video/*" capture="user"  onchange="videoChange()" />
    <span id='info'></span>
    </p>
    <video id="video" width='300' height="300" controls autoplay></video>
    
    <script type="text/javascript">
    function videoChange() {
    var file = document.getElementById('video-input').files[0];
    var fileSize = (Math.round(file.size / 1024)).toFixed();
    document.getElementById('info').innerHTML += "所录视频大小约为:" + (fileSize / 1024).toFixed(2) + "Mb";
    
    var url = URL.createObjectURL(file);
    console.log(url);
    document.getElementById("video").src = url;
    }
    </script>
    </body>
    
    </html>
  • 相关阅读:
    HTML DOM教程 14HTML DOM Document 对象
    HTML DOM教程 19HTML DOM Button 对象
    HTML DOM教程 22HTML DOM Form 对象
    HTML DOM教程 16HTML DOM Area 对象
    ubuntu 11.04 问题 小结
    VC6.0的 错误解决办法 小结
    boot.img的解包与打包
    shell里 截取字符串
    从零 使用vc
    Imagemagick 对图片 大小 和 格式的 调整
  • 原文地址:https://www.cnblogs.com/ypppt/p/13110806.html
Copyright © 2011-2022 走看看