这段时间经常看到开发者在反复询问同一个问题,为什么通过设置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. [吴恩达机器学习笔记]12支持向量机3SVM大间距分类的数学解释

    12.支持向量机 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考资料 斯坦福大学 2014 机器学习教程中文笔记 by 黄海广 12.3 大间距分类背后的数学原理- Mathematic ...

  2. libiconv的注意项

    编译后有用的头文件zlib.h和zconf.h,使用时#include "zlib.h". 其中有三个核心的函数: iconv_ticonv_open(constchar*toco ...

  3. OpenCV---超大图像二值化和空白区域过滤

    超大图像的二值化方法 1.可以采用分块方法, 2.先缩放处理就行二值化,然后还原大小 一:分块处理超大图像的二值化问题 def big_image_binary(image): print(image ...

  4. mysql 查询小demo

    两张表的的结构如下,需求是写出从one表到two表和从two表到one表的查询转换. create table student_one( name varchar(50) default '' not ...

  5. 解决SpringMVC put,patch,delete请求数据拿不到的问题

    解决SpringMVC put,patch,delete请求参数拿不到的问题 废话不多说,核心代码如下: 在web.xml中添加如下代码 <!-- 解决web端不能put,delete等请求的问 ...

  6. NOIP模拟3

    期望得分:30+90+100=220 实际得分:30+0+10=40 T1智障错误:n*m是n行m列,硬是做成了m行n列 T2智障错误:读入三个数写了两个%d T3智障错误:数值相同不代表是同一个数 ...

  7. System Administrator(构造,图论)

    System Administrator time limit per test 2 seconds memory limit per test 256 megabytes input standar ...

  8. 51nod1773 A国的贸易

    基准时间限制:2 秒 空间限制:524288 KB 分值: 40  A国是一个神奇的国家. 这个国家有 2n 个城市,每个城市都有一个独一无二的编号 ,编号范围为0~2n-1. A国的神奇体现在,他们 ...

  9. jquery-load()方法

    调用load方法的完整格式是:load( url, [data], [callback] ), 其中: •url:是指要导入文件的地址. •data:可选参数:因为Load不仅仅可以导入静态的html ...

  10. JWT 拓展

    JWT适用场景 https://www.jianshu.com/p/af8360b83a9f 适用于一次性操作的认证,颁布一个很短过期时间的JWT给浏览器. 无状态的JWT无法实现精确的在线人数统计. ...