Description

Displays a video player for a video asset or an online video from YouTube or Vimeo.

When using a video asset, playback can be controlled using HTML5 player controls or using actions. Double-click a video object to choose a video asset or display a player that allows to preview the video and generate a poster image from a video frame.

When using an online video, the YouTube or Vimeo player will be used, and an active Internet connection will be obviosuly required to play the video on the end user device.

Properties

Video object supports most of the Generic Object Properties, plus the ones listed below. To edit properties of a video object, select it and use the selection inspector at the right of your project window.

Video The video asset to be played, or URL of the YouTube or Vimeo video
Poster Image VIDEO ASSET ONLY An image asset to be displayed as video poster image before playback begins. Double-click the video object to display a player that can generate a poster image from a frame of the video asset. Tip: Though specifying a poster image is optional, we strongly advice to do it, since some browser/readers will display anything but the background color unless the video is playing, when no poster image is defined.
Playback Controls VIDEO ASSET + YOUTUBE Enable to display the HTML5 video player controls or disable to make the video playable only using actions. Please note that the playback controls displayed will vary basing on the browser / reader displaying the publication

Events

Video object triggers all Generic Events. To edit event handlers for a video object, select it and use the Interactivity Panel on the right side of the project window.

Actions

Video object can be used as target of most Generic Actions, plus some specific action to control playback.

Play Video

Plays a video object on the page or fullscreen. If playback was previously stopped, it will restart where it left off, unless Play From Beginning property is enabled.

Properties
Target Video object to play
Play Fullscreen Enable to start playback of the video in fullscreen mode, disable to play inline on the page
Play From Beginning If enabled, the video object will be always played from the beginning, even if playback was previously stopped
Wait for Completion If enabled, PubCoder will wait for the video to complete playback before executing the next action in the same action list, otherwise it will execute the next action immediately Tip: Pausing the video externally, e.g. by using a Stop Video action or playback controls, will mark the action as completed anyway

Play/Pause Video

Plays a paused video object, resuming from where the playback was stopped, or pauses playback if that object is already playing.

Properties
Target Video object to play/pause

Seek Video

Moves the playback time to a certain time. Especially useful for long videos, for example you can make various Buttons to seek to the various chapters in a video.

Properties
Target Video object to seek
Time Define the position, in seconds, to seek the video to

Set Video Volume

Changes the playback volume of a video object

Properties
Target Video object to set volume to
Volume Decimal number from 0 (mute) to 1 (maximum volume) indicating the video volume relative to the global device volume

Stop Video

Stops playback of a playing video object

Properties
Target Video object to be stopped

Code

Here’s an example of how a video object using a video asset, with playback controls and a poster image, is exported on the html page:

<video id="obj5" class="SCPageObject SCMovie" poster="../images/generated-image.jpg" controls="controls" preload="none">
  <source src="../video/pubcoder-intro.mp4" type="video/mp4" />
  <img class="SCVideoFallback" style="left: 0px; top: 0px;" width="640" height="360" src="../images/generated-image.jpg" />
</video>

The image is a fallback that will be displayed only if the browser / reader does not actually support HTML5 video.

Here’s an example of how video objects using an online Vimeo or YouTybe video (respectively) are exported in the html page:

<div xmlns="http://www.w3.org/1999/xhtml" id="obj27" class="SCPageObject SCMovie">
  <iframe src="https://player.vimeo.com/video/225280686?api=1&amp;title=0&amp;byline=0&amp;portrait=0" ...></iframe>
</div>
<div id="obj25" class="SCPageObject SCMovie">
  <iframe src="https://www.youtube.com/embed/v16SI6xVsOU?rel=0&amp;amp;controls=1&amp;amp;showinfo=0" ...></iframe>
</div>