CN105898337A - 全景视频的显示方法和装置 - Google Patents

Abstract

本发明公开了一种全景视频的显示方法和装置，所述方法包括：在播放页面中，通过Html5的video标签从服务端加载全景视频；将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。通过浏览器观看网页中的全景视频时，不再需要安装第三方插件，使全景视频在互联网视频中能够得到更广泛的应用，为互联网用户观看全景视频提供了便利。

Description

全景视频的显示方法和装置

技术领域

本发明属于互联网领域，具体地说，涉及一种全景视频的显示方法和装置。

背景技术

传统网络视频在播放时，视频内容的可视区域因拍摄的原因(如：摄像机镜头的取景角度、范围)导致其固定不可调，即用户只能观看到当前的区域，视频画面跟随摄像机镜头移动而变化，用户观看时缺乏现场感，不能身临其境。

随着近些年全景视频的出现，给网络视频用户带来了全新的视觉体验，而全景视频指的是一种具有360度视角的视频。全景视频具有更佳的立体感和真实感，能够很好地提供视觉体验。目前已经出现了通过动作脚本语言(ActionScript)编写的Flash 360度全景播放器可以实现web页面的全景视频播放。但由于其基于Flash动画的特点，使得在不支持Flash或者未安装Flash插件的浏览器中无法使用，给用户观看网络全景视频造成了局限。

发明内容

有鉴于此，本发明实施例提供了一种全景视频的显示方法和装置，用以解决现有技术中在不支持Flash或者未安装Flash插件的浏览器中用户无法观看全景视频的技术问题。

为了解决上述技术问题，本发明公开了一种全景视频的显示方法，所述方法包括：在播放页面中，通过Html5的video标签从服务端加载全景视频；将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。

为了解决上述技术问题，本发明还公开了一种全景视频的显示装置，所述装置包括：视频加载模块，用于在播放页面中，通过Html5的video标签从服务端加载全景视频；图像映射模块，用于将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；视频显示模块，用于在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。

为了解决上述技术问题，本发明还公开了一种全景视频的显示装置，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为：在播放页面中，通过Html5的video标签从服务端加载全景视频；将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。

与现有技术相比，本发明实施例提供的全景视频的显示方法和装置，通过Html5的video标签从服务端加载全景视频并利用浏览器的3D引擎完成播放，通过浏览器观看网页中的全景视频时，不再局限于Flash动画的方式，也不再需要安装第三方插件，使全景视频在互联网视频中能够得到更广泛的应用，为互联网用户观看全景视频提供了便利。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本发明实施例提供的一种全景视频的显示方法的流程图；

图2是本发明实施例提供的一种全景视频的显示方法的流程图；

图3是本发明实施例提供的一种全景视频的显示方法的流程图；

图4是本发明实施例提供的一种全景视频的显示装置的框图；

图5是本发明实施例提供的一种全景视频的显示装置的框图。

具体实施方式

为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明实施例，在终端设备的浏览器打开的网络视频播放页面中，通过Html5(HTML5是万维网的核心语言，标准通用标记语言下的一个应用超文本标记语言的第五次重大修改)的视频(video)标签从服务端加载全景摄像机拍摄的全景视频，3D引擎构建一个3D场景，该场景内包括一个球体和在球体内部的摄像机对象，将全景视频映射到球体的内表面做为该球体的纹理图像，浏览器播放该全景视频时，在播放页面中显示摄像机对象在当前视角下拍摄到的视频图像。通过浏览器观看网页中的全景视频时，不再需要安装第三方插件，使全景视频在互联网视频中能够得到更广泛的应用，为用户观看全景视频提供了便利。

图1是本发明实施例提供的一种全景视频的显示方法，适用于终端设备，终端设备可以是移动电话，计算机，智能电视，数字广播终端，消息收发设备，游戏控制台，车载控制台，平板设备，医疗设备，健身设备，个人数字助理等。如图1所示，该方法包括以下步骤S10-S12。

在步骤S10中，在播放页面中，通过Html5的video标签从服务端加载全景视频。

视频(video)标签是HTML5定义的一个新的元素用来指定标准的方式来插入视频文件到web页面中，而不需要在浏览器安装任何第三方插件，例如，不需要安装基于Flash的第三方插件：Adobe Flash Player。

