1. 背景
公司有个旧项目需要添加在线播放 m3u8 视频流，但是该流不知道什么原因使用 Video.js 或 hls.js 均无法播放，最后找到解决方案可使用 VLC 插件播放(360 极速模式下)
2. 示例代码
<!DOCTYPE html> <html> <head> <title>web camera</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript"> //仅适用于IE浏览器是，并且安装有vlc插件，则返回true； function isInsalledIEVLC(){ var vlcObj = null; var vlcInstalled= false; try { vlcObj = new ActiveXObject("VideoLAN.Vlcplugin.1"); if( vlcObj != null ){ vlcInstalled = true } } catch (e) { vlcInstalled= false; } return vlcInstalled; } //仅适用于firefox浏览器是，并且安装有vlc插件，则返回true； function isInsalledFFVLC(){ var numPlugins=navigator.plugins.length; for (i=0;i<numPlugins;i++){ plugin=navigator.plugins[i]; if(plugin.name.indexOf("VideoLAN") > -1 || plugin.name.indexOf("VLC") > -1){ return true; } } return false; } /* 浏览器检测 */ function checkBrowser(){ var browser=navigator.appName; var b_version=navigator.appVersion; var version=parseFloat(b_version); var download_url = "https://download.videolan.org/pub/videolan/vlc/2.2.1/win32/"; if ( browser=="Netscape" && version>=4) { if(isInsalledFFVLC()){ //alert("已装VLC插件"); }else{ alert("未装VLC插件,请先安装插件"); location.href=download_url; } }else if(browser=="Microsoft Internet Explorer" && version>=4) { if(isInsalledIEVLC()){ //alert("已装VLC插件"); }else{ alert("未装VLC插件,请先安装插件"); location.href=download_url; } } } </script> </head> <body bgcolor="white" text="black" onload="checkBrowser();"> <embed type="application/x-vlc-plugin" pluginspage="http://www.videola.org" width="640" height="480" id="vlc" version="VideoLAN.VLCPlugin.2" autoplay="yes" loop="no" target="https://video-dev.github.io/streams/x36xhzz/x36xhzz.m3u8" > </body> </html>
注意：不管本地操作系统是 32 位还是 64 均需安装 32 位的 VLC 播放器，否则插件无法成功安装