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 ...
随机推荐
- bzoj 1510 [POI2006]Kra-The Disks 二分
1510: [POI2006]Kra-The Disks Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 466 Solved: 272[Submit][ ...
- socket编程 ------ sockaddr_in 和 sockaddr 的区别
struct sockaddr 和 struct sockaddr_in 这两个结构体用来处理网络通信的地址. // 以下是 IPv4 的定义 struct sockaddr { unsigned s ...
- 居中div,居中浮动的元素
定位法:position:absolute 如果子级div有定义宽和高的话就可以用这个方法.注意:margin-top,和margin-left的值均为高和宽值的一半 margin:auto法 这个也 ...
- POJ 2318/2398 叉积性质
2318 2398 题意:给出n条线将一块区域分成n+1块空间,再给出m个点,询问这些点在哪个空间里. 思路:由于只要求相对位置关系,而对具体位置不关心,那么易使用叉积性质得到相对位置关系(左侧/右侧 ...
- 2015/11/3用Python写游戏,pygame入门(3):字体模块、事件显示和错误处理
游戏里面一般是肯定会出现文字显示的,即使是俄罗斯方块也应该显示分数.那么我们应该怎样来显示文字呢,今天一起学习一下pygame的font模块. 使用字体模块 pygame可以直接调用系统字体,也可以调 ...
- 基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境 Express 是比较经典的,也是最常用的 Nodejs Web框架. 一.Express 快速构建一个web应用 ...
- Tool1—安装配置Windows Live Writer
详细步骤请看:http://home.cnblogs.com/group/topic/8550.html . Windows Live Writer手工配置步骤(在博客园配置时输入用户名与密码会自动完 ...
- 【洛谷P1104】生日
题目描述 cjf君想调查学校OI组每个同学的生日,并按照从大到小的顺序排序.但cjf君最近作业很多,没有时间,所以请你帮她排序. 输入输出格式 输入格式: 有2行,第1行为OI组总人数n:第2行至第n ...
- 【leetcode 简单】第二十七题 二叉树的最小深度
给定一个二叉树,找出其最小深度. 最小深度是从根节点到最近叶子节点的最短路径上的节点数量. 说明: 叶子节点是指没有子节点的节点. 示例: 给定二叉树 [3,9,20,null,null,15,7], ...
- VC连接access
(1)首先拷贝 c:\program files\common files\system\ado\ 目录中的 msado15.dll 文件到项目中. (2)在VC中加入DLL,具体方法如下: (3)创 ...