视频无插件播放是怎么做到呢？

你有没碰到这种情况

1、想打开一个网络摄像机或者NVR配置一下参数，结果要求你用IE浏览器，还要下载一个OCX控件才能登陆进去到一个摄像机的管理界面.

2、在一套web系统中，里面有视频监控模块，要实时播放视频或者回放视频的时候，也需要下载一个控件才能行。

这个就是这套系统（摄像机或者NVR或者业务系统）不支持主动视频无插件播放的结果。

我们以前怎么做到在浏览器播放视频呢？

几年前，我们在B/S架构中涉及视频播放时，基本都是使用ocx来解决这个问题。 看一个例子（Delphi下的）:

 

type

  TSmartCCTVCtrl = class(TActiveForm, ISmartCCTVCtrl)'

public
function Sys_GetVersion: WideString; safecall;
function Sys_SetLanguageID(ALanguageID: Integer): WideString; safecall;
function Sys_ForceFree: WideString; safecall;

function Sys_DataService_RetrievePluginList: WideString; safecall;
function Sys_DataService_RetriveAlarmKindList: WideString; safecall;
public
function DataPrepare_Login(const ACMSIP: WideString; ACMSPort: Integer; const ALoginCode, ALoginPwd: WideString; ACSBS: Integer): WideString; safecall;
function DataPrepare_IsDataOK: WideString; safecall;
function DataPrepare_Logout: WideString; safecall;

function UIControl_SetViewMode (AViewMode: Integer): WideString; safecall;
function UIControl_SetToolBarMode (const AControlStr: WideString): WideString; safecall;
function UIControl_SetDisplayMode(ADisplayMode: Integer): WideString; safecall;
public
function RTV_SetLocalFilePath(const Param1: WideString): WideString; safecall;
function RTV_SetPlayLimited(AMode: Integer): WideString; safecall;
function RTV_SetMediaAccessMode(AMode: Integer): WideString; safecall;
function RTV_SetRule(const Param1: WideString): WideString; safecall;

function RTV_SetVideoEffect(Param1, Param2, Param3, Param4: Integer): WideString; safecall;

function RTV_PTZ_PTZTurn (Param1, Param2, Param3: Integer): WideString; safecall;
function RTV_PTZ_PTZControl(Param1, Param2, Param3: Integer): WideString; safecall;
function RTV_PTZ_PTZPreset (Param1, Param2, Param3: Integer): WideString; safecall;
function RTV_PTZ_PTZCruise (Param1, Param2: Integer) : WideString; safecall;

function RTV_PlayStart(const AChannelID: WideString): WideString; safecall;
function RTV_PlayWith_WholeHost(const AHostID: WideString): WideString; safecall;
function RTV_PlayWith_WholePreviewGroup( const APreviewgroupid: WideString): WideString; safecall;

function RTV_PlayWith_Channel_By_HostIDAndIndex (const AHostID: WideString; AIndex: Integer): WideString; safecall;
function RTV_PlayWith_Channel_By_HostIPAndIndex (const AHostIP: WideString; AIndex: Integer): WideString; safecall;
function RTV_PlayWith_Channel_By_HostSerialNoAndIndex(const AHostSerialNo: WideString; AIndex: Integer): WideString; safecall;
function RTV_PlayWith_Channel_By_ChannelNickID (const ANickID: WideString; ProjectFlag: Integer): WideString; safecall;

function RTV_PopPlay(const AChannelID: WideString; ACodeType: Integer): WideString; safecall;
function RTV_PopPlayEx(const AChannelID: WideString; ACodeType: Integer; const ACaption: WideString; X, Y, Width, Height: Integer): WideString; safecall;
function RTV_PopStopAll: WideString; safecall;

function RTV_PlayStop(ACellIndex: Integer): WideString; safecall;
function RTV_PalyStopCurrent: WideString; safecall;
function RTV_PlayStopAll: WideString; safecall;

function RTV_IsChannelPlaying(const AChannelID: WideString; AEnv: Integer): WideString; safecall;
function RTV_GetCurrentChannelID: WideString; safecall;
public // ;
//
function AlarmService_SetEnable(AEnabled: Integer): WideString; safecall;
function AlarmService_SetCallBack(AFunc: Integer): WideString; safecall;
function AlarmService_SetRule(Param1: Integer): WideString; safecall;

