close panorama

Videoplayer Plugin videoplayer.swf / videoplayer.js Version 1.16
for Flash and HTML5
Select Version:

Syntax

As flat plugin element on the screen:
<plugin name="video1"
        url="videoplayer.swf"
        alturl="videoplayer.js"
        videourl="video.m4v|video.webm|video.ogv"
        posterurl="videoposter.jpg"
        align="center" x="0" y="0"
        pausedonstart="false"
        loop="false"
        volume="1.0"
        buffertime="0.1"
        ignoremetadata="false"
        updateeveryframe="true"
        onvideoready=""
        onvideopaused=""
        onvideocomplete=""
        onunsupported=""
        />

As 3D distorted hotspot element in the pano:
<hotspot name="video1"
         url="videoplayer.swf"
         alturl="videoplayer.js"
         videourl="video.m4v|video.webm|video.ogv"
         posterurl="videoposter.jpg"
         ath="0.0" atv="0.0"
         distorted="true"
         scale="1.0" 
         rx="0.0" 
         ry="0.0" 
         rz="0.0" 
         volume="1.0"
         directionalsound="true"
         range="90.0"
         rangefalloff="1.0"
         outofrangevolume="0.0"
         onvideoready=""
         onvideopaused=""
         onvideocomplete=""
         onunsupported=""
         />

Plugin Attributes

  • videourl
    • The url of the video file.
      Note - the video url must be always relative to the main krpano swf file!
    • The Flashplayer and the HTML5 Browsers are having a different level of video formats/codecs support.
      Typical video formats are:
      • MPEG4/H264 (.mp4, .m4v) - Flashplayer / Safari / Chrome / IE
      • Flash Video (.flv, .f4v) - Flashplayer
      • WebM - Chrome / Firefox
      • Ogg Theora (.ogg, .ogv) - Firefox
      To provide several video formats and let the plugin automatically choose the appropriate one, set the paths to all video files at once and separate them by a pipe | character.
    • Transparent videos with alpha-channel are possible (Flash and VP6 codec only).
  • posterurl (optionally, HTML5 only)
    • This is the url to an image that should be shown until the video is started to play.
    • For videos on iPhone and iPad using this setting is highly recommended - see the HTML5 / iOS (iPhone/iPad) notes for more details.
    • The size of this image will be used as size of video.
  • pausedonstart   (optionally)
    • Should the video be paused at the start.
    • true or false, default=false
    • Note - on iPhone / iPad the video will be always paused on start!
  • loop   (optionally)
    • Should the video loop or stop at end.
    • true or false, default=false
  • volume   (optionally, Flash only)
    • Volume of video sound.
    • 0.0 - 1.0, default=1.0
  • directionalsound   (optionally, Flash only)
    • Use directional 3D sound when the video is played as hotspot.
    • true or false, default=true
  • range   (optionally, Flash only)
    • Range of the directional sound, distance of the viewing look direction to the sound position, the sound volume will fall off withhin this distance from volume to outofrangevolume.
  • rangefalloff   (optionally, Flash only)
    • The 'falloff' factor, defines the volume falloff curve (e.g. ~0.01 to ~10.0), default=1.0.
  • outofrangevolume   (optionally, Flash only)
    • Out of range volume, default=0.0.
  • buffertime   (optionally, Flash only)
    • The time in seconds that the video should be preloaded/buffered before starting to play, default=0.1 (=Flashplayer default).
  • ignoremetadata   (optionally, Flash only)
    • The videoplayer uses the size information from the meta-data that was stored in the video file by default to determine the size/resolution of the video. But there are some videos and video-converter tools with wrong size information in the meta-data, which cause a distorted or wrong size. With that setting the that meta-data information can be ignored/skipped.
  • updateeveryframe   (optionally, Flash only)
    • An advanced setting for special performance optimizations - use with care!
    • It has only an effect when the video is played as distorted hotspot!
    • true or false, default=true
      The video frame will be only refreshed/updated when flash reports "there is a new frame", this reduces the cpu load but in situations where the Flashplayer has much work to do, this can cause frame skipping (e.g. while moving in the pano).

