Live Stream (Developer)

Live Stream (Developer)

Type Name

LiveStream

Usage

This block integrates with a streaming service, e.g. Youtube, Vimeo, Facebook, etc.

Icon
Screenshots
Type
Content
Content Category
Video

About the Live Stream Block

The Live Stream block is used to display video from popular streaming services such as Youtube, Vimeo, Facebook, etc or our own native streaming service called GEVME Live. Even though it's called the Live Stream block, it can be used to display both live videos and pre-recorded videos.

Creating a Live Stream Block

To create a Live Stream block, in the Venue Editor, click on "Add Blocks" button in the settings panel on the left, then choose "Live Stream" under the Video category.

image

Block Settings

The main setting of the Live Stream block is the Streaming Service. From the Streaming Service dropdown, choose the service you want to integrate with.

image

Below is a description of each service, their settings and how to integrate with each one of them.

GEVME Live

Before using GEVME Live streaming service, you first need to configure the broadcast channel under Channel Management App.

Once you have configured a list of channels to use, simply pick it up from the dropdown list.

image

YouTube

To paste the embed URL of your youtube video, e.g. https://www.youtube.com/embed/{video_id}

image

Vimeo

To paste the embed link of your video or showcase, e.g. https://player.vimeo.com/video/{video_id} or playlist: https://vimeo.com/showcase/{list_id}/embed

image

Facebook

To paste the video link, e.g. https://www.facebook.com/{video_id}

image

Microsoft Stream

To paste the video link, e.g. https://web.microsoftstream.com/video/{video_id}

image

Custom Streaming URL

If you are using a custom streaming that is not within the listed options, you can select this option and paste the playback URL / streaming URL.

image

This is usually applied for "View On-Demand" playback URL.

Display Static Image when the streaming is not Live

This is applied for select streaming service which is not autoplay:

  • GEVME Live
  • Custom Streaming URL
image

For pre-event and post-event, we recommend static images of important information that the attendees should be informed of.

  • Pre-Event:

    • Housekeeping Information

    Important Note about the event

  • Post-Event:

    • View-on-demand information

    QR Code of Event Survey

Important Note

For Live Streaming Block, do take note of the different Heights to be set

Laptop View: 550px

Mobile View: 250px

image
image

JSON Config

Attributes

🗃️
Block Attributes

NameTypeDescriptionCommon to All
String

The cover image that you would want to set as default for the block. Eg: “https://files-myxp.s3-ap-southeast-1.amazonaws.com/livestream/default_background/Light_BG_1.png”

Yes
Boolean

Does not allow popup to occur when this field is true.

Yes
Object

Refer here.

Yes
Boolean

Only render background image when this field is true.

Yes
String

Sets the height of the block, only useful when fitHeightToContent is false. Eg: “200px”, “2rem”Units can be: px, em, rem, %.

Yes
Boolean

Determines if the block visibility should be rendered by default.

Yes
String

Only needs to be specified when widthType is “custom”. Eg: “100%”Units can be: px, em, rem, %.

Yes
Boolean

Value of true would result in the block being wrapped with a white background.

Yes
Object

Refer here.

Yes
Array

[“0”, “0”, “0”, “0”, “px”]Last index can be: “px”, “rem”, “em”, “%”, “”.

Yes
String

[“0”, “0”, “0”, “0”, “px”] Last index can be: “px”, “rem”, “em”, “%”, “”.

Yes
Boolean

true

No
Boolean

false

No
String

“https://files-myxp.gevme.com/….”

No
Enum

“image” |

No
String

””

No
Boolean

Setting this field to true would result in blockHeight to have a predetermined value.

Yes
String

“heading”

Yes
Enum

"center" | "left"

Yes
Boolean

true

Yes
String

“https://www.youtube.com/embed/{video_id}”“https://player.vimeo.com/video/{video_id}”“https://vimeo.com/showcase/{list_id}/embed”“https://www.facebook.com/{video_id}”“https://web.microsoftstream.com/video/{video_id}”

No
Integer

1

Yes
Enum

“gevmelive” | “youtube” | “vimeo” | “facebook” | “msteams” | “customstream”

No
Enum

Renders the block width styling based on the value selected. Only when “custom” is selected, blockWidth needs to be specified. Eg: “full” | “half” | “custom” | “fit-content”

Yes

Sample

"livestream-block": {
    "type": "LiveStream",
    "title": "Watch the Launch",
    "data": {
      "heading": "Watch the Launch",
      "headingVisibility": false,
      "headingAlignment": "left",
      "livestreamTitle": "Livestream",
      "livestreamTitleVisibility": true,
      "streamingService": "youtube",
      "livestreamUrl": "https://www.youtube.com/embed/kCJsx4h9Hr8",
      "displaySomethingWhenNotLive": "video",
      "displayImageWhenNotLive": null,
      "displayVideoWhenNotLive": null,
      "disableVideoQualityOptions": false,
      "disableAutoplay": true,
      "order": 2,
      "alignment": "left",
      "backgroundCoverImage": "https://venues-sdk.gevme.com/assets/venue-bunker/main-stage/panelmain.png",
      "blockWidth": "100%",
      "blockHeight": "100%",
      "widthType": "full",
      "fitHeightToContent": false,
      "boundingBox": true,
      "contentPadding": "0px"
    }
  }

This block integrates with a streaming service, e.g. Youtube, Vimeo, Facebook, etc.

image