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

本教程介绍如何在krpano场景中插入视频,包括作为layer的视频和作为hotspot的视频。

其中在krpano下载包中的路径分别为:

examples/plugin-examples/video-hotspot/

examples/plugin-examples/video-player/

相关链接:

Videoplayer插件官方文档

图解krpano视频插件

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

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

 

因为我们是调用的是视频插件,首先我们要确保视频插件在plugins文件夹,如果没有的话,可从krpano下载包中的viewer文件夹中找到plugins文件夹,可一次性将里面全部插件都复制到你自己的项目的plugins文件夹中,当然这里面包括了我们需要的videoplayer.jsvideoplayer.swf。我们还要把视频(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插件得到几个关键属性,替换到上面的代码中,我们就得到了:

 

发表评论