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.
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|
|Autoplay||Enable to play video automatically on page load (may not work HTML5 export until the Muted option is also enabled)|
|Muted||Enable to mute the video|
|Loop||Enable to loop the video indefinitely|
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.
Video object can be used as target of most Generic Actions, plus some specific action to control playback.
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.
|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 Video ➜ selfin the
Loadevent of the video object to make it play automatically when the page loads
Plays a paused video object, resuming from where the playback was stopped, or pauses playback if that object is already playing.
|Target||Video object to play/pause|
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.
|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
|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|
Stops playback of a playing video object
|Target||Video object to be stopped|
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&title=0&byline=0&portrait=0" ...></iframe> </div>
<div id="obj25" class="SCPageObject SCMovie"> <iframe src="https://www.youtube.com/embed/v16SI6xVsOU?rel=0&amp;controls=1&amp;showinfo=0" ...></iframe> </div>