h5与安卓交互唤起手机照相、相册、摄影视频播放图片上传录音拨打电话

周亚鑫

已于 2023-03-26 10:34:25 修改

阅读量3.7k

点赞数 2

分类专栏： vue html h5与安卓交互文章标签：音视频 android 交互

于 2022-01-21 18:08:07 首次发布

本文链接：https://blog.csdn.net/q4717529/article/details/122626864

版权

vue 同时被 3 个专栏收录

121 篇文章 14 订阅

订阅专栏

html

13 篇文章 0 订阅

订阅专栏

h5与安卓交互

2 篇文章 0 订阅

订阅专栏

照相

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拍照</title>
<script type="text/javascript">
    function change(){  
       var imagefile= document.getElementById("image").files[0]; 
       var reads = new FileReader();
       reads.readAsDataURL(imagefile);
       reads.onload = function(e) {
        document.getElementById('imageId').src = this.result;
       }
    } 
</script>
</head>
<body>
    <input type="file" id='image' accept="image/*" capture='camera' onchange="change()">
</body>
</html>

如果想选择本地照片把input标签的capture='camera’属性去掉即可

摄影

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>摄像</title>
<script type="text/javascript">
  function change(){
    var videofile = document.getElementById('getvideo').files[0]; 
    var url = URL.createObjectURL(videofile); 
    var videos =document.getElementById("myVideo")
    videos.src = url; 
  }
</script>
</head>
<body>
  <video id="myVideo" controls width="350" height="200">
    <source type="video/mp4" />
    <source type="video/webm" />
    <source type="video/ogg" />
  </video>
  <input type="file" id='getvideo' accept="video/*" capture="camcorder" onchange="change()">
</body>
</html>

录音

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>录音</title>
<script type="text/javascript">
  function change(){
    var audiofile = document.getElementById('getaudio').files[0]; 
    var url = URL.createObjectURL(audiofile); 
    var audio =document.getElementById("myAudio")
    audio.src = url; 
  }
</script>
</head>
<body>
  <audio id="myAudio" controls>
    <source type="audio/ogg">
    <source type="audio/mpeg">
    <source type="audio/wav">
  </audio>
  <input type="file" accept="audio/*" id="getaudio" capture="microphone" onchange="change()">
</body>
</html>

拨号、发邮件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>拨号</title>
</head>
<body>
  <p>手机号码：112233445566778899</p>
  <a href="tel:112233445566778899">点击拨号</a>
  <a href="mailto:11111111youjian@163.com">一键发送邮件</a>
</body>
</html>

周亚鑫

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
h5与安卓交互唤起手机照相、相册、摄影视频播放图片上传录音拨打电话

照相<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>拍照</title><script type="text/javascript"> function change(){
复制链接

扫一扫