HTML5 Video/Audio播放本地文件的方法

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

本篇内容主要讲解“HTML5 Video/Audio播放本地文件的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5 Video/Audio播放本地文件的方法”吧!

在得到用户允许后我们还是可以播放本地文件的，在页面中插入一个input节点并指定type为file，然后把该url设置为audio或video的class="lazy" data-src值即可

这段时间经常看到开发者在反复询问同一个问题，为什么通过设置class="lazy" data-src属性，不能播放本地的媒体文件？例如video.class="lazy" data-src=”D:/test.mp4”。

这是因为浏览器中的JavaScript不能直接直接访问本地资源（例如文件系统，摄像头，麦克风等），除非事先得到了用户的允许。浏览器之所以进行该限制也是很有必要的，试想一下，如果JavaScript能够肆无忌惮的访问本地的文件系统，那么窃取用户隐私数据就变得轻而易举了，当用户访问网络上的某个网页时，不知不觉中自己机器上保存的信用卡卡号，密码，公司的秘密文件等隐私文件或许已经被恶意的JavaScript程序上传到了远方的服务器上，这对用户来说是不可容忍的。

在得到用户允许后我们还是可以播放本地文件的，下面介绍一种方法。

在页面中插入一个input节点并指定type为file，如果需要播放多个文件，可以添加属性multiple。注册文件节点被更新时的回调函数，在回调函数中调用URL.createObjectURL函数来获取刚选择文件的url，然后把该url设置为audio或video的class="lazy" data-src值即可。

代码实例如下：

<html>

<body>

<audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio>

function onInputFileChange() {

var file = document.getElementById('file').files[0];

var url = URL.createObjectURL(file);

console.log(url);

document.getElementById("audio_id").class="lazy" data-src = url;

}

</script>

</body>