如何快速让cef、wke、blink等支持mp4和mp3(支持html5的video和audio标签)?
在cef中，默认是不支持mp3和mp4的，使用cef控件写的软件打开带有video或audio标签的视频或音频是会播放失败的!一种方法就是自己重新编译cef的库，加入支持mp3和mp4的支持。如何编译看这篇文章 如何让dcef3支持mp3和h.264 mp4解码播放(有源码及dll)!
这是从文件的本身出发，修改后支持mp3和mp4，从另一方面来说，采用cef的精简版控件，比如wke,blink或低版本的ie等，修改文件重新编译支持mp3和mp4的方法就不可行了!能不能不修改文件直接支持mp3和mp4的video和audio标签呢？这儿介绍一种修改html本身而不动浏览器控件文件的解决方法，当然你得有修改html文件的权限。
使用html5media让浏览器兼容<Video><Audio>标签。html5media是一个开源项目
html5media 官网：https://html5media.info/
html5media 项目：https://github.com/etianen/html5media
html5media Wiki：https://github.com/etianen/html5media/wiki
html5media 官网CDN:http://api.html5media.info/1.2.2/html5media.min.js
html5media 国内CDN:http://www.bootcdn.cn/html5media/
如何使用html5media？它只需要一行代码就可以使HTML5的video和audio标签在所有主流浏览器中都能正常工作。只需要在html的head文档中添加如下代码
1 | < script src = “ http://api.html5media.info/1.1.8/html5media.min.js ” > </ script > |
然后按照html5的video标签添加的视频
1 | < video src="video.mp4" preload="" controls="controls" width="320" height="200"> |
按照html5的audio标签添加的音频
1 | <audio src="audio.mp3" controls preload> |
都可以正常播放了!
html5media的原理就是把不支持<Video><Audio>标签的替换为使用flash播放！
这样使用html5media后，cef、wke、blink等所有浏览器都支持html5的video和audio标签了!
如果你是使用wke或blink在自己的程序界面中添加显示mp4或mp3，那么你需要自己把html5media.min.js和flowplayer.audio.swf flowplayer.controls.swf flowplayer.swf文件全部下载到你的程序目录(js文件和swf放在同一目录)，在你的程序中就可以在wke或blink中使用video或audio标签了!