Video标签包括源(Source，简称scr)属性，该属性的值为页面加载的全景视频的URL地址，例如：

<video id＝"media"src＝"http://www.123456.com/test.mp4"controlswidth＝"400px"heigt＝"400px"></video>。

其中，src＝http://www.123456.com/test.mp4，代表该全景视频所在服务端上的URL地址。属性“control”的出现，代表在页面中显示一个视频控件，比如播放按钮，进度条等。“width”代表页面中视频播放器的宽度，“heigt”代表页面中视频播放器的高度。

此外，video标签至少还可能包括以下属性信息。

属性“autoplay”出现时，代表页面加载该视频就绪后马上播放。

属性“loop”出现时，代表当视频文件完成播放后再次开始播放。

属性“preload”代表视频在页面加载时进行加载，并预备播放，如果同时出现属性“autoplay”，属性“preload”将被忽略。

根据video标签中定义的上述各个属性，浏览器在页面中加载视频播放器并根据scr属性的URL地址从服务端加载全景视频。

全景视频的格式可以是Ogg格式，MPEG4格式或者WebM格式。其中，Ogg格式是带有Thedora视频编码和Vorbis音频编码的Ogg文件；MPEG4格式是带有H.264视频编码和AAC音频编码的MPEG 4文件；WebM格式是带有VP8视频编码和Vorbis音频编码的WebM文件。或者，在服务端将全景视频分别转码为以上三种格式，以适应不同浏览器，根据来自终端设备的请求报文中的用户代理字符串确定终端设备使用的浏览器，并将该浏览器能够播放的视频格式发送至终端设备。

在步骤S11中，将全景视频映射到场景内的球体模型的内表面做为球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在球体模型内部的摄像机对象。

通过运行在浏览器中的3D引擎构建出三维场景，例如，3D引擎three.js。three.js是JavaScript编写的WebGL第三方库，是一款运行在浏览器中的3D引擎。

可以使用three.js的场景(Scene)类和透视投影相机(PerspectiveCamera)类来创建3D场景和该3D场景中的摄像机对象，例如：

this.scene＝new THREE.Scene()；

this.camera＝new THREE.PerspectiveCamera(75,cw/ch,0.1,1000)。

其中，透视投影相机的构造函数如下所示：

PerspectiveCamera(fov,aspect,near,far)，设置的四个参数分别为视界(fov)，纵横比(aspect)，近平面(near)和远平面(far)。其中，视界是指摄像机对象的视界角度，可以理解为类似眼睛睁开的角度，眼睛睁得越大，视线的范围越广，因此，视界值越大，摄像机对象拍摄的画面就越广阔，相应的，位于画面中央的物体的图像就越小。纵横比代表摄像机对象拍摄画面的纵横比，即宽度除以高度，这个值越大，说明画面宽度越大。近平面，代表摄像机对象能拍摄到的最近距离，远平面则代表摄像机对象拍摄到的最远距离。上例中，摄像机对象的视界为75度，纵横比为cw(camerawidth)/ch(cameraheigt)，近平面为0.1，远平面为1000。

在场景和摄像机对象创建完毕后，为了能够渲染出摄像机对象拍摄到的场景，还要创建一个渲染器。three.js常用的两个渲染器是WebGLRenderer和CanvasRenderer，使用WebGLRenderer能够得到更好的视觉效果，并且对终端设备的硬件条件要求更高，否则终端设备无法支持WebGLRenderer，而采用CanvasRenderer能够支持的终端设备更多，其兼容性更强。例如，创建渲染器WebGLRenderer并将Canvas标签添加到页面中的元素的代码如下：

this.renderer＝window.WebGLRenderingContext？newTHREE.WebGLRenderer():new THREE.CanvasRenderer()；

this.renderer.setSize(cw,ch)；

this.canvas＝vjs(this.renderer.domElement)；

this.playerCon[0].appendChild(this.canvas[0])。

接下来，将video标签的图像设置为球体模型内表面的纹理图像。首先，创建纹理对象，例如，利用three.js的Texture类创建纹理对象，并将video标签传递至该纹理对象做为被渲染的图像，实现的代码如下：

