HTML5 Video/Audio播放本地文件示例介绍


Posted in HTML / CSS onNovember 18, 2013

这段时间经常看到开发者在反复询问同一个问题,为什么通过设置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。
HTML / CSS 相关文章推荐
css3设置box-pack和box-align让div里面的元素垂直居中
Sep 01 HTML / CSS
利用CSS3实现圆角的outline效果的教程
Jun 05 HTML / CSS
HTML+CSS3模拟心的跳动实例代码
Sep 05 HTML / CSS
HTML5 placeholder属性详解
Jun 22 HTML / CSS
HTML5如何实现元素拖拽
Mar 11 HTML / CSS
html5调用摄像头功能的实现代码
May 07 HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 HTML / CSS
html5图片上传预览示例分享
Apr 14 HTML / CSS
html5 冒号分隔符对齐的实现
Jul 31 HTML / CSS
使用canvas实现雪花飘动效果的示例代码
Mar 30 HTML / CSS
css3 filter属性的使用简介
Mar 31 HTML / CSS
css弧边选项卡的项目实践
May 07 HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 #HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 #HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 #HTML / CSS
HTML5语音识别标签写法附图
Nov 18 #HTML / CSS
html5 video标签屏蔽右键视频另存为的js代码
Nov 12 #HTML / CSS
html5 Web SQL Database 之事务处理函数transaction与executeSQL解析
Nov 07 #HTML / CSS
html5跨域通讯之postMessage的用法总结
Nov 07 #HTML / CSS
You might like
php模拟js函数unescape的函数代码
2012/10/20 PHP
CI框架实现框架前后端分离的方法详解
2016/12/30 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
PHP 图片合成、仿微信群头像的方法示例
2019/10/25 PHP
Hutia 的 JS 代码集
2006/10/24 Javascript
jQuery bind事件使用详解
2011/05/05 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
JavaScript设置body高度为浏览器高度的方法
2015/02/09 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
Vue Spa切换页面时更改标题的实例代码
2017/07/15 Javascript
JS实现身份证输入框的输入效果
2017/08/21 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
Python深入学习之对象的属性
2014/08/31 Python
Python基于高斯消元法计算线性方程组示例
2018/01/17 Python
对Python之gzip文件读写的方法详解
2019/02/08 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
Python上下文管理器类和上下文管理器装饰器contextmanager用法实例分析
2019/11/07 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
德国化妆品和天然化妆品网上商店:kosmetikfuchs.de
2017/06/09 全球购物
印度在线杂货店:bigbasket
2018/08/23 全球购物
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
NFL官方在线商店:NFLShop
2020/07/29 全球购物
大学同学聚会邀请函
2014/01/19 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
大三学生学年自我鉴定
2014/09/12 职场文书
兵马俑导游词
2015/02/02 职场文书
应届生个人的求职(自荐信范文2篇)
2019/08/23 职场文书
python数字图像处理:图像简单滤波
2022/06/28 Python