HTML5 Video/Audio播放本地文件
这段时间经常看到开发者在反复询问同一个问题，为什么通过设置src属性，不能播放本地的媒体文件？例如video.src=”D:\test.mp4”。
这是因为浏览器中的JavaScript不能直接直接访问本地资源（例如文件系统，摄像头，麦克风等），除非事先得到了用户的允许。浏览器之所以进行该限制也是很有必要的，试想一下，如果JavaScript能够肆无忌惮的访问本地的文件系统，那么窃取用户隐私数据就变得轻而易举了，当用户访问网络上的某个网页时，不知不觉中自己机器上保存的信用卡卡号，密码，公司的秘密文件等隐私文件或许已经被恶意的JavaScript程序上传到了远方的服务器上，这对用户来说是不可容忍的。
在得到用户允许后我们还是可以播放本地文件的，下面介绍一种方法。
在页面中插入一个input节点并指定type为file，如果需要播放多个文件，可以添加属性multiple。注册文件节点被更新时的回调函数，在回调函数中调用URL.createObjectURL函数来获取刚选择文件的url，然后把该url设置为audio或video的src值即可。
代码实例如下：
- <html>
- <body>
- <input type="file" id="file" onchange="onInputFileChange()">
- <audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio>
- <script>
- function onInputFileChange() {
- var file = document.getElementById('file').files[0];
- var url = URL.createObjectURL(file);
- console.log(url);
- document.getElementById("audio_id").src = url;
- }
- </script>
- </body>
- </html>
该代码在Chrome 30和Firefox 24上测试通过，在IE上应该存在一定的兼容性问题（据我所知IE8及以前的版本肯定是不能工作的），因为IE对HTML5的支持不好，不知道IE10有没有实现相关的API。
HTML5 Video/Audio播放本地文件的更多相关文章
- HTML5如何播放本地文件
HTML5在操作的过程中,很多朋友会遇到一个问题,那就是在播放本地文件的时候时常会有一些问题存在,使得HTML5才操作的过程中本地文件播放不流畅或者是不能够正常的播放.现在,我们就来看看HTML5如何 ...
- h5 audio播放音频文件
h5 audio播放音频文件 注:下面html中样式及不相关的内容去掉了 第一个例子 播放没有防盗链的外网音频文件是可以的 <!doctype html> <html> < ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- video.js播放mp4文件
HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
- 视频播放效果--video.js播放mp4文件
HTML5的标签 video 支持的mp4编码为视频编码 H.264 音频AAC 参考网址 http://www.w3school.com.cn/html5/html_5_video.asp 视频格式 ...
- 解决html5 video不能播放 能播放声音不能播放视频
<video id="playVideo" style="width:90%; height:auto;" controls poster=". ...
- IE10用video标签播放本地mp4文件失败的解决办法
1. 首先用“格式工厂”将要播放的视频文件按照“AVC高质量与大小”转换为要求格式的mp4文件: 2. 设置IIS7.5,添加mp4的MIME类型,步骤如下: 1.打开IIS管理器(运行inetmgr ...
- html5 video标签播放视频流
从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = " ...
- html5 video/audio 标签
一般来说推荐使用,第三方的媒体播放库[例如 videojs 等],这些库的ui界面,js控制都已写好,功能也扩展的比较丰富 ,直接参考文档使用更加的高效! 这里还是 记录一下 html 原生 vide ...
随机推荐
- nodejs express框架一个工程中同时使用ejs模版和jade模版
在某些项目中,比如你接手了一个别人的项目然后你不想用蛋疼的ejs,或者你不想用蛋疼的jade.你有不想重写之前的页面,那么你现在可能需要新引入ejs或者jade模块,你仅仅需要做下面两步也许就能完成使 ...
- js 生成二维码
$(".good_info").on('click',function () { var id = $(this).data('id'); var string = 'http:/ ...
- discuz安装，uc_server目录下乱码问题：
uc_server是gbk格式的情况,放服务器上,国外服务器环境可能会乱码百度检索的语句很重要,一开始,找vim编辑文本格式的问题,后来想批量解决服务器上文件格式~~~后百度:有没有其他人安装uc_s ...
- 用shell获取目录/文件夹/文件的时间戳
命令: date +%s -r 目录名/文件名 输出内容形如: 1276225332
- 将new Date() 格式化为 ’2018-10-11‘ 的字符串格式
function dateToString( date , format ){ if(!date) return ""; if (!Common.type.isDate(date) ...
- CentOS7，安装Tomcat8.5、JDK1.8，并设置开机启动（Linux CentOS Tomcat、JDK+Tomcat、Tomcat开机自启动）
1.下载JDK1.8.Tomcat8 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.ht ...
- js获取上、下级html元素 js删除html元素方法
js获取下级html元素:htmlEle.childNode; js获取上级html元素:htmlEle.parentNode; js删除当前html元素: htmlEle.removeNode(tr ...
- （3.1）用ictclas4j进行中文分词，并去除停用词
酒店评论情感分析系统——用ictclas4j进行中文分词,并去除停用词 ictclas4j是中科院计算所开发的中文分词工具ICTCLAS的Java版本,因其分词准确率较高,而备受青睐. 注:ictcl ...
- 【BZOJ】2134: 单选错位 期望DP
[题意]有n道题,第i道题有ai个选项.把第i道题的正确答案填到第i+1道题上(n填到1),问期望做对几道题.n<=10^7. [算法]期望DP [题解]正确答案的随机分布不受某道题填到后面是否 ...
- JodaTime报时区异常错误
在将爬下来的网页解析需要的字段批量入口的时候(逻辑类似下面): @Test public void test_001(){ String TIME = "1990-04-15"; ...