[发明专利]一种基于HTML5的VR在线播放方法、系统及播放器

说明书

技术领域

本发明涉及VR在线播放技术领域，尤其涉及一种基于HTML5的VR在线播放方法、系统及播放器。

背景技术

目前全景视频(Virtual Reality，VR)，又叫虚拟实境视频，是指能工巧匠利用专业的VR摄影功能将现场环境真实地记录下来，再通过计算机进行后期处理，所形成的可以实现三维的空间展示功能的视频。

目前在VR领域，最缺乏的就是内容，而对于视频行业来说，内容总是会不断产生的。如果能将视频内容和VR技术很好地结合，对于影视行业来说，将为其增添可看性；对于VR设备来说，丰富的视频会为其增添内容，使其赢得大众的认可；对于用户来说，他们对VR视频有极高的期待，VR技术与视频的结合将给他们带来好的体验。移动终端为载体的VR视频播放的过程中，95％的视频都要基于App来播放，但是很多VR版本的广告、直播、宣传片需要通过微信、QQ等社交软件进行传播和扩散，用户体验较差，因此，将VR视频通过HTML5播放，会给用户带来更好的观看体验。

由于Krpano是html5VR视频播放器的先驱，也是全球最大，使用最为广泛的html5VR视频播放器SDK，但是这款播放器至今都只能播放mp4视频文件，不支持HLS协议，同时也不支持Android端的播放。不支持HLS，就意味着mp4视频必须要完全下载完毕才能播放，这样用户等待的时间比较长，如果视频较大，将会导致移动端浏览器直接崩溃。不支持Android端意味着将损失移动领域80％以上的受众群体。

发明内容

本发明提供了一种基于HTML5的VR在线播放方法、系统及播放器，主要解决VR视频在微信、QQ以及手机浏览器中播放的技术问题；达到支持IOS和Android版本，并支持基于HLS协议点播视频和直播视频的播放的目的。

为达到上述目的，本发明一方面提供了一种基于HTML5的VR在线播放方法，包括：

创建球体模型；

获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频；

接收基于客户端载体发送的角度变换数据，根据角度变换数据调整球体模型视图矩阵值。

进一步的，所述创建球体模型，包括：

在服务器内存中建立至少一个球体缓冲区，形成至少一个球体模型。

进一步的，所述获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述数据转换成支持的格式后，渲染到球体模型上，得到全景视频，包括：

监听并获取全景视频采集装置采集的多个视频数据的每一帧数据；

将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频。

进一步的，所述监听并获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频包括：

创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；

在Video的onPlay事件中做三维场景的初始化，初始化动作包括：

创建场景；

通过透视投影算法为场景添加透视相机；

将视频数据创建为视频纹理；

创建材质，将视频纹理贴在材质上；

创建网格，将材质附着于球体缓冲区上；

创建渲染器，将渲染器渲染后的画面绘制在Canvas上，通过透视相机使用透视投影算法获得Canvas上的画面。

进一步的，所述监听并获取全景视频采集装置采集的多个视频数据的每一帧数据，将所述每一帧数据转换成支持的格式后，贴在球体模型的球面纹理上，并将球面纹理附着于球体模型上之后，合成多个视频数据，得到全景视频包括：

创建Video组件，为Video组件设置playsinline属性，监听并获取全景视频采集装置采集的多个视频数据的Video的Play、Puse和Ended事件；

在Video的onPlay事件中做三维场景的初始化，初始化动作包括：

创建Canvas，将Video的每帧画面复制于Cavans上；

创建场景；

通过透视投影算法为场景添加透视相机；

将视频数据创建为视频纹理；

创建材质，将视频纹理贴在材质上；