为什么通过设置src属性,不能播放本地的媒体文件?例如video.src=”D:\test.mp4”。
在浏览器中的JavaScript未经用户的允许,不能直接直接访问本地资源,例如文件系统,摄像头,麦克风等。防止本地信息被恶意的JavaScript程序上传到了远方的服务器上。
在得到用户允许后,还是可以播放本地文件的,下面介绍一种方法。
在页面中插入一个input节点并指定type为file,如果需要播放多个文件,可以添加属性multiple。注册文件节点被更新时的回调函数,在回调函数中调用URL.createObjectURL函数来获取刚选择文件的url,然后把该url设置为audio或video的src值即可。
代码实例如下:
<html>
<body>
<input type="file" id="file" onchange="onInputFileChange()">
<video id="video_id" controls autoplay loop>Your browser can't support HTML5 Video</video>
<script>
function onInputFileChange() {
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("video_id").src = url;
}
</script>
</body>
</html>