Vlc

一、项目起源公司项目中需要视频播放，并且需要实现倍速播放，最重要的是需要兼容IE8，于是乎HTML5的video显然无法使用，只能另辟蹊径，查找资料最终决定使用vlc视频播放插件兼容IE，再加上video，可以实现全浏览器兼容的视频播放和倍速播放。二、解决思路首先H5video无法兼容低版本IE，考虑使用ActiveX视频播放插件，vlc视频播放软件有自带的ActiveX插件，安装时会自动安装插件，不过要注意的是vlc的版本必须与IE浏览器的版本一致（即如果IE是32位则必须安装32位vlc）。使用vlc解决IE的视频播放和倍速播放，其它浏览器则使用video实现。三、解决办法1、判断浏览器类型// 获取浏览器类型 function getBrowserInfo() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf(“Opera”) > -1; //判断是否Opera浏览器 var isIE = window.ActiveXObject || “ActiveXObject” in window var isEdge = userAgent.indexOf(“Edge”) > -1; //判断是否IE的Edge浏览器 var isFF = userAgent.indexOf(“Firefox”) > -1; //判断是否Firefox浏览器 var isSafari = userAgent.indexOf(“Safari”) > -1 && userAgent.indexOf(“Chrome”) == -1; //判断是否Safari浏览器 var isChrome = userAgent.indexOf(“Chrome”) > -1 && userAgent.indexOf(“Safari”) > -1 && !isEdge; //判断Chrome浏览器 if (isIE) { var reIE = new RegExp(“MSIE (\d+\.\d+);”); reIE.test(userAgent); var fIEVersion = parseFloat(RegExp["$1"]); if (userAgent.indexOf(‘MSIE 6.0’) != -1) { return “IE6”; } else if (fIEVersion == 7) { return “IE7”; } else if (fIEVersion == 8) { return “IE8”; } else if (fIEVersion == 9) { return “IE9”; } else if (fIEVersion == 10) { return “IE10”; } else if (userAgent.toLowerCase().match(/rv:([\d.]+)) like gecko/)) { return “IE11”; } else { return “0” } //IE版本过低 } //isIE end if (isFF) { return “FF”; } if (isOpera) { return “Opera”; } if (isSafari) { return “Safari”; } if (isChrome) { return “Chrome”; } if (isEdge) { return “Edge”; } }2、若是IE则判断是否安装vlc ActiveX插件 function isInsalledIEVLC() { var vlcObj = null; var vlcInstalled = false; try { vlcObj = new ActiveXObject(“VideoLAN.Vlcplugin.2”); if (vlcObj != null) { vlcInstalled = true } } catch (e) { vlcInstalled = false; } return vlcInstalled; }3、若未安装则判断浏览器版本，根据版本下载对应的vlc // 获取浏览器32位还是64位，安装对应的vlc function getPlatform() { var agent = navigator.platform.toLowerCase(); if (agent.indexOf(“win64”) >= 0 || agent.indexOf(“wow64”) >= 0) { return “win64”; } else if(agent.indexOf(“win32”) >= 0 || agent.indexOf(“wow32”) >= 0){ return “win32”; } }4、若是IE浏览器且已安装vlc，HTML标签如下<embed id=“vlcObj” type=“application/x-vlc-plugin” pluginspage=“http://www.videolan.org” width=“100%” height=“480” />5、非IE浏览器使用video <video id=“video” src="" controls width=“100%” height=“480”> 您的浏览器版本太旧，请更新版本或使用其他浏览器 </video>6、播放和暂停 var useVlc = getBrowserInfo().indexOf(‘IE’) != -1; var VIDEO = document.getElementById(“video”); var VLC = document.getElementById(“vlcObj”); // 播放 function playVideo(url) { if(useVlc){ url ? VLC.playlist.add(url) : “”; VLC.playlist.play(); }else{ url ? VIDEO.src = url : “”; VIDEO.networkState != 3 ? VIDEO.play() : “”; } } // 暂停播放 function zanting() { if(useVlc){ VLC.playlist.pause(); }else{ VIDEO.pause(); } }7、倍速播放// 绑定倍速 <select id=“beisu”> <option value=“0.5”>0.5x</option> <option value=“1” selected>1.0x</option> <option value=“1.25”>1.25x</option> <option value=“1.5”>1.5x</option> <option value=“2”>2.0x</option> </select> $("#beisu").on(“change”, function(){ var v = $(this).val(); if (useVlc) { VLC.input.rate = v; } else { VIDEO.playbackRate = v; } });8、快进、快退 // 快进10秒播放 function kuaijin() { if(useVlc){ VLC.input.time += 10000; }else{ VIDEO.currentTime += 10; } } // 快退10秒播放 function kuaitui() { if(useVlc){ VLC.input.time -= 10000; }else{ VIDEO.currentTime -= 10; } } ...

