为什么无法直接播放本地媒体文件
最近，不少开发的小伙伴们都头疼这个事儿呢——他们用JavaScript给一些元素设值，想让它放上本地的视频、音频啥的，结果却发现怎么也播不了！其实，这都是因为浏览器里的JS有了点限制，它不能直接打开你电脑上的文件、摄像头或者麦克风这样的本地资源，除非你已经授权允许。这么做，也是为了保护咱们用户的信息安全。比如说，要是JS随便就能读我们电脑里的文件，那坏人就容易把我们的私人资料盗走再传到网上去，想想多可怕呀。
如何获得用户允许播放本地文件
虽然有些限制，但是只要你让我知道你想听啥歌或者看啥视频，我还是有办法帮到你滴！首先，我会在网页上放一个输入框，这个input节点得设成file类型。如果你还有其他文件想要播放，那就加上multiple属性。接着，等文件改变了之后，我就会启动一个处理程序，来处理URL.createObjectURL函数拿到你新选的那份文件的url这件事。最后，直接把这个url放到audio或video的src里面就能开始播！
代码示例及兼容性问题
这就是 Chrome 30 和 Firefox 24 上都能跑好的代码，看这里：
html
下面这个小技巧会让你的网页看起来更酷炫！当你点击("fileInput")文件输入控件时，它就会触发一个叫做"change"的事件。然后，浏览器就会调用上面代码里的函数，这样就能处理好那些文件数据了。
var file =e.target.files[0];
先创建个叫做url的变量，就是从我们电脑现在这位置上获取文件的地址。
给视频换个新地址，就是直接在页面代码中输入这行——document.querySelector('video').src =url。
});
要注意，用IE浏览器会有小麻烦，特别是IE8和以前的版本就别指望能用了。因为IE对HTML5的支持还不大行，所以IE10或更好的版本可能有些API实现有点不同。
安全性考量与授权机制
不单是浏览器，HTML5也顾及到了安全这点儿，比如它有个getUserMedia API用来申请摄像头或者麦克风的使用权，浏览器就会跳出来问你要不要同意，免得你的设备被恶搞，资料丢掉！
媒体格式支持与编码技巧
我们选格式得看浏览器支不支持那些视频或音频，比如 MP4、WebM 啥的，还有 MP3、WAV、Ogg 那些声音格式。对了，编码也很重要，用对了编码才能保证在各种设备上播出来都顺畅！
流媒体技术与实时传输
除了能放自己电脑里的歌儿之外，HTML5还能看流媒体视频！就像用WebSocket、WebRTC这些技术，咱们自己也能搞出很牛掰的、互动性很强的多媒体应用，就为了让大家能看好的视频和音频呗。
function onInputFileChange() {
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
console.log(url);
document.getElementById("audio_id").src = url;
}
移动端适配与响应式设计
现在谁还用电脑？大家都爱玩手机，所以做HTML5视频/音频应用时记得兼顾手机端！用好用的MediaQuery和Flex布局，让你的网页在各种大小屏幕、分辨率的手机上都能美美的展示出来，就这么简单！
多媒体交互与用户体验优化
设计多媒体互动界面的时候，别忘了加那些让用户感觉更好的功能。例如搞个播放进度条、音量调节之类的小玩意儿，用上css3动画和javascript交互技术，让页面变得活泼有趣，吸引人眼球！
未来发展趋势与新技术应用
随着网速越来越快，HTML5视频和音频播放也变得越来越普遍了。未来的解决办法可能会智能化点、自己能调整适应各种环境，就像手机一样，而且还能在各种设备上用。就像WebAssembly还有WebVR这样的新科技，它们能让HTML5视频和音频播放的可能性大大提高！
评论0