this.textureReflection＝newTHREE.Texture(this.video,THREE.SphericalReflectionMapping)。

THREE.Texture是一种纹理构造函数，其标准格式是：

THREE.Texture＝function(image,mapping,wrapS,wrapT,magFilter,minFilter,format,type,anisotropy)；其中，第一个参数image，用于接收一个image类型的图像，或者是video标签，参数mapping代表映射模式，上例中的THREE.SphericalReflectionMapping代表三维球体反射的映射方式；如果对其他参数不进行设置，THREE.Texture构造函数会以默认值自动填充。

然后再创建材质对象，将纹理图像传递给材质对象。例如，将纹理传递给THREE.MeshBasicMaterial可通过以下代码实现：

var material＝new THREE.MeshBasicMaterial({

map:this.textureReflection,

side:THREE.BackSide

})。

接下来，在场景中创建球体模型，并设置球体模型在场景中的坐标。首先创建球体，例如：

var geometry＝new THREE.SphereGeometry(80,64,64)；

THREE.SphereGeometry是球体的构造函数，其标准格式为THREE.SphereGeometry(radius,segmentsWidth,segmentsHeight,phiStart,phiLength,thetaStart,thetaLength)。其中，radius是半径；segmentsWidth表示经度上的切片数；segmentsHeight表示纬度上的切片数；phiStart表示经度开始的弧度；phiLength表示经度跨过的弧度；thetaStart表示纬度开始的弧度；thetaLength表示纬度跨过的弧度。在上例中，构造的球体的半径是80，经度上的切片数和纬度上的切片数都是64。

然后，为上述球体创建相应的模型，设置该球体模型在场景中的坐标，并将该球体模型添加到场景中。例如，该过程可以通过以下代码实现：

var sphere＝new THREE.Mesh(geometry,material)；

sphere.position.x＝0；

sphere.position.y＝0；

sphere.position.z＝0；

sphere.rotation.x＝Math.PI；

this.scene.add(sphere)。

模型由面组成，面分为三角形面和四边形面，三角形面和四边形面组成了网格(Mesh)模型。在Three.js中用THREE.Mesh来表示网格模型。

THREE.Mesh构造函数是：

THREE.Mesh＝function(geometry,material)；其中第一个参数geometry是一个THREE.Geometry类型的对象，他是一个包含顶点和顶点之间连接关系的对象。第二个参数Material就是定义的材质，材质会影响光照、纹理对网格的作用效果。

在构建的场景中，摄像机对象设置在球体模型的内部，使摄像机对象能够拍摄到球体内表面的纹理图像，即通过video标签加载的全景图像。

在步骤S12中，在播放页面中显示摄像机对象在当前视角下拍摄到的球体模型的内表面的视频图像。

加载的全景视频开始自动播放或者用户通过控件触发播放时，开始对摄像机对象拍摄到的球体模型的内表面的视频图像进行渲染。在Three.js中，可以对加载全景图像逐帧进行渲染，通常，我们会利用setTimeout或setInterval这两个函数或者层叠样式表(Cascading StyleSheet，css)3来实现。但是，css3动画存在一些局限性，比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等，而setTimeout和setInterval有着严重的性能问题。因此，使用requestAnimationFrame函数来实现逐帧渲染，它的优势包括：A、requestAnimationFrame会把每一帧中的所有文档对象模型(Document Object Model，DOM)操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧；B、在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU，GPU和内存使用量。

例如，利用requestAnimationFrame函数进行逐帧渲染，同时，将纹理对象的needsUpdate属性设置为true即可，相应的代码如下：

this.renderer.render(this.scene,this.camera)；

requestAnimationFrame(this.animate)；

this.textureReflection.needsUpdate＝true。

NeedsUpdate属性用于通知渲染器这一帧需要更新缓存，对于视频纹理来说，因为视频是一个图片流，每一帧要显示的画面都不一样，所以每一帧都需要将needsUpdate设为true来更新显卡中缓存的纹理数据。

本实施例中，通过Html5的video标签从服务端加载全景视频并利用浏览器的3D引擎完成播放，通过浏览器观看网页中的全景视频时，不再需要安装第三方插件，使全景视频在互联网视频中能够得到更广泛的应用，为用户观看全景视频提供了便利。

