【原创】HTML5播放本地音频/视频

使用网页播放本地音频或者视频可以免除安装本地播放器软件(顺便安利:最好的播放器软件就是PotPlayer)的麻烦,不过如果单纯使用HTML5自带audio/video播放器还是比较鸡肋,支持的文件类型不够多,好在我也没啥大追求,尝试实现就好了。

原理上来讲,网页访问本地文件是有安全问题的,所以标准做法是用过input控件来获取并指定本地文件,这个给我造成一些困扰。因为我最初想实现的功能是希望降低网页的流量。比如把音频视频用过百度分享,用户下载到本地后,使用网页页面的程序或者算法来按照指定源播放就好了,而不是还要依赖人的选择。无论如何,算是一个开始吧

本文试图说明这个初始的小功能。

先看例子

HTML5播放本地音频



关键代码

以下是关键代码,重点在于使用type为file的input控件来获取用户的授权,并定位被播放文件,然后使用js来创建HTML5的播放URL

<audio id="audio_id" controls autoplay loop>Your browser can't support HTML5 Audio</audio><br/>
<input type="file" id="audio_file" onchange="onInputaudioChange()">
<video width="100%" id="video_id" controls autoplay loop>Your browser can't support HTML5 Video</video><br/>
<input type="file" id="video_file" onchange="onInputvideoChange()">
<script>
function onInputaudioChange() {
   var file = document.getElementById('audio_file').files[0];
   var url = URL.createObjectURL(file);
   document.getElementById("audio_id").src = url;
}
function onInputvideoChange() {
   var file = document.getElementById('video_file').files[0];
   var url = URL.createObjectURL(file);
   document.getElementById("video_id").src = url;
}
</script> 

彩蛋

其实如果真是按照刚才那段代码来写的话,初始画面是米色空白的,但是现在你看到的是一个星空的样子,还写着4个牛逼烘烘的字“视频播放”,这个是咋弄的呢。。其实也是偶然的机会,我居然在某个地方看到设置初始封面的代码,就是一个video的属性,叫做poster,可以在poster这里显示指定画面作为初始封面。。