• vrvideo VR 全景 -beta
  • 使用方法
    • 1. 在项目中引用动态库
    • 2. 在使用到组件的页面配置动态库
    • 3. 编写*.swan文件
  • 动态库属性列表
    • vrVideoMode 参数说明

vrvideo VR 全景 -beta

vrvideo 动态库提供了在小程序中播放全景视频的方法。

成都创新互联：从2013年成立为各行业开拓出企业自己的“网站建设”服务，为成百上千家公司企业提供了专业的成都网站制作、做网站、网页设计和网站推广服务， 定制网站开发由设计师亲自精心设计，设计的效果完全按照客户的要求，并适当的提出合理的建议，拥有的视觉效果，策划师分析客户的同行竞争对手，根据客户的实际情况给出合理的网站构架，制作客户同行业具有领先地位的。

使用方法

1. 在项目中引用动态库

使用动态库的方法参见使用动态库，在app.json中增添一项dynamicLib，与pages同级。

• JSON

 
 
 

  
  
  
"dynamicLib": {
  
  
  
 "myDynamicLib": {
  
  
  
 "provider": "vrvideo"
  
  
  
 }
  
  
  
},
 
 
 

2. 在使用到组件的页面配置动态库

在每个使用到图表组件的页面，配置*.json文件如：

• JSON

 
 
 

  
  
  
{
  
  
  
 "usingSwanComponents": {
  
  
  
 "vrvideo": "dynamicLib://myDynamicLib/vrvideo"
  
  
  
 }
  
  
  
}
 
 
 

3. 编写*.swan文件

• SWAN

这是一种最基本的配置方式。style也可以在*.css中声明，需要保证是有宽度和高度的。options在*.js中绑定到页面的 data 中：

动态库属性列表

上支持的属性包括：

属性名	类型	默认值	必填	说明
src	String		是	视频的资源地址
initial-time	Number		否	指定视频初始播放位置
controls	Boolean	true	否	是否显示默认播放控件（播放/暂停按钮、播放进度、时间）
autoplay	Boolean	false	否	是否自动播放
loop	Boolean	false	否	是否循环播放
muted	Boolean	false	否	是否静音播放
poster	String		否	视频封面的图片网络资源地址
show-progress	Boolean	true	否	若不设置，宽度大于 240 时才会显示
show-fullscreen-btn	Boolean	true	否	是否显示全屏按钮
show-play-btn	Boolean	true	否	是否显示视频底部控制栏的播放按钮
show-center-play-btn	Boolean	true	否	是否显示视频中间的播放按钮
show-no-wifi-tip	Boolean	true	否	非 wifi 环境下是否显示继续播放浮层 基础库 3.100.4 以上
vrVideoMode	Object		否	全景相关配置

除 vrVideoMode 参数外，其他参数与普通视频类似，可参考 video 组件。

vrVideoMode 参数说明

vrVideoMode 包含以下字段：

字段名	类型	默认值	必填	说明
interactiveMode	String	VRModeInteractiveMotionWithTouch	否	交互模式，有效值见下表
displayMode	String	VRModeDisplayNormal	否	显示模式，有效值见下表
projectionMode	String	VRModeProjectionSphere	否	投影模式，有效值见下表
fov	Number	90	否	初始 fov
minFov	Number	动态计算	否	最小 fov
maxFov	Number	动态计算	否	最大 fov
pinchEnable	boolean	true	否	是否开启手势缩放

如果不填写，则为默认值，即

• JS

 
 
 

  
  
  
{
  
  
  
 interactiveMode: 'VRModeInteractiveMotionWithTouch',
  
  
  
 displayMode: 'VRModeDisplayNormal',
  
  
  
 projectionMode: 'VRModeProjectionSphere',
  
  
  
 fov: 90,
  
  
  
 pinchEnable: true
  
  
  
}
 
 
 

interactiveMode 有效值

值	说明
VRModeInteractiveTouch	拖拽
VRModeInteractiveMotion	移动
VRModeInteractiveMotionWithTouch	移动+拖拽

displayMode 有效值

值	说明
VRModeDisplayNormal	单目普通模式
VRModeDisplayGlass	双目眼镜模式

projectionMode 有效值

值	说明
VRModeProjectionSphere	球形
VRModeProjectionDome180	穹形 180 度
VRModeProjectionDome230	穹形 230 度
VRModeProjectionDome180Upper	穹形 180 度 UPPER
VRModeProjectionDome230Upper	穹形 230 度 UPPER
VRModeProjectionStereoSphereHorizontal	球形左右立体
VRModeProjectionStereoSphereVertical	球形上下立体
VRModeProjectionPlaneFit	平面 FIT
VRModeProjectionPlaneCrop	平面 CROP
VRModeProjectionPlaneFull	平面 FULL
VRModeProjectionStereoPlaneFitHorizontal	平面 FIT 左右立体
VRModeProjectionStereoPlaneFitVertical	平面 FIT 上下立体

网页题目：创新互联百度小程序教程：vrvideoVR全景-beta
网站URL：http://cdbrznjsb.com/article/ccojdcg.html