移花接木(14)- 插入平面视频或热点视频

更新于 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/

相关链接:

Videoplayer插件官方文档

图解krpano视频插件

图解Editor插件嵌入电视机视频

使用handbrake转换krpano可用的MP4视频

 

因为我们是调用的是视频插件,首先我们要确保视频插件在plugins文件夹,如果没有的话,可从krpano下载包中的viewer文件夹中找到plugins文件夹,可一次性将里面全部插件都复制到你自己的项目的plugins文件夹中,当然这里面包括了我们需要的videoplayer.js。我们还要把视频(cats-short.mp4及cats-short.webm)及视频截图(cats-short-poster.jpg)拷贝到对应的位置,这里我们直接使用krpano案例的两个视频和截图文件,放在自己的项目根目录下。

插入平面视频

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

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

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

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

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

插入热点视频

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

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

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

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

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

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

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

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

发表评论