更新于 2020.11.19 krpano 1.20.9

官方下载包路径

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

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

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

 

在线演示

平面视频和网站视频（youtube需翻墙）

热点视频

 

插入平面视频

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

步骤

• 将视频文件的mp4格式、webm格式、jpg截图复制到你项目的根目录或自定义路径中
• 将video-player.xml复制到项目根目录下。
• 在主xml中的scene外嵌入xml
  
  XHTML

  <include url="video-player.xml" />

  1	<include url="video-player.xml" />

• 这里是热点图标点击打开平面视频，因此在某个scene里放入下面的hotspot代码
  
  XHTML

  <hotspot name="videospot" url="media_playback_start.png" scale="0.5" zoom="true" ath="-26.5" atv="0" onclick="looktohotspot(get(name),90); videoplayer_open('%CURRENTXML%/cats.mp4|%CURRENTXML%/cats.webm', '%CURRENTXML%/cats-poster.jpg', 0.5);" />

  1 2 3 4 5 6 7

  <hotspot name="videospot" url="media_playback_start.png" scale="0.5" zoom="true" ath="-26.5" atv="0" onclick="looktohotspot(get(name),90); videoplayer_open('%CURRENTXML%/cats.mp4|%CURRENTXML%/cats.webm', '%CURRENTXML%/cats-poster.jpg', 0.5);" />

• 核心代码是
  
  XHTML

  videoplayer_open('%CURRENTXML%/cats.mp4|%CURRENTXML%/cats.webm', '%CURRENTXML%/cats-poster.jpg', 0.5);

  1	videoplayer_open('%CURRENTXML%/cats.mp4|%CURRENTXML%/cats.webm', '%CURRENTXML%/cats-poster.jpg', 0.5);

  该动作共有三个参数，第一个参数是视频路径、第二个是图片路径（视频播放之前显示的图片）、第三个是视频音量设置。

 

插入网站在线视频

插入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/1q8Go4O816ARWfHLWOEKvJg
  提取码：fku6
• 在主xml中的scene外嵌入xml
  
  XHTML

  <include url="qq-player.xml" />

  1	<include url="qq-player.xml" />

• 腾讯视频
  • 例如播放 https://v.qq.com/x/cover/an00pxl1qsrxmi4/h05527g1gn6.html 的腾讯视频  我们要将.html和最后一个斜杠之间的红色数字记下。
  • 执行
    
    XHTML

    qqplayer_open('h05527g1gn6',qq);

    1	qqplayer_open('h05527g1gn6',qq);

    h05527g1gn6是代表腾讯视频的地址索引，qq代表的是播放腾讯视频。可自动播放。
• 优酷视频
  • 例如播放 http://v.youku.com/v_show/id_XMzAzNjUwODIzMg==.html 的优酷视频  我们要将==和id_之间的红色数字记下。
  • 执行
    
    XHTML

    qqplayer_open('XMzAzNjUwODIzMg',youku);

    1	qqplayer_open('XMzAzNjUwODIzMg',youku);

    XMzAzNjUwODIzMg是代表优酷视频的地址索引，youku代表的是播放优酷视频。暂不能自动播放。
• 爱奇艺视频（2020.12.10更新 方法失效）
  • 爱奇艺视频需要进入到页面的分享中获取通用代码，如下图
  • 
  • XHTML

    <iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=4889b7b5f29fe5496b02b7f9aeb6f13c&tvId=13737344200&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="100%" height="100%"></iframe>

    1

    <iframe src="http://open.iqiyi.com/developer/player_js/coopPlayerIndex.html?vid=4889b7b5f29fe5496b02b7f9aeb6f13c&tvId=13737344200&accessToken=2.f22860a2479ad60d8da7697274de9346&appKey=3955c3425820435e86d0f4cdfe56f5e7&appId=1368&height=100%&width=100%" frameborder="0" allowfullscreen="true" width="100%" height="100%"></iframe>

  • 找到上面代码中vid=与&accessToken之间的部分进行复制，然后把复制部分中的&替换为&amp;
  • 执行
    
    XHTML

    qqplayer_open('4889b7b5f29fe5496b02b7f9aeb6f13c&amp;tvId=13737344200',iqiyi);

    1	qqplayer_open('4889b7b5f29fe5496b02b7f9aeb6f13c&tvId=13737344200',iqiyi);

    4889b7b5f29fe5496b02b7f9aeb6f13c&amp;tvId=13737344200是爱奇艺视频的视频序号，iqiyi代表播放的是爱奇艺视频。可自动播放。
