使用HTML和JavaScript播放本地的媒体(视频音频)文件的方法 傷城~ 2022-10-30 11:26 267阅读 0赞 首先提示,处于安全的需要JavaScript不能直接访问本地资源文件,那怎么办呢?下面介绍一种方法。在页面中插入一个input节点并指定type为file,如果需要播放多个文件,可以添加属性multiple。注册文件节点被更新时的回调函数,在回调函数中调用URL.createObjectURL函数来获取刚选择文件的url,然后把该url设置为audio或video的src值即可。 1、使用HTML和JavaScript播放本地视频文件的示例,源码如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 <!DOCTYPE html> <html > <head> <meta charset="utf-8"> <title>播放本地的视频文件</title> </head> <body> <h3><center>视频播放测试<center></h3> <hr color="\#666666"> <input type="file" id="file" οnchange="onInputFileChange()"> <br/> <video id="video\_id" width="520" height="360" controls autoplay loop>你的浏览器不能支持HTML5视频</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>
还没有评论,来说两句吧...