Krpano Videoplayer插件使用指南

• Videoplayer插件可以用来播放视频在krpano...
  • 作为普通的平面视频通过<layer>元素,
  • 或通过<hotspot>元素作为平面或3d扭曲的热点,
  • 或者在通过<image>元素引用视频时作为pano.

主题

• 语法
• 插件属性
• 插件的事件
• 插件状态属性
• 插件操作
• 开源插件

语法

作为屏幕上的平面图层元素:

<layer name="video"
       url="videoplayer.js"
       videourl="video.m4v|video.webm"
       posterurl="videoposter.jpg"
       align="center" x="0" y="0"
       pausedonstart="false"
       loop="false"
       volume="1.0"
       onvideoready=""
       onvideoplay=""
       onvideopaused=""
       onvideocomplete=""
       onerror=""
       />

作为3d变形热点:

<hotspot name="video"
         url="videoplayer.js"
         videourl="video.m4v|video.webm"
         posterurl="videoposter.jpg"
         ath="0.0" atv="0.0"
         distorted="true"
         scale="1.0" 
         rx="0.0" 
         ry="0.0" 
         rz="0.0" 
         pausedonstart="false"
         loop="false"
         volume="1.0"
         onvideoready=""
         onvideoplay=""
         onvideopaused=""
         onvideocomplete=""
         onerror=""
         />

作为全景图像:

<plugin name="video"
        url="videoplayer.js"
        videourl="video.m4v|video.webm"
        posterurl="videoposter.jpg"
        panovideo="true"
        pausedonstart="false"
        loop="false"
        volume="1.0"
        onvideoready=""
        onvideoplay=""
        onvideopaused=""
        onvideocomplete=""
        onerror=""
        />

<image hfov="360" vfov="180">
   <sphere url="plugin:video" />
</image>

插件属性

