Class: VideoWidget

PR. VideoWidget

Creates a video element and manipulates it to produce video.

In addition to the HTML parameters on the element that specifies a video widget the widget can also be specified with a poster image and a play button. The poster image is displayed before the video starts playing. These are recommended additions but not strictly required.

HTML Parameters

The following parameters are required

data-widget="VIDEO" Required
The identifier for the widget type.
data-src="{{string}}" Required
The source file to use. Can be local ('../assets/video.mp4') or web-based ('http://somewebsite.com/somevideo.mp4').

The following parameters are optional (defaults are listed between the braces).

id="{{id}}" Optional
It is usually preferable to include a unique ID but it is not strictly necessary.
data-loop="{{false}}" Optional
true || false. Specifies whether the video should loop.
data-controls="{{false}}" Optional
true || false. Specifies whether default controls are shown, if false then the video will need to be triggered by buttons on the page.
data-autoplay="{{false}}" Optional
true || false. Specifies whether the video plays as soon as the page becomes visible.
data-fullscreen-only="{{false}}" Optional
true || false. Specifies whether the video always plays in fullscreen mode.

Examples

Base Video Implementation

The following example shows the HTML specifying a Video Widget; poster and play button elements inside the widget div are recommended but not strictly required.

id Optional
A unique id for the HTML element.
class Optional
A class for the video widget.
data-widget="VIDEO" Required
Video Widget identifier.
data-src="{{src}}" Required
The video source.
<!-- Video Widget Example-->
<div
    id="uniqueid1"
    class="video"
    data-widget="VIDEO"
    data-src="../assets/vid.mp4">
    <!--Video Poster Image-->
    <img class="videoPoster" src="../assets/videoPoster.jpg">
    <!-- Video Play Button -->
    <img id="uniqueid2"
        class="videoPlayButton button"
        data-widget="BUTTON"
        data-action="PLAY_MEDIA"
        data-target="uniqueid1"
        src="../assets/videoplay.png" />
</div>
Video with on-page controls

If video controls are set to false then the video should be controlled via buttons on the page (this parameter is specified as optional because by default the video controls will be hidden so if the parameter is omitted this example will be the same). Note that the video can be controlled via native controls and on-page buttons.

id Required
A unique id for the HTML element.
data-widget="VIDEO" Required
Video Widget identifier.
data-src="{{src}}" Required
The video source.
data-controls="false" Optional
Ensures the native controls are hidden.
<!-- Video Widget -->
<div id="uniqueid1"
    data-widget="VIDEO"
    data-src="../assets/vid.mp4"
    data-controls="false" >
    <!-- Poster image would normally be used here -->
    <!-- Omitted for brevity -->
</div>

<!-- Play Button -->
<div id="uniqueid2" data-action="PLAY_MEDIA" data-widget="BUTTON" data-target="uniqueid1">
    <img class="icon" src="../assets/button.png"/><span class="label">Play</span>
</div>

<!-- Pause Button -->
<div id="uniqueid3" data-action="PAUSE_MEDIA" data-widget="BUTTON" data-target="uniqueid1">
    <img class="icon" src="../assets/button.png"/><span class="label">Pause</span>
</div>

<!-- Toggle Button -->
<div id="uniqueid4" data-action="TOGGLE_MEDIA" data-widget="BUTTON" data-target="uniqueid1">
    <img class="icon" src="../assets/button.png"/><span class="label">Toggle</span>
</div>
Author:
  • AppStudio Widgets
Source:
  • widgets/VideoWidget.js, line 2

Extends

  • PR.BaseWidget

Methods

addInteractionEvents_( )

Add touch/mouse event handlers when the widget is on screen.

Source:
  • widgets/VideoWidget.js, line 416

autostopVideo( )

Autostops the video - does not perform any checks, just stops the video

Source:
  • widgets/VideoWidget.js, line 653

hidePlay_( )

Hide the play button

Source:
  • widgets/VideoWidget.js, line 1004

initialize( )

Acts like a constructor, this function is triggered by default when you create an object.
Creates a video element

Source:
  • widgets/VideoWidget.js, line 176

mediaElementDimensions( )

Update Dimensions of the MediaElement by getting the parent widget size

Source:
  • widgets/VideoWidget.js, line 1063

mediaElementRequirements( )

Check all the requirements for Media Element are available below loading

Source:
  • widgets/VideoWidget.js, line 1051

nativeVideoAutoPlay( )

Autoplays the video if it should be autoplaying

Source:
  • widgets/VideoWidget.js, line 630

nativeVideoDestroy( )

Destroys the video element

Source:
  • widgets/VideoWidget.js, line 661

nativeVideoPause( obj )

Pause the video

Parameters:
Name Type Description
obj HTMLElement

The object firing the event
Source:
  • widgets/VideoWidget.js, line 531

nativeVideoPlay( )

Play the video

Source:
  • widgets/VideoWidget.js, line 479

nativeVideoPlayBefore( obj )

Remove the play button as soon as clicked and then processes the nativeVideoPlay button
The defer is required so the play button is defo removed.

Parameters:
Name Type Description
obj Object

The object firing the event
Source:
  • widgets/VideoWidget.js, line 454

removeInteractionEvents_( )

Remove touch/mouse event handlers when the widget is off screen.

Source:
  • widgets/VideoWidget.js, line 424

reportPause( )

Sends a report event to notifyApp

Source:
  • widgets/VideoWidget.js, line 361

reportPlay( )

Sends a report event to notifyApp

Source:
  • widgets/VideoWidget.js, line 354
Top