文章目录

更新于 2024.4.19 krpano 1.21.2

官方下载包路径

你电脑的路径\krpano-1.21.2\viewer\examples\inline-video-players\

你电脑的路径\krpano-1.21.2\viewer\examples\videohotspot\

提示：如果不了解何谓下载包路径，请查看循序渐进（3）- krpano下载包的使用说明

在线演示

以下隐藏内容仅供VIP会员查看，加入VIP会员请查看首页头图文章或添加站长微信

插入平面视频

以下隐藏内容仅供VIP会员查看，加入VIP会员请查看首页头图文章或添加站长微信

插入国内网站在线视频

以下隐藏内容仅供VIP会员查看，加入VIP会员请查看首页头图文章或添加站长微信

插入热点视频

以下隐藏内容仅供VIP会员查看，加入VIP会员请查看首页头图文章或添加站长微信

为视频添加内嵌H5控制条

以下隐藏内容仅供VIP会员查看，加入VIP会员请查看首页头图文章或添加站长微信

1.18案例

krpano下载包1.18.6中的路径分别为：

examples/plugin-examples/video-hotspot/

examples/plugin-examples/video-player/

插入平面视频

把examples/plugin-examples/video-player/ 中的videoplayer.xml拷贝到项目文件夹中。

在tour.xml的空白处加入下述代码：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<include url="videoplayer.xml" />

1	<include url="videoplayer.xml" />

假定你的项目里有一个热点或者平面按钮，点击该按钮就能打开平面视频。因此你的layer元素或者hotspot元素里要写onclick属性：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

onclick="videoplayer_open(cats-short.mp4|cats-short.webm, cats-short-poster.jpg);"

1	onclick="videoplayer_open(cats-short.mp4\|cats-short.webm, cats-short-poster.jpg);"

插入热点视频

关于热点视频，你应该首先查看图解Editor插件嵌入电视机视频

有了上述教程基础之后，我们能得到下面类似的代码：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

ath="-56.520791" atv="6.23794" distorted="true" rx="10.0" ry="-16.5" rz="-1.089844" width="320" height="240" scale="0.386152"

1	ath="-56.520791" atv="6.23794" distorted="true" rx="10.0" ry="-16.5" rz="-1.089844" width="320" height="240" scale="0.386152"

官方原来的热点视频代码是：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

<hotspot name="videospot"
	         url="%SWFPATH%/plugins/videoplayer.js" 
	         videourl="cats-short.mp4|cats-short.webm"
	         posterurl="cats-short-poster.jpg"
	         distorted="true"
	         ath="0"
	         atv="0"
	         edge="center"
	         scale="1.0"
	         rx="0"
	         ry="0"
	         rz="0"
	         loop="true"
	         pausedonstart="true"
	         directionalsound="true"
	         range="200"
	         volume="0.7"
	         onclick="togglepause();"
	         />

<hotspot name="videospot"

url="%SWFPATH%/plugins/videoplayer.js"

videourl="cats-short.mp4|cats-short.webm"

posterurl="cats-short-poster.jpg"

distorted="true"

ath="0"

atv="0"

edge="center"

scale="1.0"

rx="0"

ry="0"

rz="0"

loop="true"

pausedonstart="true"

directionalsound="true"

range="200"

volume="0.7"

onclick="togglepause();"

这样我们结合在editor插件得到几个关键属性，替换到上面的代码中，我们就得到了：

点击代码窗口最右侧按钮，在新窗口打开后复制代码

	<hotspot name="videospot"
	         url="%SWFPATH%/plugins/videoplayer.js"
	         videourl="cats-short.mp4|cats-short.webm"
	         posterurl="cats-short-poster.jpg"
	         distorted="true"
	         ath="-56.520791"
	         atv="6.23794"
	         edge="center"
	         width="320" height="240" scale="0.386152"
	         rx="10.0"
	         ry="-16.5"
	         rz="-1.089844"
	         loop="true"
	         pausedonstart="true"
	         directionalsound="true"
	         range="200"
	         volume="0.7"
	         onclick="togglepause();"
	         
	         />

<hotspot name="videospot"

url="%SWFPATH%/plugins/videoplayer.js"

videourl="cats-short.mp4|cats-short.webm"

posterurl="cats-short-poster.jpg"

distorted="true"

ath="-56.520791"

atv="6.23794"

edge="center"

width="320" height="240" scale="0.386152"

rx="10.0"

ry="-16.5"

rz="-1.089844"

loop="true"

pausedonstart="true"

directionalsound="true"

range="200"

volume="0.7"

onclick="togglepause();"

移花接木（14）- 插入平面视频或热点视频

官方下载包路径

在线演示

插入平面视频

插入国内网站在线视频

插入热点视频

为视频添加内嵌H5控制条

1.18案例

插入平面视频

插入热点视频

在 “移花接木（14）- 插入平面视频或热点视频” 上有 1 条评论

发表评论取消回复

官方下载包路径

在线演示

插入平面视频

插入国内网站在线视频

插入热点视频

为视频添加内嵌H5控制条

1.18案例

插入平面视频

插入热点视频

在 “移花接木（14）- 插入平面视频或热点视频” 上有 1 条评论

发表评论 取消回复

发表评论取消回复