400-028-6601
建站资讯

网站建设资讯

为你提供网站建设行业资讯、网站优化知识、主机域名邮箱、网站开发常见问题等。
当前位置：首页 - 全部资讯

创新互联百度小程序教程：vrvideoVR全景-beta

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

    vrvideo VR 全景 -beta

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

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

    使用方法

    1. 在项目中引用动态库

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

    • JSON
     
 
 
      
  
  
  
    1. "dynamicLib": {
      2.   
  
  
    2.  "myDynamicLib": {
      3.   
  
  
    3.  "provider": "vrvideo"
      4.   
  
  
    4.  }
      5.   
  
  
    5. },
      6.

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

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

    • JSON
     
 
 
      
  
  
  
    1. {
      2.   
  
  
    2.  "usingSwanComponents": {
      3.   
  
  
    3.  "vrvideo": "dynamicLib://myDynamicLib/vrvideo"
      4.   
  
  
    4.  }
      5.   
  
  
    5. }
      6.

    3. 编写*.swan文件

    • SWAN
     
 
 
      
  
  
  
      2.

    这是一种最基本的配置方式。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
     
 
 
      
  
  
  
    1. {
      2.   
  
  
    2.  interactiveMode: 'VRModeInteractiveMotionWithTouch',
      3.   
  
  
    3.  displayMode: 'VRModeDisplayNormal',
      4.   
  
  
    4.  projectionMode: 'VRModeProjectionSphere',
      5.   
  
  
    5.  fov: 90,
      6.   
  
  
    6.  pinchEnable: true
      7.   
  
  
    7. }
      8.

    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://www.hnjierui.cn/article/ccojdcg.html

    其他资讯