• bilibili视频
  • bilibili视频在播放页面点击分享
  • 
  • 复制嵌入代码，得到
    
    XHTML

    <iframe src="//player.bilibili.com/player.html?aid=69056133&cid=119681464&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

    1	<iframe src="//player.bilibili.com/player.html?aid=69056133&cid=119681464&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

    把第一个问号到下一个双引号的部分全部复制 aid=69056133&cid=119681464&page=1

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

  • 执行
    XHTML

    qqplayer_open('aid=69056133&amp;cid=119681464&amp;page=1',bilibili);

    1	qqplayer_open('aid=69056133&cid=119681464&page=1',bilibili);

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

• 搜狐视频
  • 搜狐视频需要进入到页面的分享中获取通用代码，如下图
  • 

  • XHTML

    <iframe frameborder="0" src="https://tv.sohu.com/s/sohuplayer/iplay.html?bid=216941212&autoplay=true&disablePlaylist=true" allowFullScreen="true" scrolling="no"></iframe>

    1	<iframe frameborder="0" src="https://tv.sohu.com/s/sohuplayer/iplay.html?bid=216941212&autoplay=true&disablePlaylist=true" allowFullScreen="true" scrolling="no"></iframe>

  • 找到上面代码中bid=与&autoplay之间的数字216941212进行复制
  • 执行
    XHTML

    qqplayer_open('216941212',sohu);

    1	qqplayer_open('216941212',sohu);

    216941212是搜狐视频的视频序号，sohu代表播放的是搜狐视频。可自动播放。

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

    qqplayer_open('6474825',mgtv);

    1	qqplayer_open('6474825',mgtv);

    6474825是芒果tv的视频序号，mgtv代表播放的是芒果tv的视频。

• pp视频
  • pp视频需要进入到页面的分享中获取通用代码，如下图
  • 

  • XHTML

    <iframe src="//player.pptv.com/iframe/index.html#id=31155834&ctx=o%3Dv_share" allowtransparency="true" width="640" height="400" scrolling="no" frameborder="0" ></iframe>

    1	<iframe src="//player.pptv.com/iframe/index.html#id=31155834&ctx=o%3Dv_share" allowtransparency="true" width="640" height="400" scrolling="no" frameborder="0" ></iframe>

  • 找到上面代码中#id的部分 31155834
  • 执行
    XHTML

    qqplayer_open('31155834',pp);

    1	qqplayer_open('31155834',pp);

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

 

插入热点视频

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

步骤

• 将视频文件的mp4格式、webm格式、jpg截图复制到你项目的根目录或自定义路径中
• 相关代码如下
  
  XHTML

  <hotspot name="videospot" url.html5="%SWFPATH%/plugins/videoplayer.js" url.flash="%SWFPATH%/plugins/videoplayer.swf" videourl="cats.mp4|cats.webm" posterurl="cats-poster.jpg" distorted="true" ath="0" atv="0" edge="center" scale="1.0" rx="0" ry="0" rz="0" ox="0" oy="0" loop="true" pausedonstart="true" onclick="togglepause();" />

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

  <hotspot name="videospot"          url.html5="%SWFPATH%/plugins/videoplayer.js"          url.flash="%SWFPATH%/plugins/videoplayer.swf"          videourl="cats.mp4|cats.webm"          posterurl="cats-poster.jpg"          distorted="true"          ath="0"          atv="0"          edge="center"          scale="1.0"          rx="0"          ry="0"          rz="0"          ox="0"          oy="0"          loop="true"          pausedonstart="true"          onclick="togglepause();"          />

  可通过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.js和videoplayer.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插件得到几个关键属性，替换到上面的代码中，我们就得到了：

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