巅云智能建站平台搭建版(创业流派版)火爆上线,毕生受权!新增:文章智能收罗+全站真静态打包+都会分站+智能小法式+不法词过滤+H5自顺应+智能链词等功效功效概况
建站资讯News

HTML5 Video/Audio播放本地文件示例先容

0
一佰互联网站扶植(www.taishanly.com) 宣布时候:2020-04-20 08:56:52 阅读数: 100

这段时候常常看到开辟者在频频扣问统一个题目,为甚么经由过程设置src属性,不能播放本地的媒体文件?比方video.src=”D: est.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。

一佰互联是天下着名建站品牌办事商,咱们有九年、网站建造、网页设想、php开辟和域名注册及假造主机办事经历,供给的办事更是天下着名。最近几年来还整合团队上风自立开辟了可视化多用户”“3.0平台版,拖拽排版网站建造设想,轻松完成pc站、手机微网站、小法式、APP一体化全网营销网站扶植 ,已胜利的为天下上百家收集公司供给自助建站平台搭建办事。更多资讯:tags标签

上一篇:HTML5款式节制示例代码
下一篇: HTML5画突变背景图片并主动下载完成步骤
[前往消息列表]

相干消息more

27
04月
php天生图片考证码的体例

本文为大师分享了php天生图片考证码的体例,供大师参考,详细内容以下起首从指定字符调集中随机抽取牢固数量的字符,以一种不法则的体例画在画布上... >>概况

26
04月
thinkPHP5.0框架定名空间详解

本文实例报告了thinkPHP5.0框架定名空间。分享给大师供大师参考,详细以下:定名空间ThinkPHP接纳定名空间体例界说和主动加载类库... >>概况

25
05月
巅云五步建站——巅云模板库,让高端布衣化

您是不是想做一个有本身特点的企业网站?您是不是还在为高端建站公司的建站用度和本身的估算而忧??您是不是还在耽忧收集公司给您做的网站达不到您想要... >>概况

21
04月
浅谈CSS3中的变形功效-transform

CSS3中的变形功效:在CSS3中能够也许操纵transform功效来完成笔墨或图象的扭转、缩放、倾斜、挪动着四品种型的变形功效。1、若何操纵t... >>概况

高端网站扶植

美工统筹SEO,为企业电子商务营销助力!

德律风:

023-85725751
建站

产物

域名注册 假造主机 云办事器 企业邮局
智能建站 APP打包 微站/小法式 创业平台
网站推行 媒体营销 智能收罗 AI机械人
400德律风 短信营销 店销机械人
私家定制 流派网站