Creating a Live Event In-Page Experience

Product(s)
Gallery
Live
Role(s)
Studio User
Task(s)
Create an Event Experience
Create an In-Page Experience
Topic(s)
Live Streaming

In this topic you will learn how to customize the content of a live event in-page experience.

Gallery provides a Live Event In-Page template which can be used to deliver live events as part of an In-Page Experience. Brightcove offers numerous options for delivering live streaming video. See Delivering Live Streams for a list of all the options. For a detailed set of steps on using the Live module to broadcast a live event, see Quick Start: Using the Live Module with Telestream Wirecast.

To create a new live event In-Page Experience, create a new In-Page Experience and select the Live Event In-Page template.

The Live Event In-Page template has some settings and content items that are not present on the other In-Page Experience templates.

live ipx template
  1. Now Showing to Viewers
  2. Live event state
  3. Social sharing
  4. Image placeholder
  5. Event countdown
  6. Text placeholder
  7. Calendar reminder
  8. Videos placeholder

Now Showing to Viewers

The Now Showing to Viewers setting is used to configure which live event state is displayed to viewers.

live ipx template

Click Change and select the state that should be displayed. After changing this setting, the experience DOES NOT need to be republished however, it may be a minute before the state change appears on the production site.

event state selection dialog

Live event states

The experience states for a live event In-Page Experience are different than the other In-Page Experience types. The appearance of each of these states can be customized by clicking the links at the top of the page.

live event states

Live event in-page experiences have the following states:

  • PRE-EVENT - How the live experience will appear before the live event starts
  • LIVE - How the experience will appear while the live event is in progress
  • POST-EVENT - How the experience will appear when the live event is over

To edit the different experience states, click a state and then add components to the experience as needed. The LAYOUT menu provides further customization options for each state.

Social sharing

The social sharing options provide links to share the event and the videos to your social media accounts.

To configure the social sharing settings, click the Configure sharing link or click SETTINGS > Social in the left navigation. The social settings consist of:

Event sharing

The event sharing settings allow the viewer to share the event page out to social media accounts. Follow these steps to configure the event details:

  1. To add an Event Image, click Add Image and then:
    • Drag an image from the file system and then drop it on the drop area
    • Click browse and select an image from the file system
    • Enter the URL to a remote image file
    add image
  2. Enter an Event Title and Event Description.
  3. Choose how the event sharing options are displayed, Share text or display the social icons.
  4. Select the sharing options that are available.
    sharing options
  5. Enter the Page URL where the experience will be embedded.
  6. Click Generate. This will generate the meta tags that can be added to the <head> section of your page. This feature will allow social sites to display the event image, title, and description when viewers share your experience.

Video sharing

The video sharing settings allow the viewer to share the videos out to social media accounts. Follow these steps to configure the video sharing:

  1. Choose how the video sharing options are displayed, Share text or display the social icons.
  2. Select the sharing options that are available.
    sharing options
  3. Click Save to save the changes.
 

Image placeholder

The PRE-EVENT and POST-EVENT states provide the ability to display a hero image.

To add a hero image:

  1. Click the Add Image link.
  2. Enter a Name for the image.
    hero image dialog
  3. To specify an image, you can:
    • Drag an image from the file system and then drop it on the drop area
    • Click browse and select an image from the file system
    • Enter the URL to a remote image file
  4. Set the Image Size.
    • Crop Image - Crops the image in the center so that it fills the entire 16:9 space but some of the top/bottom or left/right will be lost depending on the aspect ratio of the image
    • Contain image within component bounds - Contain the image within the bounds of the 16:9 space but some blank space above/below or to the left / right of the image will appear depending on the aspect ratio
    • Stretch image - Disregards the aspect ratio of the image and forces it to fill the 16:9 space completely; this will distort the image
    • Original image size - Use the original image size, no resizing is performed; not responsive
  5. Select the states when the image should be displayed.
  6. Click Save to add the image to the experience.

Event countdown

The countdown timer displays the number of months, days, hours, minutes and seconds before the live event begins. A sample countdown timer is shown below.

countdown timer

Note: The style of the countdown timer can be styled by clicking STYLE in the left navigation.

To add a countdown timer, follow these steps:

  1. Click the Configure Event Countdown link on the page. The Event Settings page will open.
  2. Check Show Event Countdown.
  3. Set the Start Date, Start Time and Event Timezone.
  4. Enter a Transition Message. This message will be displayed when the countdown timer reaches zero but before the live stream begins.
    event settings
  5. Click Save.

Text placeholder

The PRE-EVENT and POST-EVENT states provide the ability to display static text.

To add static text:

  1. Click the Add Text link.
  2. Enter the text to add to the experience. The toolbar can be used to format the text.
    text dialog
  3. Click Save to add the text to the experience.

Calendar reminder

A calendar reminder can be configured so users can click a link to download a calendar reminder. A sample calendar reminder is shown below.

add to calendar

Clicking on the reminder will display calendar options.

add to calendar options

Note: The style of the calendar reminder can be styled by clicking STYLE in the left navigation.

To add a calendar reminder, follow these steps:

  1. Click on the Configure Calendar Reminder link on the page. The Event Settings page will open.
  2. Check Show "Add to Calendar" Reminder.
  3. Set the End Date, End Time and Event Title. The Event Description and Event Location are optional.
    event settings

    Note: The interface will appear slightly different if the Show Event Countdown option is selected.

  4. Click Save.

Videos placeholder

Different videos can be displayed during the PRE-EVENT, LIVE and POST-EVENT states. Video Cloud videos and YouTube videos can be added to the experience.

Note: Before YouTube videos can be added to an experience, you must configure the YouTube settings.

To select the videos to be displayed:

  1. Click the Select video link or click VIDEOS in the left navigation. The Select a Video dialog will appear.
    select a video dialog
  2. Select the state to select the video for:
    • Pre-Event
    • Live
    • Post-Event
  3. Select the video Source:
    • Video Cloud - Video Cloud video content will be used
    • YouTube - YouTube video content will be used
  4. Search for a video, click on it to select it and then click Select. The video will be added to the video list.
    video list
  5. Click on the Live or Post-Event sections, or click Select Videos to select additional videos.

Interactions and companion components can be added to pre-event and post-event videos and displayed as the video is played. Interactions include links and cards and are displayed as part of the player when a video is played. Companion components include HTML, images and text objects and are displayed outside the player.

Note: Interactions and companion components are not available for the Live video unless it is a VOD asset.

Videos that have been configured with interactivity will display an icon in the Interactivity column indicating the type of interaction(s). For information on adding and configuring interactions and companion components, see:

Selecting the Live video

When the Live state is selected, a Video Cloud video ID or reference ID for the live video asset must be entered. The source for the live video will always be Video Cloud.

select live video ref id

Selecting the Reference ID option allows you to change the reference ID for the live video in the Media module without having to change the video ID on the experience. For example, you may choose to denote the current live video with a reference ID of live-event. When creating the live experience, select Reference ID and enter live-event.

select live video

Now, whenever there is a new live event, use the Media module to set the reference ID for that video to live-event.

media module

By using reference ID, the live experience will not need to be edited and republished when a new event starts. When a new event is started, use the Media module to edit the video reference ID of the live video asset.

Searching for videos

The Search field can be used to search for videos. When searching Video Cloud videos, Gallery will search the video name, short and long descriptions, tags and custom fields. When searching YouTube videos, Gallery uses the YouTube search API.

search field

Click More Search Options for finer control over what fields are searched and to include and exclude text. Note that this options is only available when a Video Cloud source is used.

adv search