@realsee/vreo 1.0.0-alpha.9 → 1.1.0-dev.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (132) hide show
  1. package/CHANGELOG.md +9 -1
  2. package/README.md +46 -36
  3. package/lib/PlayController/index.js +1 -1
  4. package/lib/Player/Controller.d.ts +3 -2
  5. package/lib/Player/Controller.js +31 -14
  6. package/lib/Player/index.js +27 -16
  7. package/lib/Player/modules/VideoAgent/VideoAgentMesh.d.ts +2 -2
  8. package/lib/Player/modules/VideoAgent/VideoAgentMesh.js +7 -12
  9. package/lib/Player/modules/VideoAgent/index.js +1 -1
  10. package/lib/Player/modules/Wave/index.js +160 -25
  11. package/lib/Player/modules/keyframes/BgMusic/index.js +52 -40
  12. package/lib/Player/modules/keyframes/PanoTag/index.js +1 -0
  13. package/lib/fivePlugins/CameraMovementPlugin/index.js +3 -2
  14. package/lib/shared-utils/Audio.d.ts +14 -0
  15. package/lib/shared-utils/Audio.js +158 -0
  16. package/lib/shared-utils/{AduioLike.d.ts → AudioLike.d.ts} +0 -0
  17. package/lib/shared-utils/{AduioLike.js → AudioLike.js} +4 -6
  18. package/lib/shared-utils/animationFrame/tween.d.ts +3 -58
  19. package/lib/shared-utils/animationFrame/tween.js +3 -9
  20. package/lib/typings/VreoUnit.d.ts +8 -5
  21. package/package.json +8 -6
  22. package/stylesheets/default.css +7 -2
  23. package/docs/.nojekyll +0 -1
  24. package/docs/assets/custom.css +0 -78
  25. package/docs/assets/highlight.css +0 -127
  26. package/docs/assets/icons.css +0 -1043
  27. package/docs/assets/icons.png +0 -0
  28. package/docs/assets/icons@2x.png +0 -0
  29. package/docs/assets/main.js +0 -52
  30. package/docs/assets/search.js +0 -1
  31. package/docs/assets/style.css +0 -1414
  32. package/docs/assets/widgets.png +0 -0
  33. package/docs/assets/widgets@2x.png +0 -0
  34. package/docs/classes/Player.AudioLike.html +0 -52
  35. package/docs/classes/Player.Controller.html +0 -54
  36. package/docs/classes/Player.Player-1.html +0 -50
  37. package/docs/classes/Player.VideoAgentMesh.html +0 -142
  38. package/docs/classes/Player.VideoAgentScene.html +0 -1
  39. package/docs/demo/assets/AppReact.6ca5d1d2.js +0 -1
  40. package/docs/demo/assets/default.5a762ce2.js +0 -3988
  41. package/docs/demo/assets/default.bc4c715d.css +0 -1
  42. package/docs/demo/assets/dynamic.efc5200d.js +0 -1
  43. package/docs/demo/assets/examples.80a27156.js +0 -25
  44. package/docs/demo/assets/examples.dac4a6fe.css +0 -1
  45. package/docs/demo/assets/index.9331038f.css +0 -1
  46. package/docs/demo/assets/index.ca7c5881.js +0 -1
  47. package/docs/demo/assets/main.c164d1d2.js +0 -1
  48. package/docs/demo/assets/react.2ee8565f.css +0 -1
  49. package/docs/demo/assets/react.a4774aef.js +0 -25
  50. package/docs/demo/assets/znRoyv06SZQeqA7m.0057e8ae.js +0 -1
  51. package/docs/demo/examples.html +0 -17
  52. package/docs/demo/index-react-dynamic.html +0 -20
  53. package/docs/demo/index-react.html +0 -20
  54. package/docs/demo/index.html +0 -19
  55. package/docs/enums/Player.InfoPanelStyleEnum.html +0 -1
  56. package/docs/enums/Player.InfoPanelTypeEnum.html +0 -3
  57. package/docs/enums/Player.PanoEffectEnum.html +0 -5
  58. package/docs/enums/Player.PanoTagEnum.html +0 -3
  59. package/docs/enums/Player.PanoTagStyleEnum.html +0 -7
  60. package/docs/enums/Player.VreoKeyframeEnum.html +0 -25
  61. package/docs/enums/fivePlugins.CameraMovementEffect.html +0 -1
  62. package/docs/enums/fivePlugins.Rotation.html +0 -1
  63. package/docs/index.html +0 -245
  64. package/docs/interfaces/Player.CustomVreoKeyframeProps.html +0 -1
  65. package/docs/interfaces/Player.PlayerConfigs.html +0 -7
  66. package/docs/interfaces/Player.Vertex.html +0 -3
  67. package/docs/interfaces/Player.VideoAgentMeshOptions.html +0 -8
  68. package/docs/interfaces/Player.VreoKeyframe.html +0 -3
  69. package/docs/interfaces/Player.VreoUnit.html +0 -3
  70. package/docs/interfaces/Player.VreoVideo.html +0 -3
  71. package/docs/interfaces/fivePlugins.CSS3DRenderPluginExportType.html +0 -4
  72. package/docs/interfaces/fivePlugins.CameraMovementOptsCallback.html +0 -1
  73. package/docs/interfaces/fivePlugins.CameraMovementPluginExportType.html +0 -7
  74. package/docs/interfaces/fivePlugins.CameraMovementPluginParameterType.html +0 -1
  75. package/docs/interfaces/fivePlugins.ModelTVVideoPluginData.html +0 -1
  76. package/docs/interfaces/fivePlugins.ModelTVVideoPluginExportType.html +0 -1
  77. package/docs/interfaces/fivePlugins.ModelTVVideoPluginParameterType.html +0 -1
  78. package/docs/interfaces/fivePlugins.Vector3Position.html +0 -3
  79. package/docs/interfaces/react.VreoActionCallbacks.html +0 -23
  80. package/docs/interfaces/react.VreoProviderProps.html +0 -1
  81. package/docs/modules/Player.html +0 -37
  82. package/docs/modules/custom.html +0 -3
  83. package/docs/modules/fivePlugins.html +0 -6
  84. package/docs/modules/react.html +0 -1
  85. package/docs/modules.html +0 -1
  86. package/resources/PlayController/createHTMLAudioElement.ts +0 -53
  87. package/resources/PlayController/index.ts +0 -154
  88. package/resources/Player/App.tsx +0 -66
  89. package/resources/Player/Controller.ts +0 -294
  90. package/resources/Player/custom/SpatialScenePanel/index.tsx +0 -264
  91. package/resources/Player/hooks.ts +0 -26
  92. package/resources/Player/index.tsx +0 -227
  93. package/resources/Player/modules/Drawer/index.tsx +0 -40
  94. package/resources/Player/modules/PopUp/index.tsx +0 -26
  95. package/resources/Player/modules/ResizeObserver/index.tsx +0 -23
  96. package/resources/Player/modules/VideoAgent/VideoAgentMesh.ts +0 -302
  97. package/resources/Player/modules/VideoAgent/VideoAgentScene.ts +0 -56
  98. package/resources/Player/modules/VideoAgent/index.tsx +0 -53
  99. package/resources/Player/modules/Wave/index.tsx +0 -18
  100. package/resources/Player/modules/keyframes/BgMusic/index.tsx +0 -66
  101. package/resources/Player/modules/keyframes/CameraMovement/index.tsx +0 -37
  102. package/resources/Player/modules/keyframes/InfoPanel/index.tsx +0 -165
  103. package/resources/Player/modules/keyframes/ModelVideo/index.tsx +0 -77
  104. package/resources/Player/modules/keyframes/PanoEffect/index.tsx +0 -99
  105. package/resources/Player/modules/keyframes/PanoEffect/lineAnime.ts +0 -31
  106. package/resources/Player/modules/keyframes/PanoTag/index.tsx +0 -82
  107. package/resources/Player/modules/keyframes/PanoTextLabel/index.tsx +0 -117
  108. package/resources/Player/modules/keyframes/Prompter/index.tsx +0 -56
  109. package/resources/Player/modules/keyframes/UpdateVRPanorama/index.tsx +0 -99
  110. package/resources/Player/modules/keyframes/VideoEffect/index.tsx +0 -115
  111. package/resources/Player/typings.ts +0 -49
  112. package/resources/fivePlugins/CSS3DRenderPlugin/centerPoint.ts +0 -5
  113. package/resources/fivePlugins/CSS3DRenderPlugin/createResizeObserver.ts +0 -17
  114. package/resources/fivePlugins/CSS3DRenderPlugin/evenNumber.ts +0 -4
  115. package/resources/fivePlugins/CSS3DRenderPlugin/index.ts +0 -254
  116. package/resources/fivePlugins/CSS3DRenderPlugin/transformPositionToVector3.ts +0 -5
  117. package/resources/fivePlugins/CameraMovementPlugin/index.ts +0 -226
  118. package/resources/fivePlugins/CameraMovementPlugin/typings.ts +0 -59
  119. package/resources/fivePlugins/ModelTVVideoPlugin/index.ts +0 -278
  120. package/resources/index.ts +0 -1
  121. package/resources/react/index.tsx +0 -121
  122. package/resources/shared-utils/AduioLike.ts +0 -109
  123. package/resources/shared-utils/Preloader.ts +0 -35
  124. package/resources/shared-utils/addResizeListener.ts +0 -46
  125. package/resources/shared-utils/animationFrame/BetterTween.ts +0 -33
  126. package/resources/shared-utils/animationFrame/index.ts +0 -48
  127. package/resources/shared-utils/animationFrame/tween.ts +0 -51
  128. package/resources/shared-utils/createTransMatrix.ts +0 -12
  129. package/resources/shared-utils/getFileExpandedName.ts +0 -6
  130. package/resources/shared-utils/getMediaInfo.ts +0 -52
  131. package/resources/shared-utils/setElementDataset.ts +0 -18
  132. package/resources/typings/VreoUnit.ts +0 -314
