这段时间经常看到开发者在反复询问同一个问题，为什么通过设置src属性，不能播放本地的媒体文件？例如video.src=”D:\test.mp4”。

这是因为浏览器中的JavaScript不能直接直接访问本地资源（例如文件系统，摄像头，麦克风等），除非事先得到了用户的允许。浏览器之所以进行该限制也是很有必要的，试想一下，如果JavaScript能够肆无忌惮的访问本地的文件系统，那么窃取用户隐私数据就变得轻而易举了，当用户访问网络上的某个网页时，不知不觉中自己机器上保存的信用卡卡号，密码，公司的秘密文件等隐私文件或许已经被恶意的JavaScript程序上传到了远方的服务器上，这对用户来说是不可容忍的。

在得到用户允许后我们还是可以播放本地文件的，下面介绍一种方法。

在页面中插入一个input节点并指定type为file，如果需要播放多个文件，可以添加属性multiple。注册文件节点被更新时的回调函数，在回调函数中调用URL.createObjectURL函数来获取刚选择文件的url，然后把该url设置为audio或video的src值即可。

代码实例如下：

  1. <html>
  2. <body>
  3. <input type="file" id="file" onchange="onInputFileChange()">
  4. <audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio>
  5. <script>
  6. function onInputFileChange() {
  7. var file = document.getElementById('file').files[0];
  8. var url = URL.createObjectURL(file);
  9. console.log(url);
  10. document.getElementById("audio_id").src = url;
  11. }
  12. </script>
  13. </body>
  14. </html>

该代码在Chrome 30和Firefox 24上测试通过，在IE上应该存在一定的兼容性问题（据我所知IE8及以前的版本肯定是不能工作的），因为IE对HTML5的支持不好，不知道IE10有没有实现相关的API。

HTML5 Video/Audio播放本地文件的更多相关文章

  1. HTML5如何播放本地文件

    HTML5在操作的过程中,很多朋友会遇到一个问题,那就是在播放本地文件的时候时常会有一些问题存在,使得HTML5才操作的过程中本地文件播放不流畅或者是不能够正常的播放.现在,我们就来看看HTML5如何 ...

  2. h5 audio播放音频文件

    h5 audio播放音频文件 注:下面html中样式及不相关的内容去掉了 第一个例子 播放没有防盗链的外网音频文件是可以的 <!doctype html> <html> < ...

  3. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  4. video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  5. 视频播放效果--video.js播放mp4文件

    HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...

  6. 解决html5 video不能播放 能播放声音不能播放视频

    <video id="playVideo" style="width:90%; height:auto;" controls poster=". ...

  7. IE10用video标签播放本地mp4文件失败的解决办法

    1. 首先用“格式工厂”将要播放的视频文件按照“AVC高质量与大小”转换为要求格式的mp4文件: 2. 设置IIS7.5,添加mp4的MIME类型,步骤如下: 1.打开IIS管理器(运行inetmgr ...

  8. html5 video标签播放视频流

    从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = " ...

  9. html5 video/audio 标签

    一般来说推荐使用,第三方的媒体播放库[例如 videojs 等],这些库的ui界面,js控制都已写好,功能也扩展的比较丰富 ,直接参考文档使用更加的高效! 这里还是 记录一下 html 原生 vide ...

随机推荐

  1. animatescroll.min.js ~~~~ jq滚动效果 优化target自定义方法

    $(".meun>div[name='meun_nav']>a").eq(1).on("click",function(){ $("bod ...

  2. [LeetCode] Gas Station，转化为求最大序列的解法，和更简单简单的Jump解法。

    LeetCode上 Gas Station是比较经典的一题,它的魅力在于算法足够优秀的情况下,代码可以简化到非常简洁的程度. 原题如下 Gas Station There are N gas stat ...

  3. 2017北京国庆刷题Day4 afternoon

    期望得分:100+100+0=200 实际得分:5+0+0=5 每加入一个数,x的因数位置++ 注意:根号x枚举时,如果x是完全平方数,根号x会重复累计2次,要减去 考场上没减,5分 /(ㄒoㄒ)/~ ...

  4. fastreport中文乱码问题

    fastreport的中文乱码问题,确实让人头疼,我使用的是delphi6+fastrepport4.7,在4.7版本中,主要表现在以下几种情况. 预览不乱码,保存乱码. 简体不乱码,繁体乱码. 简体 ...

  5. [hadoop]hadoop学习路线

    1.主要学习hadoop中的四大框架:hdfs.mapreduce.hive.hbase.这四大框架是hadoop最最核心的,学习难度最大的,也是应用最广泛的. 2.熟悉了解hadoop基本知识及其所 ...

  6. 【BZOJ】1706: [usaco2007 Nov]relays 奶牛接力跑

    [题意]给定m条边的无向图,起点s,终点t,要求找出s到t恰好经过n条边的最短路径.n<=10^6,m<=100. [算法]floyd+矩阵快速幂 [题解] 先对点离散化,得到点数N. 对 ...

  7. 【BZOJ】2142 礼物

    [算法]中国剩余定理 [题意]给定n件物品分给m个人,每人分到wi件,求方案数%p.p不一定是素数. [题解] 首先考虑n全排列然后按wi划分成m份,然后对于每份内都是全排列,除以wi!消除标号影响, ...

  8. [BZOJ 3039&洛谷P4147]玉蟾宫 题解（单调栈）

    [BZOJ 3039&洛谷P4147]玉蟾宫 Description 有一天,小猫rainbow和freda来到了湘西张家界的天门山玉蟾宫,玉蟾宫宫主蓝兔盛情地款待了它们,并赐予它们一片土地. ...

  9. 【leetcode 简单】第四十题 求众数

    给定一个大小为 n 的数组,找到其中的众数.众数是指在数组中出现次数大于 ⌊ n/2 ⌋ 的元素. 你可以假设数组是非空的,并且给定的数组总是存在众数. 示例 1: 输入: [3,2,3] 输出: 3 ...

  10. django框架<三>

    一.ORM操作  1.django orm创建数据库的方法 (1)指定连接pymysql(python3.x),先配置__init__.py import pymysql pymysql.instal ...