//֧ 8008 rih ;
function AlarmHostCtrl_SetEnable(AEnabled: Integer): WideString; safecall;

function AlarmHostCtrl_UICtrl_SetBCF (const AHostID: WideString): WideString; safecall;
function AlarmHostCtrl_UICtrl_ChannelOutput (const AHostID: WideString): WideString; safecall;

function AlarmHostCtrl_Directly_SetBCF(const AHostID, AHostIP: WideString; AState: Integer): WideString; safecall;
function AlarmHostCtrl_Directly_ChannelOutput(const AHostID, AHostIP: WideString; AChannelIndex, AAction: Integer): WideString; safecall;

function AlarmHostCtrl_DataService_RetrieveAll: WideString; safecall;
function AlarmHostCtrl_DataService_Retrieve_ByBranch(const ABranchID: WideString; AIsMulti: Integer): WideString; safecall;
function AlarmHostCtrl_DataService_Retrieve_ByKeyword (const AKeyWord : WideString): WideString; safecall;
function AlarmHostCtrl_DataService_Retrieve_ByProductor(const AProducotorID: WideString): WideString; safecall;

function AlarmHostCtrl_DataService_GetAddr ( const AHostID: WideString): WideString; safecall;
function AlarmHostCtrl_DataService_GetValue ( AObjectPointer: Integer): WideString; safecall;

function AlarmHostCtrl_ConfigService_DeviceSearch ( const ASVRIP: WideString): WideString; safecall;
function AlarmHostCtrl_ConfigService_DeviceConfig( const AHostID: WideString): WideString; safecall;
function AlarmHostCtrl_ConfigService_SVRConfig( const ASVRIP: WideString): WideString; safecall;

 

public // ;
function MatrixCtrl_SetEnable(AEnabled: Integer): WideString; safecall;

function MatrixCtrl_UICtrl_ShowTVWall( const AWallID: WideString): WideString; safecall;
function MatrixCtrl_UICtrl_SetDisplayMode( ADisplayMode: Integer): WideString; safecall;
function MatrixCtrl_UICtrl_Identity: WideString; safecall;

function MatrixCtrl_RTVPlay(const AChannelID: WideString): WideString; safecall;

function MatrixCtrl_PollingJob_StartPreviewGroup(const APreviewGroupID, ACellStr: WideString; ATimeInterval: Integer): WideString; safecall;
function MatrixCtrl_PollingJob_StartScheuleJob( const AJobID: WideString): WideString; safecall;

function MatrixCtrl_PollingJob_RetrieveAll: WideString; safecall;

function MatrixCtrl_PollingJob_Stop (const AJobID: WideString) : WideString; safecall;
function MatrixCtrl_PollingJob_StopAll( AKind: Integer) : WideString; safecall;
function MatrixCtrl_GetCurrentChannelID: WideString; safecall;

function MatrixCtrl_PTZ_PTZTurn (Param2, Param3, Param4: Integer) : WideString; safecall;
function MatrixCtrl_PTZ_PTZControl(Param2, Param3, Param4: Integer) : WideString; safecall;
function MatrixCtrl_PTZ_PTZPreset (Param2, Param3, Param4: Integer) : WideString; safecall;
function MatrixCtrl_PTZ_PTZCruise (Param2, Param3: Integer) : WideString; safecall;

function MatrixCtrl_MixedScreen_Create( const AControlerIDStr: WideString): WideString; safecall;
function MatrixCtrl_MixedScreen_Drop( const AMixedScreenID: WideString): WideString; safecall;
function MatrixCtrl_MixedScreen_Clear: WideString; safecall;

function MatrixCtrl_MixedScreen_Retrieve: WideString; safecall;

function MatrixCtrl_MatrixDevice_GetAddr (const ADeviceID: WideString): WideString; safecall;
function MatrixCtrl_MatrixDevice_GetValue (AAddr: Integer) : WideString; safecall;
function MatrixCtrl_MatrixDevice_RetrieveAll: WideString; safecall;

function MatrixCtrl_MatrixDevice_Reboot ( const ASVRIP: WideString) : WideString; safecall;
function MatrixCtrl_MatrixDevice_Shutdown( const ASVRIP: WideString) : WideString; safecall;

function MatrixCtrl_MatrixDevice_DeviceSearch: WideString; safecall;