package/docs/index.html DELETED
@@ -1,245 +0,0 @@
1
- <!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Vreo</title><meta name="description" content="Documentation for Vreo"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="assets/style.css"/><link rel="stylesheet" href="assets/highlight.css"/><link rel="stylesheet" href="assets/custom.css"/><script async src="assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base="."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="index.html" class="title">Vreo</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><h1> Vreo </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><div class="tsd-panel tsd-typography">
2
- <a href="#realseevreo" id="realseevreo" style="color: inherit; text-decoration: none;">
3
- <h1>@realsee/vreo</h1>
4
- </a>
5
- <p><a href="https://www.npmjs.com/package/@realsee/vreo"><img src="https://img.shields.io/npm/v/@realsee/vreo.svg?style=flat-square&logo=npm&label=npm%20install%20@realsee/vreo" alt="npm version"></a></p>
6
- <p><strong>Vreo</strong> (VR Video 缩写) 是基于如视三维渲染引擎 <a href="https://unpkg.com/@realsee/five/docs/index.html">Five</a> 和 用户界面构建库 <a href="https://reactjs.org/">React</a> 实现的如视 3D 空间剧本播放器。</p>
7
-
8
- <a href="#特性" id="特性" style="color: inherit; text-decoration: none;">
9
- <h2>特性</h2>
10
- </a>
11
- <ul>
12
- <li>相机运镜：支持 3D 空间全景游走、旋转、分镜切换等类似于电影运镜的效果。</li>
13
- <li>定制模块：提供弹幕提词、全景标签、视频广告、空间文本等模块定制能力。</li>
14
- <li>内置特效：提供全景特效、视频特效、户改动画、模型特效等丰富动态效果。</li>
15
- <li>独特的虚拟形象渲染能力：支持用户在 Web 页面模拟虚拟形象，配合语音讲解、相机运镜和定制特效，可实现智能化讲房功能。</li>
16
- </ul>
17
- <blockquote>
18
- <p>访问 <a href="https://vrlab-static.ljcdn.com/release/web/vreo/index.html?v=1">Vreo Demo</a> 体验功能。</p>
19
- </blockquote>
20
-
21
- <a href="#安装说明" id="安装说明" style="color: inherit; text-decoration: none;">
22
- <h2>安装说明</h2>
23
- </a>
24
- <p>推荐使用 <code>npm</code> 或 <code>yarn</code> 的方式进行安装。由于 <code>@realsee/vreo</code> 依赖 <a href="https://unpkg.com/@realsee/five/docs/index.html">Five</a> 和 <a href="https://reactjs.org/">React</a> ，请务必同时安装相关依赖：</p>
25
- <pre><code class="hljs language-bash"><span class="hl-0">$ npm install @realsee/vreo @realsee/five react react-dom --save</span><br/><span class="hl-1"># or</span><br/><span class="hl-0">$ yarn add @realsee/vreo @realsee/five react react-dom</span>
26
- </code></pre>
27
-
28
- <a href="#快速上手" id="快速上手" style="color: inherit; text-decoration: none;">
29
- <h2>快速上手</h2>
30
- </a>
31
- <pre><code class="hljs language-jsx"><span class="hl-2">import</span><span class="hl-0"> </span><span class="hl-3">*</span><span class="hl-0"> </span><span class="hl-2">as</span><span class="hl-0"> </span><span class="hl-4">React</span><span class="hl-0"> </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-5">&#39;react&#39;</span><br/><span class="hl-2">import</span><span class="hl-0"> { </span><span class="hl-4">Five</span><span class="hl-0"> } </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-5">&#39;@realsee/five&#39;</span><br/><span class="hl-2">import</span><span class="hl-0"> { </span><span class="hl-4">Player</span><span class="hl-0"> } </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-5">&#39;@realsee/vreo&#39;</span><br/><br/><span class="hl-1">// 创建 Five 实例</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">five</span><span class="hl-0"> = </span><span class="hl-3">new</span><span class="hl-0"> </span><span class="hl-7">Five</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-1">/* Five 配置项 */</span><br/><span class="hl-0">})</span><br/><br/><span class="hl-1">// 创建 Player 实例</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">vreoplayer</span><span class="hl-0"> = </span><span class="hl-3">new</span><span class="hl-0"> </span><span class="hl-7">Player</span><span class="hl-0">(</span><span class="hl-4">five</span><span class="hl-0">)</span><br/><br/><span class="hl-1">// 异步请求剧本数据</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">vreoUnit</span><span class="hl-0"> = </span><span class="hl-2">await</span><span class="hl-0"> </span><span class="hl-7">fetch</span><span class="hl-0">(</span><span class="hl-5">&#39;api/**/**&#39;</span><span class="hl-0">)</span><br/><br/><span class="hl-1">// 加载剧本数据（剧本数据见下文）</span><br/><span class="hl-4">vreoplayer</span><span class="hl-0">.</span><span class="hl-7">load</span><span class="hl-0">(</span><span class="hl-4">vreoUnit</span><span class="hl-0">)</span><br/><br/><span class="hl-1">// 播放</span><br/><span class="hl-4">vreoplayer</span><span class="hl-0">.</span><span class="hl-7">play</span><span class="hl-0">()</span><br/><br/><span class="hl-1">// 暂停</span><br/><span class="hl-4">vreoplayer</span><span class="hl-0">.</span><span class="hl-7">pause</span><span class="hl-0">()</span>
32
- </code></pre>
33
- <p>引入样式：</p>
34
- <pre><code class="hljs language-css"><span class="hl-2">@import</span><span class="hl-0"> </span><span class="hl-5">&#39;@realsee/vreo/stylesheets/default.css&#39;</span><span class="hl-0">;</span>
35
- </code></pre>
36
-
37
- <a href="#react-context-amp-hooks-模式使用" id="react-context-amp-hooks-模式使用" style="color: inherit; text-decoration: none;">
38
- <h2>React Context &amp; Hooks 模式使用</h2>
39
- </a>
40
- <p><strong>Vreo</strong> 支持 <a href="https://reactjs.org/docs/context.html">React Context</a> 与 <a href="https://reactjs.org/docs/hooks-intro.html">Hooks</a> 相配合的模式使用，简单样例如下：</p>
41
- <pre><code class="hljs language-jsx"><span class="hl-2">import</span><span class="hl-0"> </span><span class="hl-3">*</span><span class="hl-0"> </span><span class="hl-2">as</span><span class="hl-0"> </span><span class="hl-4">React</span><span class="hl-0"> </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-5">&#39;react&#39;</span><br/><span class="hl-2">import</span><span class="hl-0"> </span><span class="hl-3">*</span><span class="hl-0"> </span><span class="hl-2">as</span><span class="hl-0"> </span><span class="hl-4">ReactDOM</span><span class="hl-0"> </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-5">&#39;react-dom&#39;</span><br/><span class="hl-2">import</span><span class="hl-0"> { </span><span class="hl-4">Five</span><span class="hl-0">, </span><span class="hl-4">Work</span><span class="hl-0">, </span><span class="hl-4">parseWork</span><span class="hl-0"> } </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-5">&#39;@realsee/five&#39;</span><br/><span class="hl-2">import</span><span class="hl-0"> { </span><span class="hl-4">createFiveProvider</span><span class="hl-0">, </span><span class="hl-4">FiveCanvas</span><span class="hl-0"> } </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-5">&#39;@realsee/five/react&#39;</span><br/><span class="hl-2">import</span><span class="hl-0"> { </span><span class="hl-4">VreoProvider</span><span class="hl-0">, </span><span class="hl-4">useVreoAction</span><span class="hl-0"> } </span><span class="hl-2">from</span><span class="hl-0"> </span><span class="hl-5">&#39;@realsee/vreo/lib/react&#39;</span><br/><br/><span class="hl-1">// 创建 FiveProvider</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">FiveProvider</span><span class="hl-0"> = </span><span class="hl-7">createFiveProvider</span><span class="hl-0">({</span><br/><span class="hl-0"> </span><span class="hl-1">/* Five 配置项 */</span><br/><span class="hl-0">})</span><br/><br/><span class="hl-1">// 播放组件</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-7">PlayButton</span><span class="hl-0">: </span><span class="hl-8">React</span><span class="hl-0">.</span><span class="hl-8">FC</span><span class="hl-0"> = () </span><span class="hl-3">=&gt;</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-3">const</span><span class="hl-0"> { </span><span class="hl-6">load</span><span class="hl-0">, </span><span class="hl-6">play</span><span class="hl-0">, </span><span class="hl-6">pause</span><span class="hl-0"> } = </span><span class="hl-7">useVreoAction</span><span class="hl-0">()</span><br/><br/><span class="hl-0"> </span><span class="hl-2">return</span><span class="hl-0"> (</span><br/><span class="hl-0"> </span><span class="hl-9">&lt;</span><span class="hl-10">button</span><br/><span class="hl-0"> </span><span class="hl-11">onClick</span><span class="hl-0">=</span><span class="hl-3">{async</span><span class="hl-12"> () </span><span class="hl-3">=&gt;</span><span class="hl-12"> {</span><br/><span class="hl-12"> </span><span class="hl-1">// 获取讲房数据</span><br/><span class="hl-12"> </span><span class="hl-3">const</span><span class="hl-12"> </span><span class="hl-6">vreoUnit</span><span class="hl-12"> </span><span class="hl-0">=</span><span class="hl-12"> </span><span class="hl-2">await</span><span class="hl-12"> </span><span class="hl-7">fetch</span><span class="hl-12">(</span><span class="hl-5">&#39;api/**/**&#39;</span><span class="hl-12">)</span><br/><span class="hl-12"> </span><span class="hl-1">// 载入数据</span><br/><span class="hl-12"> </span><span class="hl-2">await</span><span class="hl-12"> </span><span class="hl-7">load</span><span class="hl-12">(</span><span class="hl-4">vreoUnit</span><span class="hl-12">)</span><br/><span class="hl-12"> </span><span class="hl-1">// 播放</span><br/><span class="hl-12"> </span><span class="hl-7">play</span><span class="hl-12">()</span><br/><span class="hl-12"> </span><span class="hl-1">// 暂停</span><br/><span class="hl-12"> </span><span class="hl-7">pause</span><span class="hl-12">()</span><br/><span class="hl-12"> }</span><span class="hl-3">}</span><br/><span class="hl-0"> </span><span class="hl-9">&gt;</span><br/><span class="hl-0"> 讲解</span><br/><span class="hl-0"> </span><span class="hl-9">&lt;/</span><span class="hl-10">button</span><span class="hl-9">&gt;</span><br/><span class="hl-0"> )</span><br/><span class="hl-0">}</span><br/><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-7">App</span><span class="hl-0">: </span><span class="hl-8">React</span><span class="hl-0">.</span><span class="hl-8">FC</span><span class="hl-0"> = () </span><span class="hl-3">=&gt;</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-2">return</span><span class="hl-0"> (</span><br/><span class="hl-0"> </span><span class="hl-9">&lt;</span><span class="hl-8">FiveProvider</span><span class="hl-0"> </span><span class="hl-11">initialWork</span><span class="hl-0">=</span><span class="hl-3">{</span><span class="hl-4">work</span><span class="hl-3">}</span><span class="hl-9">&gt;</span><br/><span class="hl-0"> </span><span class="hl-9">&lt;</span><span class="hl-8">FiveCanvas</span><span class="hl-0"> </span><span class="hl-11">width</span><span class="hl-0">=</span><span class="hl-3">{</span><span class="hl-4">width</span><span class="hl-3">}</span><span class="hl-0"> </span><span class="hl-11">height</span><span class="hl-0">=</span><span class="hl-3">{</span><span class="hl-4">height</span><span class="hl-3">}</span><span class="hl-0"> </span><span class="hl-9">/&gt;</span><br/><span class="hl-0"> </span><span class="hl-9">&lt;</span><span class="hl-8">VreoProvider</span><span class="hl-9">&gt;</span><br/><span class="hl-0"> </span><span class="hl-3">{</span><span class="hl-1">/* React 渲染的其他模块 */</span><span class="hl-3">}</span><br/><span class="hl-0"> </span><span class="hl-9">&lt;</span><span class="hl-8">PlayButton</span><span class="hl-0"> </span><span class="hl-9">/&gt;</span><br/><span class="hl-0"> </span><span class="hl-9">&lt;/</span><span class="hl-8">VreoProvider</span><span class="hl-9">&gt;</span><br/><span class="hl-0"> </span><span class="hl-9">&lt;/</span><span class="hl-8">FiveProvider</span><span class="hl-9">&gt;</span><br/><span class="hl-0"> )</span><br/><span class="hl-0">}</span><br/><br/><span class="hl-4">ReactDOM</span><span class="hl-0">.</span><span class="hl-7">render</span><span class="hl-0">(</span><span class="hl-9">&lt;</span><span class="hl-8">App</span><span class="hl-9">&gt;&lt;/</span><span class="hl-8">App</span><span class="hl-9">&gt;</span><span class="hl-0">, </span><span class="hl-4">document</span><span class="hl-0">.</span><span class="hl-7">getElementById</span><span class="hl-0">(</span><span class="hl-5">&#39;app&#39;</span><span class="hl-0">))</span>
42
- </code></pre>
43
-
44
- <a href="#剧本数据结构" id="剧本数据结构" style="color: inherit; text-decoration: none;">
45
- <h2>剧本数据结构</h2>
46
- </a>
47
-
48
- <a href="#结构描述" id="结构描述" style="color: inherit; text-decoration: none;">
49
- <h3>结构描述</h3>
50
- </a>
51
- <p><strong>VreoUnit</strong> 是剧本数据结构的最小单元，用以描述音视频、剧本帧序列等信息。</p>
52
- <p><strong>VreoUnit</strong> 数据结构样例如下：</p>
53
- <pre><code class="hljs language-json"><span class="hl-0">{</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;categoryId&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;257ac7a8-b00a-4a1b-88b8-76f93362c0dc&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;categoryText&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;讲房源户型&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;video&quot;</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;duration&quot;</span><span class="hl-0">: </span><span class="hl-14">106278</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;start&quot;</span><span class="hl-0">: </span><span class="hl-14">0</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;end&quot;</span><span class="hl-0">: </span><span class="hl-14">106278</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;url&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;//url-host/***/xxx.mp4&quot;</span><span class="hl-0"> </span><span class="hl-1">// &quot;url&quot; 如果是空字符串，则以 `AudioLike` 的逻辑进行执行。</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;keyframes&quot;</span><span class="hl-0">: [</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;uuid&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;ac70621b-4e00-442e-311c-befb5bd3f87f&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;type&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;PanoTextLabel&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;start&quot;</span><span class="hl-0">: </span><span class="hl-14">27060</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;end&quot;</span><span class="hl-0">: </span><span class="hl-14">42351</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;parsed&quot;</span><span class="hl-0">: </span><span class="hl-3">false</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;data&quot;</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;text&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;戏剧人生&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;vertex&quot;</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;x&quot;</span><span class="hl-0">: </span><span class="hl-14">-0.8879207391906447</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;y&quot;</span><span class="hl-0">: </span><span class="hl-14">0.3829881941156301</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;z&quot;</span><span class="hl-0">: </span><span class="hl-14">-1.8068334368800785</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;fontSize&quot;</span><span class="hl-0">: </span><span class="hl-14">16</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;uuid&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;ec1bbe11-ffee-4fe1-5823-46b6cad4e7d8&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;type&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;ModelVideo&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;start&quot;</span><span class="hl-0">: </span><span class="hl-14">17452</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;end&quot;</span><span class="hl-0">: </span><span class="hl-14">74901</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;parsed&quot;</span><span class="hl-0">: </span><span class="hl-3">false</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;data&quot;</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;videoSrc&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;//url-host/release/web/videos/tv_ads/360/009.mp4&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;videoPosterSrc&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;//url-host/release/web/videos/posters/002.9203cf99.jpg&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;vertexs&quot;</span><span class="hl-0">: [</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;x&quot;</span><span class="hl-0">: </span><span class="hl-14">0.07203829865103632</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;y&quot;</span><span class="hl-0">: </span><span class="hl-14">0.8215782650149405</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;z&quot;</span><span class="hl-0">: </span><span class="hl-14">-1.7994856093044471</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;x&quot;</span><span class="hl-0">: </span><span class="hl-14">0.08971605109132826</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;y&quot;</span><span class="hl-0">: </span><span class="hl-14">-0.2930481300912484</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;z&quot;</span><span class="hl-0">: </span><span class="hl-14">-1.798372293401237</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;x&quot;</span><span class="hl-0">: </span><span class="hl-14">2.367235599574914</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;y&quot;</span><span class="hl-0">: </span><span class="hl-14">-0.296526676652792</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;z&quot;</span><span class="hl-0">: </span><span class="hl-14">-1.7934272967593008</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;x&quot;</span><span class="hl-0">: </span><span class="hl-14">2.3601990173854315</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;y&quot;</span><span class="hl-0">: </span><span class="hl-14">0.8691239478108612</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;z&quot;</span><span class="hl-0">: </span><span class="hl-14">-1.7949685793090848</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> ]</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;uuid&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;f9245b1b-ca8d-4a6c-5616-d53cd9cf8c3c&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;type&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;PanoTag&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;start&quot;</span><span class="hl-0">: </span><span class="hl-14">988</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;end&quot;</span><span class="hl-0">: </span><span class="hl-14">69803</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;parsed&quot;</span><span class="hl-0">: </span><span class="hl-3">false</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;data&quot;</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;text&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;一蓑烟雨任平生&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;vertex&quot;</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;x&quot;</span><span class="hl-0">: </span><span class="hl-14">3.4119340861387304</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;y&quot;</span><span class="hl-0">: </span><span class="hl-14">0.1283617853353691</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;z&quot;</span><span class="hl-0">: </span><span class="hl-14">-0.6533418002816742</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;type&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;Image&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;imgUrl&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;//url-host/release/web/cat_music.f68fb9bb.gif&quot;</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;uuid&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;d16138f3-fad1-412e-2df0-f66b61e0b38e&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;type&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;PanoEffect&quot;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;start&quot;</span><span class="hl-0">: </span><span class="hl-14">2598</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;end&quot;</span><span class="hl-0">: </span><span class="hl-14">7955</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;parsed&quot;</span><span class="hl-0">: </span><span class="hl-3">false</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;data&quot;</span><span class="hl-0">: {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;twoVertexs&quot;</span><span class="hl-0">: [</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;x&quot;</span><span class="hl-0">: </span><span class="hl-14">0.04138994383630945</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;y&quot;</span><span class="hl-0">: </span><span class="hl-14">-1.323667318114752</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;z&quot;</span><span class="hl-0">: </span><span class="hl-14">2.7873723200461096</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;x&quot;</span><span class="hl-0">: </span><span class="hl-14">-2.804123324007684</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;y&quot;</span><span class="hl-0">: </span><span class="hl-14">-1.3249364005914073</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;z&quot;</span><span class="hl-0">: </span><span class="hl-14">3.068840643805892</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> ],</span><br/><span class="hl-0"> </span><span class="hl-13">&quot;effect&quot;</span><span class="hl-0">: </span><span class="hl-5">&quot;Distance&quot;</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> ]</span><br/><span class="hl-0">}</span>
54
- </code></pre>
55
- <p><strong>VreoUnit</strong> 的字段说明：</p>
56
- <ul>
57
- <li><p><code>categoryId</code>、<code>categoryText</code>: 讲解的类别标识符和描述。</p>
58
- </li>
59
- <li><p><code>video</code>: 虚拟视频人物视频素材。</p>
60
- <ul>
61
- <li><code>duration</code>: 视频长度。</li>
62
- <li><code>start</code>: 开始时间戳。</li>
63
- <li><code>end</code>: 结束时间戳。</li>
64
- <li><code>url</code>: 视频 CDN 地址。</li>
65
- </ul>
66
- </li>
67
- </ul>
68
- <blockquote>
69
- <p>注意事项：<strong>视频素材必须是绿幕背景</strong>。</p>
70
- </blockquote>
71
- <ul>
72
- <li><p><code>keyframes</code>：剧本帧集合。</p>
73
- <ul>
74
- <li><code>uuid</code>: 剧本帧 <code>uuid</code>。</li>
75
- <li><code>type</code>: 剧本帧类别枚举，详见下文 <strong>剧本关键帧</strong> 部分。</li>
76
- <li><code>start</code>: 触发时间戳。</li>
77
- <li><code>end</code>: 结束时间戳。</li>
78
- <li><code>parsed</code>: 解析状态。</li>
79
- <li><code>data</code>: 当前剧本帧类别数据依赖。</li>
80
- </ul>
81
- </li>
82
- </ul>
83
- <blockquote>
84
- <p><strong>如何获取剧本数据？</strong>
85
- 剧本服务及剧本编辑器公开版本尚在开发中，敬请期待。</p>
86
- </blockquote>
87
-
88
- <a href="#剧本帧说明" id="剧本帧说明" style="color: inherit; text-decoration: none;">
89
- <h3>剧本帧说明</h3>
90
- </a>
91
- <p><strong>Vreo</strong> 剧本行为是按照剧本关键帧来执行的，即根据音视频播放的时间序列命中剧本帧后，按照剧本帧的类型执行相机运镜、全景标签、模型特效等动作。</p>
92
- <blockquote>
93
- <p>目前支持多种类型剧本关键帧（详见：<a href="https://realsee-developer.github.io/vreo/enums/Player.VreoKeyframeEnum.html">Player.VreoKeyframeEnum</a>），后续会不断完善及添加新的剧本关键帧行为。</p>
94
- </blockquote>
95
- <p><strong>Vreo</strong> 内置了每一个剧本关键帧的 UI 动作行为，通过 <code>vreoplayer.on()</code> 可监听到相应的剧本关键帧的命中时机，并按需添加业务逻辑。</p>
96
-
97
- <a href="#剧本关键帧" id="剧本关键帧" style="color: inherit; text-decoration: none;">
98
- <h3>剧本关键帧</h3>
99
- </a>
100
-
101
- <a href="#相机运镜" id="相机运镜" style="color: inherit; text-decoration: none;">
102
- <h4>相机运镜</h4>
103
- </a>
104
- <p><strong>相机运镜</strong> 控制相机实现镜头位移、旋转、模态切换等模拟如视 3D 空间漫游的能力。</p>
105
- <pre><code class="hljs language-ts"><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">CameraMovementData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">effect</span><span class="hl-0">: </span><span class="hl-8">CameraMovementEffect</span><span class="hl-0"> </span><span class="hl-1">// 运镜效果</span><br/><span class="hl-0"> </span><span class="hl-4">mode</span><span class="hl-0">: </span><span class="hl-8">Mode</span><span class="hl-0"> </span><span class="hl-1">// Five.Mode</span><br/><span class="hl-0"> </span><span class="hl-4">panoIndex</span><span class="hl-0">: </span><span class="hl-8">number</span><span class="hl-0"> </span><span class="hl-1">// 目标点位</span><br/><span class="hl-0"> </span><span class="hl-4">loop</span><span class="hl-0">?: </span><span class="hl-8">boolean</span><span class="hl-0"> </span><span class="hl-1">// 是否循环</span><br/><span class="hl-0"> </span><span class="hl-4">rotateSpeed</span><span class="hl-0">?: </span><span class="hl-8">number</span><span class="hl-0"> </span><span class="hl-1">// 旋转速度</span><br/><span class="hl-0"> </span><span class="hl-4">rotation</span><span class="hl-0">?: </span><span class="hl-8">Rotation</span><span class="hl-0"> </span><span class="hl-1">// 旋转方向</span><br/><span class="hl-0">} &amp; </span><span class="hl-8">Partial</span><span class="hl-0">&lt;</span><span class="hl-8">Pose</span><span class="hl-0">&gt; </span><span class="hl-1">// Partial&lt;Pose&gt; 视角信息</span>
106
- </code></pre>
107
-
108
- <a href="#弹幕提词" id="弹幕提词" style="color: inherit; text-decoration: none;">
109
- <h4>弹幕提词</h4>
110
- </a>
111
- <p><strong>弹幕提词</strong> 提供语音字幕文本，多用于强调某一句文本。</p>
112
- <pre><code class="hljs language-ts"><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">PrompterData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">text</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 文本，建议长度 32(汉字) 以内</span><br/><span class="hl-0">}</span>
113
- </code></pre>
114
-
115
- <a href="#空间文本" id="空间文本" style="color: inherit; text-decoration: none;">
116
- <h4>空间文本</h4>
117
- </a>
118
- <p><strong>空间文本</strong> 在如视 3D 模型空间中某一个三维坐标点上展示的一段文本。</p>
119
- <pre><code class="hljs language-ts"><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">PanoTextLabelData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">text</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 空间文本</span><br/><span class="hl-0"> </span><span class="hl-4">vertex</span><span class="hl-0">: </span><span class="hl-8">Vertex</span><span class="hl-0"> </span><span class="hl-1">// 三维坐标点</span><br/><span class="hl-0"> </span><span class="hl-4">fontSize</span><span class="hl-0">?: </span><span class="hl-8">number</span><span class="hl-0"> </span><span class="hl-1">// 文本字体大小，默认 16px</span><br/><span class="hl-0">}</span>
120
- </code></pre>
121
-
122
- <a href="#信息面板" id="信息面板" style="color: inherit; text-decoration: none;">
123
- <h4>信息面板</h4>
124
- </a>
125
- <p><strong>信息面板</strong> 以弹框或抽屉面板的形式展示图片、音视频等素材内容。</p>
126
- <pre><code class="hljs language-ts"><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">InfoPanelData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">type</span><span class="hl-0">: </span><span class="hl-8">InfoPanelTypeEnum</span><span class="hl-0"> </span><span class="hl-1">// 面板类型</span><br/><span class="hl-0"> </span><span class="hl-4">url</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 素材静态资源地址</span><br/><span class="hl-0">}</span>
127
- </code></pre>
128
-
129
- <a href="#全景标签" id="全景标签" style="color: inherit; text-decoration: none;">
130
- <h4>全景标签</h4>
131
- </a>
132
- <p><strong>全景标签</strong> 在如视 3D 空间全景游走模态下展示文本、图片、视频等标签内容。全景标签的出现会附带一个生长动画。</p>
133
- <pre><code class="hljs language-ts"><span class="hl-3">enum</span><span class="hl-0"> </span><span class="hl-8">PanoTagEnum</span><span class="hl-0"> { </span><span class="hl-1">// 标签类型枚举</span><br/><span class="hl-0"> </span><span class="hl-6">Text</span><span class="hl-0"> = </span><span class="hl-5">&#39;Text&#39;</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-6">Image</span><span class="hl-0"> = </span><span class="hl-5">&#39;Image&#39;</span><span class="hl-0">,</span><br/><span class="hl-0">}</span><br/><br/><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">PanoTagData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">type</span><span class="hl-0">: </span><span class="hl-8">PanoTagEnum</span><span class="hl-0"> </span><span class="hl-1">// 标签类型</span><br/><span class="hl-0"> </span><span class="hl-4">text</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 文本</span><br/><span class="hl-0"> </span><span class="hl-4">vertex</span><span class="hl-0">: </span><span class="hl-8">Vertex</span><span class="hl-0"> </span><span class="hl-1">// 标签在全景游走模态中的三维坐标点</span><br/><span class="hl-0"> </span><span class="hl-4">imgUrl</span><span class="hl-0">?: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 图片资源地址</span><br/><span class="hl-0">}</span>
134
- </code></pre>
135
-
136
- <a href="#全景特效" id="全景特效" style="color: inherit; text-decoration: none;">
137
- <h4>全景特效</h4>
138
- </a>
139
- <p><strong>全景特效</strong> 指在如视 3D 空间全景游走模态下执行某些特效。</p>
140
- <p>目前仅支持测量长度的特效。比如，在全景游走模态下标注出窗户的宽度信息。</p>
141
- <pre><code class="hljs language-ts"><span class="hl-3">enum</span><span class="hl-0"> </span><span class="hl-8">PanoEffectEnum</span><span class="hl-0"> { </span><span class="hl-1">// 特效枚举</span><br/><span class="hl-0"> </span><span class="hl-1">// 两点距离</span><br/><span class="hl-0"> </span><span class="hl-6">Distance</span><span class="hl-0"> = </span><span class="hl-5">&#39;Distance&#39;</span><span class="hl-0">,</span><br/><span class="hl-0">}</span><br/><br/><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">PanoEffectData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">effect</span><span class="hl-0">: </span><span class="hl-8">PanoEffectEnum</span><span class="hl-0"> </span><span class="hl-1">// 特效类型</span><br/><span class="hl-0"> </span><span class="hl-4">twoVertexs</span><span class="hl-0">: [</span><span class="hl-8">Vertex</span><span class="hl-0">, </span><span class="hl-8">Vertex</span><span class="hl-0">] </span><span class="hl-1">// 两个点坐标值</span><br/><span class="hl-0">}</span>
142
- </code></pre>
143
-
144
- <a href="#模型特效" id="模型特效" style="color: inherit; text-decoration: none;">
145
- <h4>模型特效</h4>
146
- </a>
147
- <blockquote>
148
- <p>规划中，敬请期待。</p>
149
- </blockquote>
150
-
151
- <a href="#户改动画" id="户改动画" style="color: inherit; text-decoration: none;">
152
- <h4>户改动画</h4>
153
- </a>
154
- <blockquote>
155
- <p>规划中，敬请期待。</p>
156
- </blockquote>
157
-
158
- <a href="#更换全景" id="更换全景" style="color: inherit; text-decoration: none;">
159
- <h4>更换全景</h4>
160
- </a>
161
- <p><strong>更换全景</strong> 可以动态修改某个点位的全景图片。</p>
162
- <pre><code class="hljs language-ts"><span class="hl-2">export</span><span class="hl-0"> </span><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">UpdateVRPanoramaData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">_signature</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 签名字段</span><br/><span class="hl-0"> </span><span class="hl-4">allow_hosts</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0">[] </span><span class="hl-1">// 域名白名单</span><br/><span class="hl-0"> </span><span class="hl-4">certificate</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 签名值</span><br/><span class="hl-0"> </span><span class="hl-4">expire_at</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 过期时间</span><br/><span class="hl-0"> </span><span class="hl-1">// 动态场景</span><br/><span class="hl-0"> </span><span class="hl-4">dynamic_scene</span><span class="hl-0">?: {</span><br/><span class="hl-0"> </span><span class="hl-4">images</span><span class="hl-0">: { </span><span class="hl-1">// 切换全景的图片</span><br/><span class="hl-0"> </span><span class="hl-4">index</span><span class="hl-0">: </span><span class="hl-8">number</span><span class="hl-0"> </span><span class="hl-1">// 对应的全景点位</span><br/><span class="hl-0"> </span><span class="hl-4">right</span><span class="hl-0">: </span><span class="hl-8">string</span><br/><span class="hl-0"> </span><span class="hl-4">left</span><span class="hl-0">: </span><span class="hl-8">string</span><br/><span class="hl-0"> </span><span class="hl-4">up</span><span class="hl-0">: </span><span class="hl-8">string</span><br/><span class="hl-0"> </span><span class="hl-4">down</span><span class="hl-0">: </span><span class="hl-8">string</span><br/><span class="hl-0"> </span><span class="hl-4">front</span><span class="hl-0">: </span><span class="hl-8">string</span><br/><span class="hl-0"> </span><span class="hl-4">back</span><span class="hl-0">: </span><span class="hl-8">string</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> [</span><span class="hl-4">key</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0">]: </span><span class="hl-8">any</span><br/><span class="hl-0">}</span>
163
- </code></pre>
164
- <p>比如，您可以拍摄某个房间开灯与关灯两个场景的全景，通过动态切换可以营造出全景中开灯、关灯的效果。</p>
165
- <p>同样的，如果您在同一个位置分别拍摄了早晨、上午、中午、下午、傍晚、深夜的全景图片，就可以营造出该位置在一天中不同时间段的光照效果。</p>
166
-
167
- <a href="#视频广告" id="视频广告" style="color: inherit; text-decoration: none;">
168
- <h4>视频广告</h4>
169
- </a>
170
- <p><strong>视频广告</strong> 如果在如视 3D 空间模型中有电视、显示器、壁画等这类物品，可以在这些矩形区域播放一段视频。</p>
171
- <pre><code class="hljs language-ts"><span class="hl-1">// 四个顶点元组</span><br/><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">QuadrangleVertexs</span><span class="hl-0"> = [</span><span class="hl-8">Vertex</span><span class="hl-0">, </span><span class="hl-8">Vertex</span><span class="hl-0">, </span><span class="hl-8">Vertex</span><span class="hl-0">, </span><span class="hl-8">Vertex</span><span class="hl-0">]</span><br/><br/><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">ModelVideoData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">videoSrc</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 视频素材</span><br/><span class="hl-0"> </span><span class="hl-4">videoPosterSrc</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 视频封面</span><br/><span class="hl-0"> </span><span class="hl-4">vertexs</span><span class="hl-0">: </span><span class="hl-8">QuadrangleVertexs</span><span class="hl-0"> </span><span class="hl-1">// 视频映射在模型中的坐标点</span><br/><span class="hl-0">}</span>
172
- </code></pre>
173
-
174
- <a href="#视频特效" id="视频特效" style="color: inherit; text-decoration: none;">
175
- <h4>视频特效</h4>
176
- </a>
177
- <p><strong>视频特效</strong> 是基于视频实现的动画效果，视频的每一帧都与 VR 全景位置完全贴合。</p>
178
- <p>某些变形动画（比如开冰箱动作这类）可以采用视频特效来实现。</p>
179
- <pre><code class="hljs language-ts"><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">VideoEffectData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">videoSrc</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// 视频地址</span><br/><span class="hl-0"> </span><span class="hl-4">panoIndex</span><span class="hl-0">: </span><span class="hl-8">number</span><span class="hl-0"> </span><span class="hl-1">// 所处点位</span><br/><span class="hl-0"> </span><span class="hl-4">fov</span><span class="hl-0">: </span><span class="hl-8">number</span><span class="hl-0"> </span><span class="hl-1">// 镜头远近</span><br/><span class="hl-0"> </span><span class="hl-4">direction</span><span class="hl-0">?: </span><span class="hl-8">Vertex</span><span class="hl-0"> </span><span class="hl-1">// 方向向量: {x, y, z} 形式</span><br/><span class="hl-0"> </span><span class="hl-4">vector</span><span class="hl-0">?: </span><span class="hl-8">Pick</span><span class="hl-0">&lt;</span><span class="hl-8">Pose</span><span class="hl-0">, </span><span class="hl-5">&#39;longitude&#39;</span><span class="hl-0"> | </span><span class="hl-5">&#39;latitude&#39;</span><span class="hl-0">&gt; </span><span class="hl-1">// 方向向量: 向量坐标</span><br/><span class="hl-0">}</span>
180
- </code></pre>
181
-
182
- <a href="#背景音乐" id="背景音乐" style="color: inherit; text-decoration: none;">
183
- <h4>背景音乐</h4>
184
- </a>
185
- <p><strong>背景音乐</strong> 给剧本添加一段背景音乐（背景音乐会与讲稿音频并行播放）。</p>
186
- <pre><code class="hljs language-ts"><span class="hl-2">export</span><span class="hl-0"> </span><span class="hl-3">type</span><span class="hl-0"> </span><span class="hl-8">BgMusicData</span><span class="hl-0"> = {</span><br/><span class="hl-0"> </span><span class="hl-4">url</span><span class="hl-0">: </span><span class="hl-8">string</span><span class="hl-0"> </span><span class="hl-1">// .mp3 背景音乐 CDN 地址</span><br/><span class="hl-0">}</span>
187
- </code></pre>
188
-
189
- <a href="#自定义剧本帧行为" id="自定义剧本帧行为" style="color: inherit; text-decoration: none;">
190
- <h3>自定义剧本帧行为</h3>
191
- </a>
192
- <p><strong>Vreo</strong> 中的剧本帧行为是内置的，但如果您有强烈的诸如统一 UI 风格类的诉求，不想使用内置剧本逻辑，也可以通过 <code>new Player(five, {keyframeMap: {PanoTag: false}})</code> 来禁用内置剧本帧解析，然后通过监听剧本帧触发事件来补充您自己的剧本 UI 行为。</p>
193
- <p>比如，禁用全景标签的解析：</p>
194
- <pre><code class="hljs language-ts"><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">vreoplayer</span><span class="hl-0"> = </span><span class="hl-3">new</span><span class="hl-0"> </span><span class="hl-7">Player</span><span class="hl-0">(</span><span class="hl-4">five</span><span class="hl-0">, {</span><br/><span class="hl-0"> </span><span class="hl-4">keyframeMap:</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-4">PanoTag:</span><span class="hl-0"> </span><span class="hl-3">false</span><span class="hl-0"> </span><span class="hl-1">/* 禁用了全景标签的解析 */</span><span class="hl-0">,</span><br/><span class="hl-0"> },</span><br/><span class="hl-0">})</span><br/><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-7">callback</span><span class="hl-0"> = (</span><span class="hl-4">keyframe</span><span class="hl-0">: </span><span class="hl-8">VreoKeyframe</span><span class="hl-0">) </span><span class="hl-3">=&gt;</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-1">/* 您自己的业务逻辑：全景标签的模块 */</span><br/><span class="hl-0">}</span><br/><span class="hl-1">// 添加监听</span><br/><span class="hl-4">vreoplayer</span><span class="hl-0">.</span><span class="hl-7">on</span><span class="hl-0">(</span><span class="hl-4">VreoKeyframeEnum</span><span class="hl-0">.</span><span class="hl-4">PanoTag</span><span class="hl-0">, </span><span class="hl-4">callback</span><span class="hl-0">)</span><br/><span class="hl-1">// 关闭监听</span><br/><span class="hl-4">vreoplayer</span><span class="hl-0">.</span><span class="hl-7">off</span><span class="hl-0">(</span><span class="hl-4">VreoKeyframeEnum</span><span class="hl-0">.</span><span class="hl-4">PanoTag</span><span class="hl-0">, </span><span class="hl-4">callback</span><span class="hl-0">)</span>
195
- </code></pre>
196
- <p>目前仅 DOM 相关的剧本关键帧支持自定义，与 3D 空间模型相关的内容（如：运镜、特效等）尚不支持用户自定义，请采用内置方案。</p>
197
-
198
- <a href="#自定义剧本帧" id="自定义剧本帧" style="color: inherit; text-decoration: none;">
199
- <h3>自定义剧本帧</h3>
200
- </a>
201
- <p>除了默认内置的剧本帧之外，<strong>Vreo</strong> 支持自定义剧本帧。你可以将剧本帧类型设定为 <code>VreoKeyframeEnum.Custom</code>，然后通过监听 <code>vreoplayer.on(VreoKeyframeEnum.Custom, callback)</code> 剧本事件去解析你自己定义的剧本行为。</p>
202
- <p>此外，你也可以实现个 <code>React</code> 组件，例如：</p>
203
- <pre><code class="hljs language-ts"><span class="hl-2">export</span><span class="hl-0"> </span><span class="hl-3">function</span><span class="hl-0"> </span><span class="hl-7">YourCustomKeyframe</span><span class="hl-0">(</span><span class="hl-4">props</span><span class="hl-0">: </span><span class="hl-8">CustomVreoKeyframeProps</span><span class="hl-0">) {</span><br/><br/><span class="hl-0"> </span><span class="hl-4">React</span><span class="hl-0">.</span><span class="hl-7">useEffect</span><span class="hl-0">(() </span><span class="hl-3">=&gt;</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-4">props</span><span class="hl-0">.</span><span class="hl-4">subscribe</span><span class="hl-0">.</span><span class="hl-7">on</span><span class="hl-0">(</span><span class="hl-4">VreoKeyframeEnum</span><span class="hl-0">.</span><span class="hl-4">Custom</span><span class="hl-0">, </span><span class="hl-4">callback</span><span class="hl-0">)</span><br/><br/><span class="hl-0"> </span><span class="hl-2">return</span><span class="hl-0"> () </span><span class="hl-3">=&gt;</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-4">props</span><span class="hl-0">.</span><span class="hl-4">subscribe</span><span class="hl-0">.</span><span class="hl-7">off</span><span class="hl-0">(</span><span class="hl-4">VreoKeyframeEnum</span><span class="hl-0">.</span><span class="hl-4">Custom</span><span class="hl-0">, </span><span class="hl-4">callback</span><span class="hl-0">)</span><br/><span class="hl-0"> }</span><br/><span class="hl-0"> }, [])</span><br/><br/><span class="hl-0"> </span><span class="hl-2">return</span><span class="hl-0"> &lt;&gt;...&lt;/&gt;</span><br/><span class="hl-0">}</span>
204
- </code></pre>
205
- <p>然后通过 <code>new Player(five, {customKeyframes: [YourCustomKeyframe]})</code> 配置参数添加进去即可。</p>
206
-
207
- <a href="#注意事项" id="注意事项" style="color: inherit; text-decoration: none;">
208
- <h2>注意事项</h2>
209
- </a>
210
-
211
- <a href="#兼容性" id="兼容性" style="color: inherit; text-decoration: none;">
212
- <h3>兼容性</h3>
213
- </a>
214
- <p>浏览器对视频自动播放有严格的限制（播放行为必须由用户触发），<code>@realsee/vreo</code> 内部已经最大限度规避了浏览器对视频自动播放的限制。</p>
215
- <p>但是规避 <a href="https://developers.weixin.qq.com/community/develop/doc/000e640d77cfa001132a6cb8456c01">微信浏览器中音视频自动播放限制</a> 需要调用 <a href="https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html">微信 JS-SDK</a> 触发<code>WeixinJSBridgeReady</code>事件后才能实现。</p>
216
- <p>虽然 <code>@realsee/vreo</code> 并不依赖 <a href="https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html">微信 JS-SDK</a> ，但您可以提前创建<code>HTMLVideoElement</code>实例，然后再在初始化<code>vreoplayer</code>实例时通过配置项指定 <code>HTMLVideoElement</code>实例，可参考：</p>
217
- <pre><code class="hljs language-ts"><span class="hl-1">// 创建 HTMLVideoElement 实例</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-7">creatVideo</span><span class="hl-0"> = (): </span><span class="hl-8">HTMLVideoElement</span><span class="hl-0"> </span><span class="hl-3">=&gt;</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">video</span><span class="hl-0"> = </span><span class="hl-4">document</span><span class="hl-0">.</span><span class="hl-7">createElement</span><span class="hl-0">(</span><span class="hl-5">&#39;video&#39;</span><span class="hl-0">)</span><br/><br/><span class="hl-0"> </span><span class="hl-4">video</span><span class="hl-0">.</span><span class="hl-7">setAttribute</span><span class="hl-0">(</span><span class="hl-5">&#39;playsinline&#39;</span><span class="hl-0">, </span><span class="hl-5">&#39;true&#39;</span><span class="hl-0">)</span><br/><span class="hl-0"> </span><span class="hl-4">video</span><span class="hl-0">.</span><span class="hl-7">setAttribute</span><span class="hl-0">(</span><span class="hl-5">&#39;webkit-playsinline&#39;</span><span class="hl-0">, </span><span class="hl-5">&#39;true&#39;</span><span class="hl-0">)</span><br/><span class="hl-0"> </span><span class="hl-4">video</span><span class="hl-0">.</span><span class="hl-7">setAttribute</span><span class="hl-0">(</span><span class="hl-5">&#39;autoplay&#39;</span><span class="hl-0">, </span><span class="hl-5">&#39;true&#39;</span><span class="hl-0">)</span><br/><br/><span class="hl-0"> </span><span class="hl-2">return</span><span class="hl-0"> </span><span class="hl-4">video</span><br/><span class="hl-0">}</span><br/><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-7">creatAudio</span><span class="hl-0"> = (): </span><span class="hl-8">HTMLVideoElement</span><span class="hl-0"> </span><span class="hl-3">=&gt;</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">audio</span><span class="hl-0"> = </span><span class="hl-4">document</span><span class="hl-0">.</span><span class="hl-7">createElement</span><span class="hl-0">(</span><span class="hl-5">&#39;audio&#39;</span><span class="hl-0">)</span><br/><br/><span class="hl-0"> </span><span class="hl-4">audio</span><span class="hl-0">.</span><span class="hl-7">setAttribute</span><span class="hl-0">(</span><span class="hl-5">&#39;autoplay&#39;</span><span class="hl-0">, </span><span class="hl-5">&#39;true&#39;</span><span class="hl-0">)</span><br/><br/><span class="hl-0"> </span><span class="hl-2">return</span><span class="hl-0"> </span><span class="hl-4">audio</span><br/><span class="hl-0">}</span><br/><br/><span class="hl-1">// 提前创建 Video</span><br/><span class="hl-1">// 视频特效</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">videoEffect</span><span class="hl-0"> = </span><span class="hl-7">creatVideo</span><span class="hl-0">()</span><br/><span class="hl-1">// 视频广告</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">modelTVVideo</span><span class="hl-0"> = </span><span class="hl-7">creatVideo</span><span class="hl-0">()</span><br/><span class="hl-1">// 视频数字人形象</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">videoInstance</span><span class="hl-0"> = </span><span class="hl-7">creatVideo</span><span class="hl-0">()</span><br/><span class="hl-1">// 无数字人，仅音频</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">audioInstance</span><span class="hl-0"> = </span><span class="hl-7">createAudio</span><span class="hl-0">()</span><br/><br/><span class="hl-1">// 微信限制：需在 WeixinJSBridgeReady 回调中触发一次</span><br/><span class="hl-4">document</span><span class="hl-0">.</span><span class="hl-7">addEventListener</span><span class="hl-0">(</span><br/><span class="hl-0"> </span><span class="hl-5">&#39;WeixinJSBridgeReady&#39;</span><span class="hl-0">,</span><br/><span class="hl-0"> () </span><span class="hl-3">=&gt;</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-4">videoEffect</span><span class="hl-0">.</span><span class="hl-7">play</span><span class="hl-0">()</span><br/><span class="hl-0"> </span><span class="hl-4">modelTVVideo</span><span class="hl-0">.</span><span class="hl-7">play</span><span class="hl-0">()</span><br/><span class="hl-0"> </span><span class="hl-4">videoInstance</span><span class="hl-0">.</span><span class="hl-7">play</span><span class="hl-0">()</span><br/><span class="hl-0"> </span><span class="hl-4">audioInstance</span><span class="hl-0">.</span><span class="hl-7">play</span><span class="hl-0">()</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> </span><span class="hl-3">false</span><br/><span class="hl-0">)</span><br/><br/><span class="hl-1">// 创建 Player 实例</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">vreoplayer</span><span class="hl-0"> = </span><span class="hl-3">new</span><span class="hl-0"> </span><span class="hl-7">Player</span><span class="hl-0">(</span><span class="hl-4">five</span><span class="hl-0">, {</span><br/><span class="hl-0"> </span><span class="hl-4">videos:</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-4">videoEffect</span><span class="hl-0">, </span><span class="hl-1">// 视频特效 时依赖的 HTMLVideoElement</span><br/><span class="hl-0"> </span><span class="hl-4">modelTVVideo</span><span class="hl-0">, </span><span class="hl-1">// 视频广告 时依赖的 HTMLVideoElement</span><br/><span class="hl-0"> },</span><br/><span class="hl-0"> </span><span class="hl-4">videoAgentMeshOptions:</span><span class="hl-0"> {</span><br/><span class="hl-0"> </span><span class="hl-4">videoInstance</span><span class="hl-0">,</span><br/><span class="hl-0"> </span><span class="hl-4">audioInstance</span><span class="hl-0">,</span><br/><span class="hl-0"> }</span><br/><span class="hl-0">})</span>
218
- </code></pre>
219
- <p>这样，在微信浏览器或微信小程序 <code>WebView</code> 中也能正常使用自动播效果。</p>
220
-
221
- <a href="#性能优化" id="性能优化" style="color: inherit; text-decoration: none;">
222
- <h3>性能优化</h3>
223
- </a>
224
- <p>提高播放性能目前有两个策略：降低贴图分辨率和提前预载。</p>
225
-
226
- <a href="#降低图片分辨率" id="降低图片分辨率" style="color: inherit; text-decoration: none;">
227
- <h4>降低图片分辨率</h4>
228
- </a>
229
- <p>可以设置 <code>five.imageOptions.size</code> 来降低渲染引擎的贴图尺寸，这样下载速度会变快且内存占用也会降低。
230
- 你也可以配置 <strong>Vreo</strong> 参数来达到类似的效果：</p>
231
- <pre><code class="hljs language-ts"><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">vreoplayer</span><span class="hl-0"> = </span><span class="hl-3">new</span><span class="hl-0"> </span><span class="hl-7">Player</span><span class="hl-0">(</span><span class="hl-4">five</span><span class="hl-0">, { </span><span class="hl-4">imageOptions:</span><span class="hl-0"> { </span><span class="hl-4">size:</span><span class="hl-0"> </span><span class="hl-14">1024</span><span class="hl-0"> } })</span>
232
- </code></pre>
233
-
234
- <a href="#提前预载" id="提前预载" style="color: inherit; text-decoration: none;">
235
- <h4>提前预载</h4>
236
- </a>
237
- <p>如果网络不稳定，可以提前预载静态资源，这样播放过程中不会卡顿：</p>
238
- <pre><code class="hljs language-ts"><span class="hl-1">// 全局预载</span><br/><span class="hl-3">const</span><span class="hl-0"> </span><span class="hl-6">vreoplayer</span><span class="hl-0"> = </span><span class="hl-3">new</span><span class="hl-0"> </span><span class="hl-7">Player</span><span class="hl-0">(</span><span class="hl-4">five</span><span class="hl-0">, { </span><span class="hl-4">autoPreload:</span><span class="hl-0"> </span><span class="hl-3">true</span><span class="hl-0"> })</span><br/><br/><span class="hl-1">// 针对某一份剧本数据预载</span><br/><span class="hl-4">vreoplayer</span><span class="hl-0">.</span><span class="hl-7">load</span><span class="hl-0">(</span><span class="hl-4">vreoUnit</span><span class="hl-0">, </span><span class="hl-14">0</span><span class="hl-0">, </span><span class="hl-3">true</span><span class="hl-0">)</span><br/>
239
- </code></pre>
240
-
241
- <a href="#api-文档" id="api-文档" style="color: inherit; text-decoration: none;">
242
- <h2>API 文档</h2>
243
- </a>
244
- <p>详细的 API 文档请参考：<a href="https://realsee.js.org/vreo/index.html">Vreo API</a> 。</p>
245
- </div></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class="current"><a href="modules.html">Modules</a></li><li class=" tsd-kind-module"><a href="modules/Player.html">Player</a></li><li class=" tsd-kind-module"><a href="modules/custom.html">custom</a></li><li class=" tsd-kind-module"><a href="modules/fivePlugins.html">five<wbr/>Plugins</a></li><li class=" tsd-kind-module"><a href="modules/react.html">react</a></li></ul></nav></div></div></div><footer class=""><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li><li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li><li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li><li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="assets/main.js"></script></body></html>
package/docs/interfaces/Player.CustomVreoKeyframeProps.html DELETED
@@ -1 +0,0 @@
1
- <!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>CustomVreoKeyframeProps | Vreo</title><meta name="description" content="Documentation for Vreo"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Vreo</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Vreo</a></li><li><a href="../modules/Player.html">Player</a></li><li><a href="Player.CustomVreoKeyframeProps.html">CustomVreoKeyframeProps</a></li></ul><h1>Interface CustomVreoKeyframeProps </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">CustomVreoKeyframeProps</span></li></ul></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.CustomVreoKeyframeProps.html#five" class="tsd-kind-icon">five</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.CustomVreoKeyframeProps.html#subscribe" class="tsd-kind-icon">subscribe</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="five" class="tsd-anchor"></a><h3 class="tsd-anchor-link">five<a href="#five" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">five<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">Five</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L48">resources/Player/typings.ts:48</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="subscribe" class="tsd-anchor"></a><h3 class="tsd-anchor-link">subscribe<a href="#subscribe" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">subscribe<span class="tsd-signature-symbol">:</span> <a href="../modules/Player.html#VreoSubscribe" class="tsd-signature-type" data-tsd-kind="Type alias">VreoSubscribe</a></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L47">resources/Player/typings.ts:47</a></li></ul></aside></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../modules.html">Modules</a></li><li class="current tsd-kind-module"><a href="../modules/Player.html">Player</a></li><li class=" tsd-kind-module"><a href="../modules/custom.html">custom</a></li><li class=" tsd-kind-module"><a href="../modules/fivePlugins.html">five<wbr/>Plugins</a></li><li class=" tsd-kind-module"><a href="../modules/react.html">react</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-interface tsd-parent-kind-module"><a href="Player.CustomVreoKeyframeProps.html" class="tsd-kind-icon">Custom<wbr/>Vreo<wbr/>Keyframe<wbr/>Props</a><ul><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.CustomVreoKeyframeProps.html#five" class="tsd-kind-icon">five</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.CustomVreoKeyframeProps.html#subscribe" class="tsd-kind-icon">subscribe</a></li></ul></li></ul></nav></div></div></div><footer class=""><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li><li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li><li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li><li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li><li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script></body></html>
package/docs/interfaces/Player.PlayerConfigs.html DELETED
@@ -1,7 +0,0 @@
1
- <!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>PlayerConfigs | Vreo</title><meta name="description" content="Documentation for Vreo"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Vreo</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Vreo</a></li><li><a href="../modules/Player.html">Player</a></li><li><a href="Player.PlayerConfigs.html">PlayerConfigs</a></li></ul><h1>Interface PlayerConfigs </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">PlayerConfigs</span></li></ul></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#appSize" class="tsd-kind-icon">app<wbr/>Size</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#appearance" class="tsd-kind-icon">appearance</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#autoPreload" class="tsd-kind-icon">auto<wbr/>Preload</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#container" class="tsd-kind-icon">container</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#containter" class="tsd-kind-icon">containter</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#customKeyframes" class="tsd-kind-icon">custom<wbr/>Keyframes</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#customPanelChildren" class="tsd-kind-icon">custom<wbr/>Panel<wbr/>Children</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#imageOptions" class="tsd-kind-icon">image<wbr/>Options</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#keyframeMap" class="tsd-kind-icon">keyframe<wbr/>Map</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#videoAgentMeshOptions" class="tsd-kind-icon">video<wbr/>Agent<wbr/>Mesh<wbr/>Options</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#videos" class="tsd-kind-icon">videos</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="appSize" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> app<wbr/>Size<a href="#appSize" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">app<wbr/>Size<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">AppSize</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L32">resources/Player/typings.ts:32</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="appearance" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> appearance<a href="#appearance" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">appearance<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">Appearance</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L33">resources/Player/typings.ts:33</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="autoPreload" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> auto<wbr/>Preload<a href="#autoPreload" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">auto<wbr/>Preload<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">boolean</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L31">resources/Player/typings.ts:31</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="container" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> container<a href="#container" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">container<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">Element</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L12">resources/Player/typings.ts:12</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="containter" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> containter<a href="#containter" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">containter<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">Element</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L11">resources/Player/typings.ts:11</a></li></ul></aside><div class="tsd-comment tsd-typography"><dl class="tsd-comment-tags"><dt>deprecated</dt><dd><p>rename to container</p>
2
- </dd></dl></div></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="customKeyframes" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> custom<wbr/>Keyframes<a href="#customKeyframes" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">custom<wbr/>Keyframes<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">FC</span><span class="tsd-signature-symbol">&lt;</span><a href="Player.CustomVreoKeyframeProps.html" class="tsd-signature-type" data-tsd-kind="Interface">CustomVreoKeyframeProps</a><span class="tsd-signature-symbol">&gt;</span><span class="tsd-signature-symbol">[]</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L29">resources/Player/typings.ts:29</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="customPanelChildren" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> custom<wbr/>Panel<wbr/>Children<a href="#customPanelChildren" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">custom<wbr/>Panel<wbr/>Children<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-type">ReactNode</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L28">resources/Player/typings.ts:28</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
3
- <p>如果需要在 底部面板添加自定义内容，可以传递个 React 组件。</p>
4
- </div></div></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="imageOptions" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> image<wbr/>Options<a href="#imageOptions" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">image<wbr/>Options<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">{ </span>size<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span><span class="tsd-signature-symbol"> }</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L30">resources/Player/typings.ts:30</a></li></ul></aside><div class="tsd-type-declaration"><h4>Type declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter"><h5>size<span class="tsd-signature-symbol">: </span><span class="tsd-signature-type">number</span></h5></li></ul></div></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="keyframeMap" class="tsd-anchor"></a><h3 class="tsd-anchor-link">keyframe<wbr/>Map<a href="#keyframeMap" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">keyframe<wbr/>Map<span class="tsd-signature-symbol">:</span> <a href="../modules/Player.html#VreoKeyframeMap" class="tsd-signature-type" data-tsd-kind="Type alias">VreoKeyframeMap</a></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L13">resources/Player/typings.ts:13</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="videoAgentMeshOptions" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> video<wbr/>Agent<wbr/>Mesh<wbr/>Options<a href="#videoAgentMeshOptions" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">video<wbr/>Agent<wbr/>Mesh<wbr/>Options<span class="tsd-signature-symbol">?:</span> <a href="Player.VideoAgentMeshOptions.html" class="tsd-signature-type" data-tsd-kind="Interface">VideoAgentMeshOptions</a></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L24">resources/Player/typings.ts:24</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="videos" class="tsd-anchor"></a><h3 class="tsd-anchor-link"><span class="tsd-flag ts-flagOptional">Optional</span> videos<a href="#videos" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">videos<span class="tsd-signature-symbol">?:</span> <span class="tsd-signature-symbol">{ </span>modelTVVideo<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">HTMLVideoElement</span><span class="tsd-signature-symbol">; </span>videoEffect<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">HTMLVideoElement</span><span class="tsd-signature-symbol"> }</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/Player/typings.ts#L19">resources/Player/typings.ts:19</a></li></ul></aside><div class="tsd-comment tsd-typography"><div class="lead">
5
- <p>微信端自动播放功能实现需要提前初始化 Video 实例。</p>
6
- </div><div><p>如果需要支持微信浏览器端自动播放需要接入微信SDK及提前初始化好相关 Video 实例。</p>
7
- </div></div><div class="tsd-type-declaration"><h4>Type declaration</h4><ul class="tsd-parameters"><li class="tsd-parameter"><h5><span class="tsd-flag ts-flagOptional">Optional</span> modelTVVideo<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">HTMLVideoElement</span></h5></li><li class="tsd-parameter"><h5><span class="tsd-flag ts-flagOptional">Optional</span> video<wbr/>Effect<span class="tsd-signature-symbol">?: </span><span class="tsd-signature-type">HTMLVideoElement</span></h5></li></ul></div></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../modules.html">Modules</a></li><li class="current tsd-kind-module"><a href="../modules/Player.html">Player</a></li><li class=" tsd-kind-module"><a href="../modules/custom.html">custom</a></li><li class=" tsd-kind-module"><a href="../modules/fivePlugins.html">five<wbr/>Plugins</a></li><li class=" tsd-kind-module"><a href="../modules/react.html">react</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-interface tsd-parent-kind-module"><a href="Player.PlayerConfigs.html" class="tsd-kind-icon">Player<wbr/>Configs</a><ul><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#appSize" class="tsd-kind-icon">app<wbr/>Size</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#appearance" class="tsd-kind-icon">appearance</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#autoPreload" class="tsd-kind-icon">auto<wbr/>Preload</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#container" class="tsd-kind-icon">container</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#containter" class="tsd-kind-icon">containter</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#customKeyframes" class="tsd-kind-icon">custom<wbr/>Keyframes</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#customPanelChildren" class="tsd-kind-icon">custom<wbr/>Panel<wbr/>Children</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#imageOptions" class="tsd-kind-icon">image<wbr/>Options</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#keyframeMap" class="tsd-kind-icon">keyframe<wbr/>Map</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#videoAgentMeshOptions" class="tsd-kind-icon">video<wbr/>Agent<wbr/>Mesh<wbr/>Options</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.PlayerConfigs.html#videos" class="tsd-kind-icon">videos</a></li></ul></li></ul></nav></div></div></div><footer class=""><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li><li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li><li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li><li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li><li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script></body></html>
package/docs/interfaces/Player.Vertex.html DELETED
@@ -1,3 +0,0 @@
1
- <!DOCTYPE html><html class="default"><head><meta charSet="utf-8"/><meta http-equiv="x-ua-compatible" content="IE=edge"/><title>Vertex | Vreo</title><meta name="description" content="Documentation for Vreo"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="stylesheet" href="../assets/style.css"/><link rel="stylesheet" href="../assets/highlight.css"/><link rel="stylesheet" href="../assets/custom.css"/><script async src="../assets/search.js" id="search-script"></script></head><body><script>document.body.classList.add(localStorage.getItem("tsd-theme") || "os")</script><header><div class="tsd-page-toolbar"><div class="container"><div class="table-wrap"><div class="table-cell" id="tsd-search" data-base=".."><div class="field"><label for="tsd-search-field" class="tsd-widget search no-caption">Search</label><input type="text" id="tsd-search-field"/></div><ul class="results"><li class="state loading">Preparing search index...</li><li class="state failure">The search index is not available</li></ul><a href="../index.html" class="title">Vreo</a></div><div class="table-cell" id="tsd-widgets"><div id="tsd-filter"><a href="#" class="tsd-widget options no-caption" data-toggle="options">Options</a><div class="tsd-filter-group"><div class="tsd-select" id="tsd-filter-visibility"><span class="tsd-select-label">All</span><ul class="tsd-select-list"><li data-value="public">Public</li><li data-value="protected">Public/Protected</li><li data-value="private" class="selected">All</li></ul></div> <input type="checkbox" id="tsd-filter-inherited" checked/><label class="tsd-widget" for="tsd-filter-inherited">Inherited</label><input type="checkbox" id="tsd-filter-externals" checked/><label class="tsd-widget" for="tsd-filter-externals">Externals</label></div></div><a href="#" class="tsd-widget menu no-caption" data-toggle="menu">Menu</a></div></div></div></div><div class="tsd-page-title"><div class="container"><ul class="tsd-breadcrumb"><li><a href="../modules.html">Vreo</a></li><li><a href="../modules/Player.html">Player</a></li><li><a href="Player.Vertex.html">Vertex</a></li></ul><h1>Interface Vertex </h1></div></div></header><div class="container container-main"><div class="row"><div class="col-8 col-content"><section class="tsd-panel tsd-comment"><div class="tsd-comment tsd-typography"><div class="lead">
2
- <p>顶点</p>
3
- </div></div></section><section class="tsd-panel tsd-hierarchy"><h3>Hierarchy</h3><ul class="tsd-hierarchy"><li><span class="target">Vertex</span></li></ul></section><section class="tsd-panel-group tsd-index-group"><h2>Index</h2><section class="tsd-panel tsd-index-panel"><div class="tsd-index-content"><section class="tsd-index-section "><h3>Properties</h3><ul class="tsd-index-list"><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.Vertex.html#x" class="tsd-kind-icon">x</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.Vertex.html#y" class="tsd-kind-icon">y</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.Vertex.html#z" class="tsd-kind-icon">z</a></li></ul></section></div></section></section><section class="tsd-panel-group tsd-member-group "><h2>Properties</h2><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="x" class="tsd-anchor"></a><h3 class="tsd-anchor-link">x<a href="#x" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">x<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/typings/VreoUnit.ts#L167">resources/typings/VreoUnit.ts:167</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="y" class="tsd-anchor"></a><h3 class="tsd-anchor-link">y<a href="#y" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">y<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/typings/VreoUnit.ts#L168">resources/typings/VreoUnit.ts:168</a></li></ul></aside></section><section class="tsd-panel tsd-member tsd-kind-property tsd-parent-kind-interface"><a id="z" class="tsd-anchor"></a><h3 class="tsd-anchor-link">z<a href="#z" aria-label="Permalink" class="tsd-anchor-icon"><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-link" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5"></path><path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5"></path></svg></a></h3><div class="tsd-signature tsd-kind-icon">z<span class="tsd-signature-symbol">:</span> <span class="tsd-signature-type">number</span></div><aside class="tsd-sources"><ul><li>Defined in <a href="https://github.com/realsee-developer/vreo/blob/fa76d81/resources/typings/VreoUnit.ts#L169">resources/typings/VreoUnit.ts:169</a></li></ul></aside></section></section></div><div class="col-4 col-menu menu-sticky-wrap menu-highlight"><nav class="tsd-navigation primary"><ul><li class=""><a href="../modules.html">Modules</a></li><li class="current tsd-kind-module"><a href="../modules/Player.html">Player</a></li><li class=" tsd-kind-module"><a href="../modules/custom.html">custom</a></li><li class=" tsd-kind-module"><a href="../modules/fivePlugins.html">five<wbr/>Plugins</a></li><li class=" tsd-kind-module"><a href="../modules/react.html">react</a></li></ul></nav><nav class="tsd-navigation secondary menu-sticky"><ul><li class="current tsd-kind-interface tsd-parent-kind-module"><a href="Player.Vertex.html" class="tsd-kind-icon">Vertex</a><ul><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.Vertex.html#x" class="tsd-kind-icon">x</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.Vertex.html#y" class="tsd-kind-icon">y</a></li><li class="tsd-kind-property tsd-parent-kind-interface"><a href="Player.Vertex.html#z" class="tsd-kind-icon">z</a></li></ul></li></ul></nav></div></div></div><footer class=""><div class="container"><h2>Legend</h2><div class="tsd-legend-group"><ul class="tsd-legend"><li class="tsd-kind-variable"><span class="tsd-kind-icon">Variable</span></li><li class="tsd-kind-function"><span class="tsd-kind-icon">Function</span></li><li class="tsd-kind-function tsd-has-type-parameter"><span class="tsd-kind-icon">Function with type parameter</span></li><li class="tsd-kind-type-alias"><span class="tsd-kind-icon">Type alias</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-interface"><span class="tsd-kind-icon">Interface</span></li><li class="tsd-kind-property tsd-parent-kind-interface"><span class="tsd-kind-icon">Property</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-enum"><span class="tsd-kind-icon">Enumeration</span></li></ul><ul class="tsd-legend"><li class="tsd-kind-class"><span class="tsd-kind-icon">Class</span></li></ul></div><h2>Settings</h2><p>Theme <select id="theme"><option value="os">OS</option><option value="light">Light</option><option value="dark">Dark</option></select></p></div></footer><div class="overlay"></div><script src="../assets/main.js"></script></body></html>