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

更新于 2020.3.5 krpano 1.20.5

官方下载包路径

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

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

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

 

在线演示

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

热点视频

 

插入平面视频

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

步骤

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

 

插入网站在线视频

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

如果你需要插入youtube视频,在主xml的scene外嵌入代码

在需要打开youtube视频的时候,在适当的位置放入

QfCKecmPzKU则youtube地址中https://www.youtube.com/watch?v=QfCKecmPzKU的等号后面的部分。

除了youtube同时支持HTML5和flash外,下面国内视频网站的仅支持HTML5,

步骤

  • qq-player.xml复制到项目根目录下。(qq-layer.xml是在youtube-layer.xml的基础上修改的,针对需要播放国内视频网站的情况)
  • qq-player.xml 文件下载  链接:https://pan.baidu.com/s/1SzimCW48M2t92D_TQlR_0g
    提取码:teb7
  • 在主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之间的部分进行复制,然后把复制部分中的&替换为&
    • 执行
      4889b7b5f29fe5496b02b7f9aeb6f13c&tvId=13737344200是爱奇艺视频的视频序号,iqiyi代表播放的是爱奇艺视频。可自动播放。
  • bilibili视频
    • bilibili视频在播放页面点击分享
    • 复制嵌入代码,得到
      第一个问号下一个双引号的部分全部复制 aid=69056133&cid=119681464&page=1

      把复制部分中的&替换为&

    • 执行

      aid=69056133&cid=119681464&page=1是bilibili视频的检索序号,bilibili代表播放的是bilibili视频。暂不能自动播放。

  • 搜狐视频
    • 搜狐视频需要进入到页面的分享中获取通用代码,如下图
    • 找到上面代码中bid=与&autoplay之间的数字182257335进行复制
    • 执行

      182257335是搜狐视频的视频序号,sohu代表播放的是爱奇艺视频。可自动播放。

  • 芒果tv(目前不支持HTML5)
    • 例如 视频地址 为https://www.mgtv.com/l/100027387/6474825.html?fpa=18759&fpos=1 找到 html和斜杠之间的红色数字
    • 执行

      4112675是芒果tv的视频序号,mgtv代表播放的是芒果tv的视频。

  • pp视频(目前不支持HTML5)
    • pp视频需要进入到页面的分享中获取通用代码,如下图
    • 找到上面代码中#id的部分 31155834
    • 执行

      31155834是pp视频的视频序号,pp代表播放的是pp视频。可自动播放。

 

插入热点视频

插入热点视频的案例在你电脑的路径\krpano-1.20.5\viewer\examples\videohotspot\

步骤

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

 

为视频添加内嵌H5控制条

在视频插件中添加

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

例如

点击后播放视频

 

微信等国产手机浏览器的播放问题

如果使用上述的方式播放平面视频和热点视频,krpano1.20之后在最新微信中可正常播放,在其它国产浏览器可能播放不了

 

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

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

发表评论