MediaBoards (Images, Videos, Screenshare)

MediaBoards (Images, Videos, Screenshare)

FAQs

How do I resize mediaboards?

My mediaboard shows “Rendering…” even after a couple of hours

What pixel size should mediaboard thumbnails be?

How can I play and pause a video mediaboard?

How can I autoplay a video mediaboard?

Why does website XYZ open in a new tab instead of directly in the 3D environment?

Do you support GIFs?

Can I show a thumbnail? My video mediaboard is black until I click on it!

Images

Transparent PNGs

Animated mediaboards (2.12+)

I have the images but they are not online – where can I upload them?

Videos

Adding a video through the chat (“pinning”)

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

Video textures (MP4, YouTube, Vimeo) on IE11 (2.8+)

Video Play & Pause

Autoplay

Setting a thumbnail

Live Video Streaming

Using your webcam

Screen sharing

FAQs

How do I resize 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}

My mediaboard shows “Rendering…” even after a couple of hours

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 it maintains 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.

How can I play and pause a video mediaboard?

See Video Play & Pause below.

How can I autoplay a video mediaboard?

See Autoplay below.

Why does website XYZ open in a new tab instead of directly in the 3D environment?

If a website does not allow iframing (Google, for instance), it will need to be opened in a new tab. From version 2.13 onward, any website that can be iframed will be, and for sites that cannot the platform will show a link to open the website in another tab.

Do you support GIFs?

GIFs are not supported for mediaboards. The suggested way to get animated content in the 3D environment is to use a video, or to use the method described below to use a series of images.

Can I show a thumbnail? My video mediaboard is black until I click on it!

See Setting a thumbnail below.

Images

Transparent PNGs

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

Animated mediaboards (2.12+)

It is possible to show an “animation” by using a set of images instead of a single one.

This section assumes you know how to edit a mediaboard – if not, you can learn how to do so in the “Introduction to Editing” guide, specifically under the “Changing the image on a mediaboard” section.

You will need to edit the diffuseMap field of the mediaboard, inserting an array of images. Normally diffuseMap might look like this:

https://cache.learnbrite.com/example1.png

But in this case we will need a URL for each “frame” of the animation, for example:

https://cache.learnbrite.com/example1.png
https://cache.learnbrite.com/example2.png

https://cache.learnbrite.com/example3.png
https://cache.learnbrite.com/example4.png

To format this properly, we will need to:wrap each of the lines in quotes, separate them with a comma, and finally wrap everything together with a pair of square brackets. In order:https://cache.learnbrite.com/_assets_/clients/learnbrite/mootup/scenarioConfig.js

  1. Wrap each line in quotation marks, add a comma after each line but the last

"https://cache.learnbrite.com/example1.png",
"https://cache.learnbrite.com/example2.png",
"https://cache.learnbrite.com/example3.png",
"https://cache.learnbrite.com/example4.png"

  1. Put them on a single line, and wrap it in square brackets

["https://cache.learnbrite.com/example1.png","https://cache.learnbrite.com/example2.png","https://cache.learnbrite.com/example3.png","https://cache.learnbrite.com/example4.png"]

Finally, we can add this to the diffuseMap field of the mediaboard, and click “Save item”.

I have the images but they are not online – where can I upload them?

You can put the images in any place that offers a public URL (Dropbox, Google Drive, imgur, etc). Alternatively, LearnBrite also offers a storage service which you can learn more about here: Storage & Files 

Videos

Note: you should avoid videos in the DASH (Dynamic Adaptive Streaming over HTTP) format. To display them (or playlists) we suggest using a popup instead.

Adding a video through the chat (“pinning”)

If you are an Editor of the 3D environment, a quick way to add videos (and any other content) is to paste the URL in the chat, send the message, and then “pin” it by clicking on the red pin icon beside the message. We have recorded a brief video showing this in action: https://youtu.be/4EmmrhRyVTs 

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

This can be done by uploading the mp4 file to LearnBrite Storage, then clicking on the “World” icon on their right. This will copy the file’s global link.

Then, in the 3D environment, you can either paste the link in the chat and pin it (see “Adding a video through the chat” above) or use the “Add Mediaboard” option within the edit menu.

A quick video showing the link being copied and adding the mediaboard to the space can be found here: https://youtu.be/EspBRpyYt_M 

Using YouTube URLs

Although YouTube is great for experimental and proof of concept productions, occasionally the API may not respond. For commercial productions, we recommend using services such as Vimeo, or alternatively uploading your videos to our included platform storage.

YouTube URLs work mostly like all others URLs, with a couple of quirks:

  • To iframe YouTube videos you can't use the “watch” type URLs, as iframing is blocked by YouTube. You will need to modify the URL:

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

Video textures (MP4, YouTube, Vimeo) on IE11 (2.8+)

Video textures are not supported in IE11, so MP4, YouTube, Vimeo and other videos will not play in mediaboards or 360s. An error will be generated only when the video is triggered to play (the space can still load without issue).

Clicking a video texture 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.

E.g. 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})

Autoplay

Some videos can be set up so that they immediately start playing when the environment has loaded. To do this,

  1. Click Edit menu, enter edit mode
  2. Hover over the mediaboard, then click on the cog icon
  3. Copy the contents of the onclick field – they should start with {"action":"setVideoboardControls"
  4. Paste them into the onstart field
  5. Click Save

Note that this is not guaranteed to work with videos that have audio – browsers restrict automatic playback of videos with audio.

Setting a thumbnail

To avoid this you can use a poster parameter with the URL of the video, by adding the following to your URL: ?poster=URL_OF_IMAGE

So for instance, if your video has the URL:

https://storage.learnbrite.com/my_video.mp4

you can add a thumbnail by updating it to:

https://cache.learnbrite.com/my_video.mp4?poster=https://cache.learnbrite.com/my_image.jpg

Live Video Streaming

YouTube Live URLs have been tested successfully. Add the URL of the live stream via chat or Add MediaBoard in the edit menu: open the edit menu, then click “Add mediaboard”, insert the URL directly in the input field at the bottom of the popup, then click “Create”.

Using your 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.

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: LearnBrite Screen Sharing (the latest versions of the Chrome browser does not require the extension to be installed).

© 2020 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!

Tell us how we can improve this article?