Attribute name	Type	Default value
videourl	String
视频文件的url。 浏览器可以有不同级别的视频格式/编解码器支持。为了使视频可以在所有系统的所有浏览器中播放，有必要以几种格式提供视频。 支持的视频格式有: MPEG4 / H264 (.mp4, .m4v, .mov) - Firefox (Windows 7+) / Safari / Chrome / IE / iOS / Android WebM (.webm) - Firefox / Chrome Ogg Theora (.ogg, .ogv) - Firefox / Chrome HTTP Live Streaming (.m3u, .m3u8) - iOS, Mac Safari only - and only for <layer> usage 要提供多种视频格式并让插件自动选择合适的视频格式，请一次为所有视频文件设置路径，并使用pipe |字符将它们分开。 当支持给定视频的几种格式时，插件将按照从左到右的顺序选择视频。例如支持MP4和WebM，最好使用MP4，则写入videourl="video.mp4|video.webm"。 可以通过preferredformat设置定义自定义格式首选项。 通过提供至少一个基准mp4和一个WebM视频，它应该可以覆盖几乎所有的系统。 还可以考虑使用设备检查属性来为不同的设备指定不同的视频文件。 一旦视频被加载，videourl属性的值将被加载的视频文件的url所取代。 HTML5移动笔记——大多数移动设备都支持MP4格式，但MP4配置文件级别的支持可能取决于设备及其操作系统版本。
Attribute name	Type	Default value
posterurl	String
这是一个图像的url(通常是第一个视频帧的截图)，在视频加载并准备播放之前，应该显示该图像。 强烈建议添加海报图像! 海报图像需要与视频本身具有相同的像素大小!
Attribute name	Type	Default value
panovideo	Boolean	false
视频是否应该作为全景视频使用? 此设置为“稍后”(例如在另一个场景中)使用的全景视频准备视频。 如果没有这个设置，视频将作为普通的2d图层/插件元素可见，直到视频被用作pano。
Attribute name	Type	Default value
pausedonstart	Boolean	false
如果视频在开始时暂停。 注意-在许多较新的浏览器版本中，默认情况下不允许自动播放! 玩家可能需要点击或触摸等用户交互才能开始游戏。Krpano将自动等待第一次点击/触摸屏幕上的任何地方开始播放视频，当这种情况下。 注意-通过静音视频，可以在不允许的情况下自动播放。
Attribute name	Type	Default value
loop	Boolean	false
视频是否在播放结束时循环或停止。
Attribute name	Type	Default value
volume	Number	1.0
视频声音音量(0.0 - 1.0) 注意-在iOS上控制视频的音量是不可能的!
Attribute name  (HTML5 only)	Type	Default value
muted	Boolean	false
将视频静音。 注意-当静音启用(设置为true)时，可能会自动播放(不需要点击或触摸)(取决于浏览器和设备)。
Attribute name	Type	Default value
playbackrate	Number	1.0
设置视频播放速率/速度(HTML5-only)。 例子: 1.0是正常速度 0.5为半速(较慢) 2.0是双倍速度(更快) 负值的反向播放目前不支持或可能在任何浏览器中工作。 HTML5 文档: W3 Schools Mozilla MDN
Attribute name	Type	Default value
preferredformat	String
设置在多种格式可用时使用的首选视频文件格式。 当没有设置时，可用的视频格式将从左到右选择。 这可以用来为特定的浏览器选择特定的格式。例如-在Firefox设置中使用webm:         preferredformat.firefox = " webm "
Attribute name	Type	Default value
autopause autoresume	Boolean Boolean	true false
autopause - 自动暂停视频时，浏览器选项卡/窗口被隐藏。 autoresume - 自动恢复视频时，它被暂停之前隐藏浏览器选项卡/窗口。
Attribute name	Type	Default value
html5controls	Boolean	false
当启用(设置为true)时，显示浏览器内置的视频控件。 还看到：HTML5 Video - controls.
Attribute name	Type	Default value
html5preload	String	"auto"
设置HTML5 Video预加载设置。 还看到： HTML5 Video - preload.
Attribute name	Type	Default value
playsinline	Boolean	true
在移动设备(iPhone, iPad, Android)上播放视频“内联”krpano。 当禁用时，浏览器可能最终会在自己的内部视频播放器中播放视频，并内联/嵌入到 webpage/pano中。
Attribute name	Type	Default value
userinteractionworkarounds	Boolean	true
启用自动回放解决方案。 在许多较新的浏览器版本中，默认情况下不允许自动播放!玩家可能需要点击或触摸等用户交互才能开始游戏。当启用krpano将自动等待第一次点击/触摸屏幕上的任何地方开始播放视频时，这种情况下。

Plugin Events

Attribute name	Type	Default value
onvideoready	Action Event
此事件将在视频准备播放时调用。 此时，视频帧大小和播放长度(总时间)是已知的。 如果在xml中没有设置插件大小(宽度，高度)，那么插件将调整自己的大小为视频的像素大小。
Attribute name	Type	Default value
onvideoplay	Action Event
此事件将在视频开始播放时调用。
Attribute name	Type	Default value
onvideopaused	Action Event
这个事件将在视频暂停时被调用(通过pausedonstart=true在启动时暂停将被忽略)。 HTML5注释——在HTML5中，这个事件也会在视频结束时被调用，就在onvideocomplete事件之前。
Attribute name	Type	Default value
onvideocomplete	Action Event
此事件将在视频完全播放时调用。 只有当loop设置为“false”时才会发生这种情况。
Attribute name	Type	Default value
onerror	Action Event
当加载或播放过程中出现错误时，将调用此事件。 错误消息本身将被设置在videoerror属性中。 当设置此事件时，不会出现默认的错误消息。
Attribute name	Type	Default value
onneeduserinteraction	Action Event
当需要用户的触摸来播放视频时，将调用此事件。 这对于许多手机和平板电脑浏览器来说都是必要的。 当启用userinteractionworkaround设置时，视频播放器插件将自动等待屏幕上任何地方的下一个触摸开始播放视频。 onneeduserinteraction事件可用于显示播放按钮或通知用户触摸屏幕以播放视频。 一旦用户触摸屏幕，ongotuserinteraction事件将被发送。 在此事件中，needuserinteraction状态属性将被设置为true。
Attribute name	Type	Default value
ongotuserinteraction	Action Event
这个事件将在用户触摸屏幕开始播放视频时被调用。 ongotuserinteraction事件可用于隐藏播放按钮或先前在onneeduserinteraction事件上显示的用户信息。 在此事件中，needuserinteraction状态属性将被设置为false。

