Module: Video Player
Video player is the hosted video player available to all users of the Jetpack platform.
A quick tour of the Jetpack video player module.
1. Upload Your Assets
You should upload your video at the size (ratio) that you want to play the video at. Jetpack will dynamically transcode (create multiple formats) for html5 video and also encode for various bit-rates if you are using Streaming features in jetpack.
After you upload your video is also encoded for cross-device inline playback - such as autoplay on all mobile devices.
Prepping Video
You want to resize, crop and compress your video files in a program such as "Adobe Media Encoder" to approximately 1500 KBPS - depending on the dimensions. Then you will upload that output mp4 file into jetpack for best performance.
Example of encoded video file size / feedback.
You will see a few icons next to your video file after upload.
- re-encode for mobile, adjust mobile settings
- playback video
- get file size info (and preview links)
X - Delete Asset
2. Add Video Player to the stage & position
You can add the module directly to stage by clicking on the module in the list, or drag the module to the stage. Alternatively you can drag the video file directly to the stage and our system will identify the file as a video and pop up the window to name the newly created element.
At this point you can adjust the size and placement.
Simply drag the element around or type in values in the properties menu.
The link icon gives you the ability to either lock or unlock the aspect ratio of your video file as you adjust the values.
Properties Menu - Video
3. Associate Assets
You can associate assets by clicking the edit icon, and you can delete an asset from the association w/ the .
Main Video (Video 1): This is the main video for your player the variable name is Video 1
Poster Image: Thumbnail: Default state for thumbnail image
Poster Image RO: Rollover state for thumbnail image - appears on mouse over (optional)
End Image: if you would like to show a separate video after the video ends, you can add a separate image here.
End Image RO: Rollover for optional end-image
Add play icon to your thumbnail
You will want to add a play icon to your Poster Image and RO state.
4. Set the Behavior for Playback
On the left panel there are a number of options that appear in the Behavior Panel.
| Behavior | Options | Description |
|---|---|---|
| Autoplay Video | On Video Player display the video will start autoplaying. | |
| Start Muted | When video starts to play the sound will be off. | |
| Preload Video | Will pre-load the video file to be ready to play - warning can load files that aren't needed increasing the video load time. | |
| Video Controls | + None + Jetpack + Native | Options for the player controls. + None will display no controls + Jetpack has custom jetpack video player controls + Native shows the browser default controls. |
| Add Play/Pause Button | Adds an external Play/Pause button to the stage that will control the video player | |
| Add Mute/Unmute Button | Adds an external Mute/unmute button to the stage that will control the video player | |
| Add Replay Button | Adds an external replay button to the stage that will show when the video stops playback and allow user to replay the video. |
5. Adding additional Videos
You may add additional videos to the video player. These can be played sequentially or via specific actions. Highlight the player on the stage and then double-click a video asset in the asset panel, this will load the "Video Selector" window. There you can highlight the radio button next to the blank form field and type in a value - such as "Video 2" to add a second video into the video player variables.
video selector - add video
Updated almost 7 years ago