在一个实施例中，如图2所示，该全景视频的显示方法进一步包括以下步骤S13-S14。

在步骤S13中，检测到调整视角的控制操作；

在步骤S14中，显示摄像机对象在调整后的视角下拍摄到的视频图像。

全景视频被映射到了球体模型的内表面，为了使用户能够通过浏览器页面观看360度全景视频，需要允许用户通过控制操作来调整场景中摄像机对象的视角，实现从各种角度观看全景视频，该控制操作可以是来自鼠标或者手势的操作。

用户调整视角的控制操作会触发相应的系统事件，例如鼠标的点击和移动事件。通过监听相应的系统事件来检测到用户调整视角的控制操作。例如，在Three.js中，调用摄像机对象的lookAt方法实现视角的调整，然后对调整后的视角下的视频图像进行渲染，相应的实现代码如下：

this.cameraTarget.x＝1*Math.sin(phi)*Math.cos(theta)；

this.cameraTarget.y＝1*Math.cos(phi)；

this.cameraTarget.z＝1*Math.sin(phi)*Math.sin(theta)；

this.camera.position.copy(this.cameraTarget).negate()；

this.camera.lookAt(this.cameraTarget)。

本实施例中，浏览器页面显示全景视频后，用户可通过鼠标或者手势操作来随时调整全景视频的观看方向和角度，使用户能够全方位的观看到全景视频的各个角度的画面。

在一个实施例中，全景视频与播放页面之间会存在跨域问题。跨域问题是指由于JavaScript同源策略的限制，a.com域名下的js脚本无法操作b.com或是c.a.com域名下的对象，即使同一域名下的不同端口，不同协议或者不同子域也不允许数据通信。如果加载全景视频的URL地址与浏览器所访问页面的URL地址存在以上的跨域问题，如图3所示，步骤S10进一步实施为以下步骤S101-S102。

在步骤S101中，向服务端请求全景视频，video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)。

CrossOrigin属性用来对跨域资源共享(Cross-Origin Resource Sharing，CORS)进行设置，设置为匿名时，代表允许跨域资源共享。

在步骤S102中，接收到服务端返回的全景视频，其中，全景视频的http响应头包括声明信息。

若需要实现跨域资源共享，保存全景视频的服务端也需要声明允许与哪些域之间实现跨域资源共享，将允许跨域资源共享的域信息记录在声明信息中，例如Access-Control-Allow-Origin。

在服务端返回的http响应头中包括该声明信息。声明信息可以是一个列表，如果接收到的声明信息包括播放页面所在域的域信息，则能够从服务端获取到全景视频的数据。在一些情况下，服务端返回的http响应头的声明信息被设置为通配符“*”，例如，Access-Control-Allow-Origin：*，则代表允许来自任何域的跨域资源请求。

本实施例中，实现了针对全景视频资源的跨域资源共享，使更多网站和平台都能够请求播放全景视频，增加了全景视频业务的受众群体，使更多网络用户能有机会体验到该业务，同时，也使全景视频业务的服务端能够为用户提供更丰富的内容。

在一个实施例中，场景中的摄像机对象的视角可以被设置为鱼眼镜头，鱼眼镜头视角范围大，适合近距离拍摄大范围景物和场景，在本实施例中，鱼眼镜头的视角为180度至220度。鱼眼镜头在接近被摄物拍摄时能造成非常强烈的透视效果，使所摄画面具有一种震撼人心的感染力。通过鱼眼镜头拍摄的球体模型内表面的全景图像，拍摄到的图像范围更广并且增强了图像的视觉冲击力。

本发明实施例提供的全景视频的显示方法，更适合用于网络视频直播的场景，例如，对会议、联欢会、演唱会、大型仪式等进行现场直播时，通过全景摄像装置拍摄现场画面，将现场画面加载到网络直播页面后，用户可以浏览到默认视角下的现场视频图像并且可以通过鼠标或者手势操作来调整视角从其他视角观看现场画面。用户能够360度的浏览现场画面并体验到更逼真的现场效果。

以下为本发明的装置实施例，用以执行本发明实施例的上述方法。

图4是本发明实施例提供的一种全景视频的显示装置，该装置包括：