public
function VOD_FindFile(const AChannelID, StartTime, EndTime, KeyStr: WideString; FileLocation, FileKind, FileType: Integer): WideString; safecall;
function VOD_PlayStart_WithFile(const AChannelID, FileName, StartTime, EndTime, PlayStarttime, KeyStr: WideString; FileSize, FileLocation, FileKind, FileType: Integer): WideString; safecall;

function VOD_PlayStart_WithTime(const AChannelID, StartTime, EndTime, KeyStr: WideString; FileLocation, FileKind, FileType: Integer): WideString; safecall;

function VOD_PlayStop(ACellIndex: Integer): WideString; safecall;
function VOD_PlayStopCurrent: WideString; safecall;
function VOD_PlayStopAll: WideString; safecall;function VOD_PlayControl(AControlKind, Param2: Integer): WideString; safecall;

function VOD_SnapShot(const AChannelID, AFileName, StartTime, EndTime: WideString; FileLocation, FileKind, FileType, FileNum: Integer): WideString; safecall;
public
{ Public declarations }
procedure Initialize; override;
end;

 

通过接口你就会发现，ocx里面，会处理多画面，会处理云台，会处理轮询，不但涉及预览画面，也涉及回放等。

写OCX的代价还说很高的，很多公司都搞不定或者写的不稳定。

变革开始

2010年史蒂夫·乔布斯发表的一封公开信《关于Flash的几点思考》。他明确宣布苹果的iPhone和iPad将永不支持Flash。理由直指核心：Flash是PC时代的产物，它耗电、不安全、触控体验差，且是封闭的第三方技术。这封信像一颗炸弹，彻底改变了业界风向。开发者们意识到，如果想让视频在包括iPhone在内的所有设备上播放，就必须寻找一种浏览器原生支持的方案。这直接加速了HTML5标准中<video>标签的普及和推广了，更何况Adobe自己在2020年12月31日，正式停止了对Flash Player的支持和分发

现在无插件播放是咋回事呢？

怎么做到在浏览器中播放视频也不需要插件呢？

简单来说，以前浏览器像个“放映厅”，但自己不带放映机，得靠Flash或者你自己写的OCX这种“外挂投影仪”才能放视频。现在的浏览器自己就内置了“放映机”（也就是解码和渲染能力），所以视频直接就能放。

这个过程可以拆成三个关键层面来看

1、最根本的：<video> 标签 这是HTML5标准里定义的，它相当于在网页里开了一个固定大小的“画布”。浏览器看到这个标签，就知道这块区域是用来放视频的，会调用自己内置的媒体引擎去处理。这是无插件播放的基石，没有它，后面的技术都无从谈起。

2、最关键的：内置解码器（Codec） 浏览器之所以能播放，是因为它内置了视频解码器，能读懂视频文件的编码格式。比如：绝大多数浏览器都支持 H.264,你自己写一些代码，就可以支持H265等

3、可编程的流式播放 对于直播这种没有完整文件的情况，浏览器提供了MSE（媒体源扩展）接口。它相当于一个“管道”，允许JavaScript把一小块一小块接收到的视频数据，拼接好后持续喂给<video>标签播放。像 flv.js 这个库，就是用JS把FLV格式的数据拆解、重新打包成浏览器能认的“碎片”，再通过MSE喂给播放器。所以你感觉是在播“流”，实际上还是浏览器内置的解码器在工作，只是数据源变成了动态拼接的。

我们总结一下

1、当浏览器支持这种<video>标签后，无插件播放技术就可以变为现实了，现实中，我们可以自己来把各种视频监控的通道码流变为类似http-flv或者ws-flv的流式制式，喂给浏览器，浏览器就能实现无插件播放了。

2、chrome浏览器原生只支持6个高速播放画面，不支持H265，但如果你都底层处理这一层了，这一块能难道聪明的你吗? 当然，有些笨蛋厂商甚至大厂除外，感觉它们不是不会，是太懒了。

给我们打段广告吧

美畅物联在视频，物联网，智能算法等AIoT领域有很深的技术积累，拥有云平台，中台，网关等多种产品，在公共安全、智慧交通、智慧楼宇/园区等领域都有很多的项目经验。欢迎大家咨询。

畅联云（24hlink.cn）是美畅物联旗下的公有云平台，您可以免费试用，体验万物智能互联，可以放心大胆的使用无插件播放视频额！