Plugin State Attributes (read only)

Attribute name	Type	Initial value
isvideoready ispaused isseeking iscomplete isautopaused needuserinteraction	Boolean Boolean Boolean Boolean Boolean Boolean	false false false false false false
动态检查视频播放状态的变量: isvideoready - 检查视频是否可以播放。 ispaused - 检查视频当前是否暂停。 isseeking - 检查视频是否正在搜索。 iscomplete - 检查视频是否已经结束。 isautopaused - 通过隐藏浏览器选项卡/窗口检查视频是否已暂停 (see autopause and autoresume). needuserinteraction - 播放视频需要用户触摸 (see onneeduserinteraction and ongotuserinteraction).
Attribute name	Type	Initial value
videoerror	String
最后一条错误消息。 将仅在使用onerror事件进行自定义错误处理时设置。
Attribute name	Type	Initial value
time totaltime	Number Number	0.0 0.0
播放时间信息: time - 当前视频播放位置(以秒为单位)。 totaltime - 视频的长度/总时间，以秒为单位。
Attribute name	Type	Initial value
videowidth videoheight	int int	0 0
源视频帧的像素大小。 在onvideoredy事件之后可用。
Attribute name	Type	Initial value
loadedbytes totalbytes	int int	0 0
Loading information: loadedbytes - 视频文件当前加载的字节数。 totalbytes - 视频文件的总字节数。 HTML5注意事项-在HTML5中，不可能确定实际字节大小。因此，在HTML5中，这些值表示当前缓冲的数据(以秒为单位)乘以1048576 (=1024*1024，=1 MB)。

插件操作

playvideo(url, posterurl, pausedonstart, starttime)

• 打开一个新的视频url并开始播放它。
• 当前正在播放的视频将被停止并关闭。

Parameters:

• url
  • 视频文件的url。
  • 与视频视频设置相同。
• posterurl (可选)
  • 海报图片的url。
  • 与posterurl设置相同。
  • 强烈建议添加海报图像!
• pausedonstart (可选)
  • 如果视频在开始时暂停。
  • 与pausedonstart设置相同。
• starttime (可选)
  • 设置视频开始时间。
  • 这是通过在视频准备好后直接查找给定时间来实现的。
  • 仅支持HTML5。

play()

• 播放或恢复暂停的视频。

pause()

• 暂停视频。
• 可以通过调用play()操作来恢复视频。

togglepause()

• 暂停或恢复视频取决于当前的播放状态。

stop()

• 停止视频⇒移动到第一帧并在那里暂停。
• 可以通过调用play()操作来恢复视频。

seek(time)

• 寻求给定的时间/播放位置。
• 根据视频编码(编解码器和关键帧间隔)，视频将只在给定位置的“附近”寻找。

参数:

• time
  • 预期的播放位置。
  • 要么在几秒钟内。
  • 或者作为百分比值(0% - 100%)。

开源插件

        如果你是一个Javascript开发者，想要直接使用HTML5视频对象，例如尝试HTML5视频流技术，如DASH或HLS，这里有一个开源版本的krpano HTML5视频播放器插件。
        插件源代码本身被简化了，只提供了基本的接口(没有状态管理，没有iPhone支持，没有海报支持)，但它展示了krpano插件接口和krpano视频内部是如何工作的，以及如何使用它们。

文件:

• videoplayer_basic_source.js (view) - download
• Full Example (view) - downloadVideoplayerdownload