视频加载模块20，用于在播放页面中，通过Html5的video标签从服务端加载全景视频；

图像映射模块21，用于将全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；

视频显示模块22，用于在播放页面中显示摄像机对象在当前视角下拍摄到的球体模型的内表面的视频图像。

在一个实施例中，如图5所示，该装置还包括：

操作检测模块23，用于检测到调整视角的控制操作；

视角调整模块24，用于显示摄像机对象在调整后的视角下拍摄到的视频图像。

在一个实施例中，该视频加载模块20进一步包括：

请求子模块，用于向服务端请求所述全景视频，所述video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)；

接收子模块，用于接收到所述服务端返回的所述全景视频，其中，所述全景视频的http响应头包括声明信息。

此外，本发明实施例中可以通过硬件处理器(hardware processor)来实现上述各个功能模块。

本发明实施例提供了一种全景视频的显示装置，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

在播放页面中，通过Html5的video标签从服务端加载全景视频；

将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；

在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。

在一个实施例中，所述处理器进一步被配置为：

检测到调整所述视角的控制操作；

显示所述摄像机对象在所述调整后的视角下拍摄到的视频图像。

当所述全景视频与播放页面之间存在跨域问题时，所述在播放页面中，通过Html5的video标签从服务端加载全景视频包括：

向服务端请求所述全景视频，所述video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)；

接收到所述服务端返回的所述全景视频，其中，所述全景视频的http响应头包括声明信息。

所述声明信息包括所述播放页面的域信息，或者，所述声明信息是代表允许任何域请求数据的通配符。

所述摄像机对象的视角被设置为鱼眼镜头视角。

所述鱼眼镜头视角为180度至220度。

所述全景视频是由全景摄像装置拍摄的直播视频。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务端，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。

Claims (11)

1.一种全景视频的显示方法，其特征在于，所述方法包括：

在播放页面中，通过Html5的video标签从服务端加载全景视频；

将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；

在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。

2.根据权利要求1所述的方法，其特征在于，所述方法还包括：

检测到调整所述视角的控制操作；

显示所述摄像机对象在所述调整后的视角下拍摄到的视频图像。

3.根据权利要求1所述的方法，其特征在于，当所述全景视频与播放页面之间存在跨域问题时，所述在播放页面中，通过Html5的video标签从服务端加载全景视频包括：

向服务端请求所述全景视频，所述video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)；

接收到所述服务端返回的所述全景视频，其中，所述全景视频的http响应头包括声明信息。

4.根据权利要求3所述的方法，其特征在于，所述声明信息包括所述播放页面的域信息，或者，所述声明信息是代表允许任何域请求数据的通配符。

5.根据权利要求1所述的方法，其特征在于，所述摄像机对象的视角被设置为鱼眼镜头视角。

6.根据权利要求5所述的方法，其特征在于，所述鱼眼镜头视角为180度至220度。

7.根据权利要求1所述的方法，其特征在于，所述全景视频是由全景摄像装置拍摄的直播视频。

8.一种全景视频的显示装置，其特征在于，所述装置包括：

视频加载模块，用于在播放页面中，通过Html5的video标签从服务端加载全景视频；

图像映射模块，用于将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；

视频显示模块，用于在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。

9.根据权利要求8所述的装置，其特征在于，所述装置还包括：

操作检测模块，用于检测到调整所述视角的控制操作；

视角调整模块，用于显示所述摄像机对象在所述调整后的视角下拍摄到的视频图像。

10.根据权利要求8所述的装置，其特征在于，所述视频加载模块包括：

请求子模块，用于向服务端请求所述全景视频，所述video标签的跨域(crossOrigin)属性被设置为匿名(anonymous)；

接收子模块，用于接收到所述服务端返回的所述全景视频，其中，所述全景视频的http响应头包括声明信息。

11.一种全景视频的显示装置，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

在播放页面中，通过Html5的video标签从服务端加载全景视频；

将所述全景视频映射到场景内的球体模型的内表面做为所述球体模型的纹理图像，其中，所述场景由3D引擎创建，还包括被设置在所述球体模型内部的摄像机对象；

在所述播放页面中显示所述摄像机对象在当前视角下拍摄到的所述球体模型的内表面的视频图像。