Media
114
Media
Inserting videos
WebPlus includes an optimized and highly-compatible video player from Flowplayer that lets you place individual videos and playlists directly on your page. You can use locally stored videos, uploaded videos on your web space or stream videos that exist elsewhere online. The player is versatile with a customizable appearance that gives viewers access to all the playback controls they'd expect, including watching videos full-screen.
Supported video formats
The primary supported video format is MP4 (.mp4). For extended compatibility, Flowplayer can supplement MP4 video with WebM
(.webm) and Ogg Video (.ogv) variants to use where MP4 is not supported. Flowplayer achieves excellent compatibility using the modern HTML5 standard to stream video without requiring a browser plug-in. On older browsers, where HTML5 is not supported, Flowplayer can fallback to using a Flash Player instead.
To insert a single video or playlist:
1. From the Quick Build tab (Media category), click
Player.
Video
2. Position the cursor where you want the video player to appear on the page, then simply click the mouse.
3. Choose the format for your video player:
• Use HTML5 and MP4 video
HTML5 offers the best compatibility playback with no browser plug-in or media playing software required.
- or -
Media
115
• Use Flash video
Choose the older Flash video player for Flash FLV video.
4. Add your video or videos to the player:
•
Add individual videos
Click the Add Files button to select the video file(s) to open.
- or -
•
Add all videos in a folder
Click the Add Folder button then navigate to a folder, select it and click OK to add its content.
- or -
• Add videos from your Assets
Click the Add Assets button then choose your preferred player format and click OK.
- or -
•
Add a video previously uploaded using Online Resource
Manager
Click Add URL and enable Add from Online Resources.
From the drop-down list, select the file.
- or -
• Add a video that is already online
Click Add URL and paste or type an online video URL (its full web address). This could be a video on another website.
5. (Optional) To remove a video from the playlist, check the box to the left of its thumbnail and click Delete.
6. (Optional) To adjust video order in a playlist, use the Up and Down buttons at the bottom of the dialog.
7. Click OK.
116
Media
See Inserting Videos in WebPlus Help for further information about player and playlist configuration.
The video player will be inserted where you clicked on your page and by default will be sized to match the first video in your playlist. You can
configure the player to adjust its size and appearance and also
customize playlist control buttons.
Online Resource Manager (Tools>Site Manager) can be used to scan your web space for video files, as well as manually upload videos to your web space. Any video file showing in the Online
Resource Manager will be available from the above Add from
Online Resources drop-down list.
To replace a video or edit the playlist
For an existing video player, you can go back to your video selection or playlist and edit it at any time.
To replace your video or edit the playlist:
1. Double-click the video object on your page.
2. Follow Steps 4 to 7 above to add videos, delete a video, reorder
the playlist, or add WebM and Ogg videos to supplement MP4 files.
Resize and configure the video player
Customize the size and basic appearance of the video player while setting it up or at any time afterwards.
To customize a video player:
1. Double-click an existing video on your page and click the
Settings tab.
Media
117
2. Choose a clip or predefined dimensions from the Size list on the General tab to set the player size. It's recommended that your player is sized to match your video (or smaller) rather than choosing a player size larger than your clips.
3. Choose a Skin to set the player's basic appearance.
4. Pick Colours for your progress bar and other elements.
5. Replace the Poster image—the preview shown in the player before your video or playlist begins.
6. Choose the Controls that you would like viewers to be able to use.
7. Set optional player Behaviour.
8. Enable or disable player Controls, such as the mute button, volume slider, and 'get embed code' button for sharing videos on other sites.
9. (Optional) Click Assets to save these configuration settings to your Assets for future use, where they can simply be dragged and dropped onto a video object from the Asset tab to load your preferred settings.
You can customize the player even further if you have multiple videos in a playlist by choosing new Playlist Buttons.
Adding and customizing playlist control buttons
When you have more than one video in a playlist viewers can use buttons to select another video from the sequence, or skip to the previous/next video in the list. You can also customize these buttons using ready-made artwork and buttons of your own design.
118
Media
Inserting YouTube videos
YouTube videos that are already published on the Internet can be included on your web page. YouTube videos themselves are not embedded in your site; instead, just the unique video ID is embedded as you place the YouTube video on your page.
To embed a single YouTube video:
1. Open the www.youtube.com website in your browser, and choose the YouTube video that you want to link to.
2. Copy the URL address for the video (or embed code). This contains an alphanumeric ID which uniquely identifies the video clip.
3. From the Quick Build tab (Media category), select
YouTube and click on your page.
4. In the dialog, ensure that Single Video is listed in the Choose a
video selection drop down. Paste the video URL, ID, or embed code into the input box.
Media
119
5. (Optional) To just play a snippet rather than the full video, specify start and end times (in seconds).
6. Click OK if you are happy to insert the video in a standard
YouTube player.
To swap your YouTube video for another, double-click an existing
YouTube video. From the dialog, paste a previously copied video URL into the input box. Consider embedding a YouTube playlist instead of a fixed choice of individual videos if you want to update video content on your site without using WebPlus.
Inserting Vimeo videos
Vimeo videos that are already published on the Internet can be included on your web page. Videos themselves are not embedded in your site; instead, just the unique Vimeo video ID is embedded as you place the
Vimeo video on your page.
To embed a Vimeo video:
1. Open the www.vimeo.com website in your browser, and choose the Vimeo video that you want to link to.
120
Media
2. Copy the URL address for the video (or its embed code). This contains an alphanumeric ID which uniquely identifies the video clip.
3. From the Quick Build tab (Media category), select
Vimeo and click on your page.
4. In the dialog, paste the video URL into the input box.
5. (Optional) Choose a custom colour for the player controls and any visible text to match or contrast with your site using the
Colour of Video Controls selector.
6. (Optional) Check/Uncheck the boxes to enable/disable
7. Click OK.
Inserting audio
WebPlus includes an audio player from jPlayer that uses HTML 5 for wide compatibility. On your page using the player, you can include a single audio file, or add multiple tracks to make your own playlist. You can use audio from your own computer, or stream audio that exists elsewhere online. The "skin" of your player can be customized to give it a different theme if you want to. Playback controls such as play, stop, next and previous are provided.
Supported audio format
The primary supported audio format is MP3 (.mp3). However, where
MP3 is not supported, the audio player can supplement MP3 audio by using alternative delivery formats as a fallback.
Media
121
Adding audio to your page
Audio is inserted in a player straight onto the page. You can add audio from a file, from assets, or from an already online or uploaded location.
To insert a single audio or a playlist:
1. From the Quick Build tab (Media category), click
Player.
Audio
2. Position the cursor where you want the audio player to appear on the page, then simply click the mouse.
3. In the Insert Audio Player dialog on the Audio Player tab, add your audio:
• Add individual audio
Click the Add Files button to select the file(s) to open.
- or -
•
Add all audio files in a folder
Click the Add Folder button then navigate to a folder, select it and click OK to add its content.
- or -
• Add audio from your Assets
Click the Add Assets button then choose your preferred player format and click OK.
- or -
•
Add audio previously uploaded via Online Resource
Manager
Click Add URL and enable Add from Online Resources.
From the drop-down list, select the file.
- or -
122
Media
• Add audio that is already online
Click Add URL and paste or type an online audio URL (its full web address). This could be audio on another website.
4. (Optional) To remove audio from the playlist, check the box to the left of its thumbnail and click Delete.
5. (Optional) To adjust order in a playlist, use the Up and
Down buttons at the bottom of the dialog.
6. Click OK.
The audio player will be inserted where you clicked on your page.
Online Resource Manager (Tools>Site Manager) can be used to scan your web space for audio files, as well as manually upload audio to your web space. Any audio file showing in the Online
Resource Manager will be available from the above Add from
Online Resources drop-down list.
To change the audio player theme
You can choose a different theme which changes the appearance of your audio player. If you have multiple audio players, they must share the same theme.
1. Select Properties menu>Site Properties>Features>Audio
Player.
2. In the Select Theme drop-down list, choose a theme.
3. Click
OK
.
