【原创】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这里显示指定画面作为初始封面。。