本文的创作灵感是由Windows screen recording with FFmpeg UScreenCapture and NGINX RTMP module而来，笔者建议大家可以先去原文看一下大致的内容，但需要一定的英文阅读能力，本文并不是照搬翻译，而是根据原文成功搭建直播系统的基础上增加了服务器录制和本地录制的内容：系统环境：Windows 7 Service Pack 1 64bit软件准备：ffmpeg：这里笔者使用原文的地址下载了官方打包好的可执行文件nginx：这里笔者使用原文的地址下载了编译好nginx rtmp module的打包文件UScreenCapture(x64)：请参看原文下载地址QtAv：笔者在二次开发时选择的库 （可选）vlc-qt：基于vlc的库（可选）,笔者一开始做本地录制功能的时候选择了这个库，但是在尝试本地播放视频同时录制的时候，发现开始录制后没有停止录制的接口，于是就放弃了libvlc：vlc官方的开源组件，可供其他开发平台调用（可选），上面的vlc-qt是基于Qt开发环境的，如果不依赖Qt可以尝试用这个库，不过需要看一下官方的开发文档，笔者并没有相关开发经验，就不做过多介绍了产品需求：将某台PC的桌面作为视频直播源，推送至直播服务器，可供局域网内的其他PC通过视频播放器观看，观看直播的同时可以随时开始/停止录制当前的播放内容开发步骤：安装UScreenCapture(x64)，后续作为可用视频输入源供ffmpeg使用点击下载好的nginx目录中的nginx.exe，启动nginx服务器，根据conf文件夹中的nginx.conf配置，此时服务器会监听81-web端口和1935-rtmp端口打开命令提示符（cmd），输入以下命令，此命令用于确认是否正确安装并ffmpeg可以识别UscreenCapture作为视频流输入源：[这里是ffmpeg文件夹的绝对路径]/ffmpeg.exe -list_devices true -f dshow -i dummy[这里是ffmpeg文件夹的绝对路径]/ffmpeg -f dshow -i video=“UScreenCapture” -preset ultrafast -f flv rtmp://127.0.0.1/view/test上述代码的作用就是，以UScreenCapture作为输入源，编码速率设定为ultrafast，编码格式为flv，将视频媒体流推送到rtmp://127.0.0.1/view/test这个地址上当然，其中输入源可以选择摄像头，本地视频文件等；编码速率，格式以及推送地址都可以根据需要进行配置，最终的目的都是为了把本地源推送至服务器以供远程播放器使用测试直播是否正常可以使用ffmpeg文件夹中的ffplay rtmp://127.0.0.1/view/test, 也可以使用其他播放器，如vlc player如果需要录制视频功能，可以选择以下两种方案，录制后的文件各自保存的位置不同播放端录制使用QtAv的VideoDecoder+VideoEncoder+AVMuxer+AVDemuxer,将播放源进行编解码后保存到本地，因为官方没有正式的例子，下文的代码仅供演示使用（代码整理中，后续尽快添加）To Be Continued。。。服务器端录制 利用nginx rtmp module的rtmp_control功能，通过HTTP协议在服务器端进行开始录制及停止录制操作，nginx端的配置见下文server { …… location /control { rtmp_control all; }}rtmp { server { listen 1935; application view {下面的录制命令app参数会用到这个配置名 live on; recorder NAME_THIS_WHAT_YOU_WANT { # 下面的录制命令rec参数会用到这个配置名 record all manual; record_suffix -%Y-%m-%d-%H%M.mp4; record_path C:\nginx\recordings; record_unique on; } } }}rtmp://127.0.0.1/view/test，其中view是服务器配置的rtmp服务名，test是自定义的视频流名称启动录制：http://localhost:81/control/record/start?app=view&name=自定义的视频流名称&rec=NAME_THIS_WHAT_YOU_WANT停止录制：http://localhost:81/control/record/stop?app=view&name=自定义的视频流名称&rec=NAME_THIS_WHAT_YOU_WANT ...

近日，VideoLAN的主席Jean-Baptiste Kempf在其博客介绍了新的AV1解码器——Dav1d。Kempf表示，AV1的参考解码器很好，但他只是一套用于研究的编码，有许多需要改进的地方。因此，在 AOMedia 的资助下，开源社区 VideoLAN、VLC 和 FFmpeg 开始动手开发一个新的解码器，这个 AV1 的新 Decoder 被称为 Dav1d。Kempf介绍道，Dav1d的目标是：更小，更快，支持跨平台使用，正确地并行调度（correctly threaded）以及开源。性能方面，与参考解码器相比，Dav1d的源代码是参考解码器代码行的1/10，体积只有其1/3大小。Dav1d内存占用只有参考解码器的1/4，并且使用了非常有限的堆栈。Dav1d几乎没有汇编代码，但是Kempf认为这并不奇怪，实际上是未来的良好起点。相关资料：博客原文：http://www.jbkempf.com/blog/Dav1d代码：https://code.videolan.org/vid…Dav1d使用BSD许可，项目地址为：https://code.videolan.org/vid…在VDD 2018上，Kempf介绍了dav1d的详细信息：https://www.youtube.com/watch…更多技术干货、行业洞察，请关注网易云信博客。