Plugin Attributes - Events

  • onvideoready   (optionally)
    • Will be called when the video is ready for playing.
    • That means there are all basic information about the video there, it's frame size and the length (totaltime).
  • onvideopaused   (optionally)
    • Will be called when the video will be paused (a pause through pausedonstart will be ignored).
    • Note - in the krpano HTML5 Viewer this event will be also called when the video has ended, just before the onvideocomplete event.
  • onvideocomplete   (optionally)
    • Will be called when the video was played completely.
    • Happens only when "loop" is set to "false".
  • onunsupported   (HTML5 only, optionally)
    • This event will be called when playing HTML5 videos is not supported by the browser.
    • When this event is not set and HTML5 video are not supported then a warning message will be shown in the krpano log.

Plugin Dynamic Read Only Attributes

  • isvideoready  
    • Check if the video is ready for playing.
    • true or false
  • ispaused  
    • Check if the video is currently paused.
    • true or false
  • iscomplete  
    • Check if the video has ended.
    • true or false
  • time  
    • The current video position in seconds.
  • totaltime  
    • The length / totaltime of the video in seconds.
  • loadedbytes   (Flash only)
    • The currently loaded bytes of the video file.
  • totalbytes   (Flash only)
    • The total bytes of the video file.

Plugin Actions

Local actions of the Videoplayer plugin object.
  • playvideo(url)
    • Opens a new video stream and starts playing it.
    • A currently playing video will be stopped and closed in this case.
    • Note - the video url must be always relative to the main krpano swf file!
  • closevideo()
    • Stops the video and closes the video stream.
    • Resuming or playing again ist not possible.
  • stop()
    • Stops the video and moves to the first frame and pauses there.
    • The video can be resumed via play() or resume()
  • play()
    • Resumes a paused or stopped video.
  • pause()
    • Pauses the video at the current frame.
    • The video can be resumed via play() or resume().
  • resume()
    • Resumes a paused or stopped video.
  • togglepause()
    • Pauses OR resumes the video.
  • seek(time)
    • Seek to the given time position in seconds.

HTML5 and iOS (iPhone / iPad) Notes

The technically possibilities with HTML5 are not same as with the Flashplayer. So when using the krpano HTML5 viewer not all features of the videoplayer plugin are supported.
Some HTML5 browsers doesn't support MPEG4 video files. There different video formats like OGG or WebM need to be used. To provide several video formats and let the plugin automatically choose the appropriate one, set the paths to all video files at once and separate them by a pipe | character.
Example:
videourl="video.m4v|video.webm|video.ogv"

iOS (iPhone / iPad) Notes

There are additional system limitations on iOS devices (iPhone and iPad):
  • No Autoplay / Autostart!
    A video can't start to play automatically! The user needs to touch / click the video to start loading and playing it.
  • No Video preview and no size / dimension information at startup.
    The video start to load first after a click or touch on the video element, and without loading there are is notthing to show and no information about the pixel size of the video. And without known size it's not possible to show/place the video on the screen or in the pano.
    There three solutions for that problem:
    1. Define the size (width / height) manually in the xml.
      The video image itself will be black.
    2. Use an posterurl image.
      The size of this image will be also used for the size of the video.
      This is the recommended solution!
    3. Without poster image and without manually size the default size of 320x240 pixels will be used.
  • No volume change!
    Changing the volume of a video is not allowed on iOS devices.
  • Only Fullscreen-Playing Video on the iPhone
    On the iPhone the Video will only play in Fullscreen. When starting to play the video will switch to Fullscreen and when the video will be stopped it will switch back to normal view.
  • No Multiple Simultaneous Audio or Video Streams
    Currently, all iOS devices are limited to playback only one single audio or video stream at one time. Playing more than one video - side by side, partly overlapping, or completely overlaid - is not currently supported on iOS devices.
  • iOS Versions
    There might be problems with the video-support on older iOS versions like iOS 3.1.*, so if possible always use the latest available iOS version.

More Information:
Apple Documentation about iOS Specific Considerations

Examples

Video as Distorted-Hotspot
CLICK TO VIEW THE EXAMPLE