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

更新于 2017.9.21 krpano 1.19-pr13

1.19官方下载包路径

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

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

提示:如果不了解何谓下载包路径,请查看 循序渐进(3)- krpano下载包的使用说明

 

在线演示

平面视频和网站视频(youtube需翻墙)

热点视频

 

插入平面视频

插入平面视频的案例在你电脑的路径\krpano-1.19-pr13\viewer\examples\inline-video-players\

步骤

  • 将视频文件的mp4格式、webm格式、jpg截图复制到你项目的根目录或自定义路径中
  • video-player.xml复制到项目根目录下。
  • 在主xml中的scene外嵌入xml
  • 这里是热点图标点击打开平面视频,因此在某个scene里放入下面的hotspot代码
  • 核心代码是
    该动作共有三个参数,第一个参数是视频路径、第二个是图片路径、第三个是视频音量设置。

 

插入网站在线视频

插入youtube视频的案例在你电脑的路径\krpano-1.19-pr13\viewer\examples\inline-video-players\

除了youtube同时支持HTML5和flash外,下面的仅支持HTML5。flash的可自行添加。

步骤

  • qq-player.xml复制到项目根目录下。(qq-layer.xml是在youtube-layer.xml的基础上修改的,针对需要翻墙youtube的情况)
  • qq-player.xml 文件下载链接:http://pan.baidu.com/s/1qYhZ6lI 密码:22nl
  • 在主xml中的scene外嵌入xml
  • 腾讯视频
    • 例如播放 https://v.qq.com/x/cover/an00pxl1qsrxmi4/h05527g1gn6.html 的腾讯视频  我们要将.html和最后一个斜杠之间的红色数字记下。
    • 执行
      h05527g1gn6是代表腾讯视频的地址索引,qq代表的是播放腾讯视频。
  • 优酷视频
    • 例如播放 http://v.youku.com/v_show/id_XMzAzNjUwODIzMg==.html 的腾讯视频  我们要将==和id_之间的红色数字记下。
    • 执行
      XMzAzNjUwODIzMg是代表优酷视频的地址索引,youku代表的是播放优酷视频。
  • 爱奇艺视频
    • 爱奇艺视频需要进入到页面的分享中获取通用代码,如下图
    • 找到上面代码中vid=&accessToken之间的部分进行复制,然后把复制部分中的&替换为&
    • 执行
      aaacff68bf535fcaca1565b3570b203b&tvId=780852100是爱奇艺视频的视频序号,iqiyi代表播放的是爱奇艺视频。
  • bilibili视频
    • bilibili视频需要打开播放页面的源代码,搜索cid,如
    • 将双引号里的都复制,然后把复制部分中的&替换为&
    • 执行
      cid=24008038&aid=14730241&pre_ad=0是bilibili视频的检索序号,bilibili代表播放的是bilibili视频。
  • 搜狐视频
    • 搜狐视频需要进入到页面的分享中获取通用代码,如下图
    • 找到上面代码中#后面的部分进行复制
    • 执行
      92934747_9370612_0_9001_0是搜狐视频的视频序号,sohu代表播放的是爱奇艺视频。
  • 芒果tv
    • 例如 视频地址 为 http://www.mgtv.com/b/316387/4112675.html 找到 html和斜杠之间的红色数字
    • 执行
      4112675是芒果tv的视频序号,mgtv代表播放的是芒果tv的视频。

 

插入热点视频

插入平面视频的案例在你电脑的路径\krpano-1.19-pr13\viewer\examples\videohotspot\

步骤

  • 将视频文件的mp4格式、webm格式、jpg截图复制到你项目的根目录或自定义路径中
  • 相关代码如下
    可通过editor插件插入电视机视频或其它办法调整热点视频的坐标和空间位置。

 

为视频添加内嵌H5控制条

在视频插件中添加

如果是热点视频的话,同时将热点渲染设置为

例如

点击后播放视频

 

 

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.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插件得到几个关键属性,替换到上面的代码中,我们就得到了:

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

发表评论