MediaBoards (Images, Videos, Screenshare)

MediaBoards (Images, Videos, Screenshare)

Limitations of Mediaboard popups

Resizing Mediaboards

Mediaboard appears with Rendering…

What pixel size should mediaboard thumbnails be?

Images

Transparent PNGs

Videos

How to upload and play an .mp4 video as a texture in the 3d scene

Using Youtube URLs

Disable suggested videos when pausing or at the end

Using Vimeo URLs

Video Resolution

Privacy Settings

DASH Video Format & Playlists

VideoTextures (mp4, Youtube, Vimeo) on IE11 (2.8+)

Video Play & Pause

Live Video Streaming

WebCam

Resize Mediaboard

Screen Sharing

Limitations of Mediaboard popups

Sites that do not allow iframing need to be opened in a new tab regardless

Resizing Mediaboards

In 2.9+ you can scale by grabbing the corners of an item in edit mode and dragging them to resize.

Or, you can also manually adjust the scale in a mediaboard’s settings.

  1. Edit mode > Editable Items List Icon
  2. Find your mediaboard
  3. Click Edit
  4. In the scale field change

{"x":1,"y":1,"z":1}

To larger

{"x":2.4,"y":2.4,"z":2.4}

Or smaller

{"x":0.2,"y":0.2,"z":0.2}

Note: there must be a leading zero for less than 1 scale, this won’t work > {"x":.2,"y":.2,"z":.2}

Mediaboard appears with Rendering…

If your mediaboard never shows a captured image, ensure the url starts with `https://` or `http://` when creating the mediaboard in order to get the capture image, otherwise you’ll need to delete and create it again.

What pixel size should mediaboard thumbnails be?

You can make the image whatever pixel dimensions you wish as long as its that ratio it will not look distorted.

We have on our roadmap to resize using the blue gizmo handles in edit mode , however in some cases entering numeric values is more accurate and useful.

Images

Transparent PNGs

To enable transparency for a png image edit its properties and set transparent to true 

Videos

  • Displaying video (YouTube) in the 3d scene (VR) rather than a popup
  • Youtube videos can’t play on mediaboards in the scene, only in a popup window
  • You can use your own MP4 files though just use a url to them
  • The limitation of Youtube may not apply on others services, explore Wistia, Brightcove, etc as long as you can get a url to the video stream it could work

Avoid videos in DASH format, we suggest using a popup to display videos that are in DASH format or are Playlists.

How to upload and play an .mp4 video as a texture in the 3d scene

Upload the mp4 to storage.learnbrite.com

Get the URL from the globe icon

Paste in Chat or Edit>Add MediaBoard

Using Youtube URLs

  • iframe youtube videos you can't use the `watch` type urls they are blocked by youtube eg.

Disable suggested videos when pausing or at the end

Use the parameter

rel=0

Example

https://www.youtube.com/embed/3E7hkPZ-HTk?modestbranding=1&rel=0&autohide=1

Using Vimeo URLs

Video Resolution

You can request a specific resolution of a vimeo video using a url parameter, this is useful for forcing faster loading/playback performance (at the expense of quality)

https://vimeo.com/229643605?res=2k

https://vimeo.com/229643605?res=1080

https://vimeo.com/229643605?res=4k

Privacy Settings

Be sure to check the video privacy settings are not restricting video playback

DASH Video Format & Playlists

Some videos on Vimeo are in this format and will not play as a texture in a space, we suggest using a popup to display videos that are in DASH format or are Playlists.

If you have Vimeo Pro account you can use .mp4 and Live Streaming links as described here https://help.vimeo.com/hc/en-us/articles/224823567-Third-party-player-links

VideoTextures (mp4, Youtube, Vimeo) on IE11 (2.8+)

VidoeTextures are not supported in IE11, so mp4, Youtube, Vimeo and other videos will not play in mediaboards or 360’s. An error will be generated only when the video is triggered to play. The space can still load ok. Clicking a videotexture to play will crash IE11 with the following error

Video Play & Pause

Identify the name of the target mediaboard by clicking the setting icon for the object. The unique name will be at the top of the popup.

Eg Mediaboard_xo2p

Then use the scripts below using the name of your mediaboard in the video field

Using a Script to Play

LB.Actions.setVideoboardControls({videoProxy:false,video:"MEDIABOARD_NAME",videoForcePlay:true,executedFromEA:true});

Using a Script to Pause

LB.Actions.setVideoboardControls({videoProxy:false,video:"MEDIABOARD_NAME",videoForcePause:true,executedFromEA:true})

Live Video Streaming

YouTube Live URLs have been tested successfully. Add the URL of the live stream via chat or Add MediaBoard in edit menu.

In the 3d scene

Click Edit menu

Click Add mediaboard icon

WebCam

In the 3d scene

  1. Click Edit menu
  2. Click Add mediaboard icon
  3. Choose "Share screen" tab
  4. Click "Make screen share" button
  5. Click and Drag to move the screen to where you want it placed.
  6. Stop Editing, click the video icon in the chat toolbar to start live video.

Resize Mediaboard

You may Scale by clicking and dragging the corners in 2.9+ or using the mediaboard properties in the Editable Items List

For use in the Auditorium we recommend a scale of {"x":2.4,"y":2.4,"z":2.4}

Screen Sharing

To share your desktop or screen you will need to use the Chrome browser on a computer and install the LearnBrite Chrome extension found here https://chrome.google.com/webstore/detail/learnbrite-screen-sharing/ibkiogicceidegohodbaagmagafkannj 

© 2019 LearnBrite – Commercial In Confidence

Trademarks & Copyrights are property of their respective owners. Pictures are indicative only & may not reflect final production.

How useful was this article?

Click on a star to rate it!

We are sorry that this article was not useful for you!

Let us improve this article!