Add a Play Button and Cover Image to WebGL launch

4 posts / 0 new
Log in or register to post comments
Last post
2019, January 7 - 02:50
#1
vcard
vcard's picture
Add a Play Button and Cover Image to WebGL launch

Hi all,

With Unity default WebGL template the scene created loads immediately when the HTML page opens. One may whish to have the option to proceed or not with the loading in a process similar to online videos with a cover image and a play button. The cover image is useful to promote the scene.

A Video Style Viewer for WebGL Scenes

Demo: http://odisseia.babelx3d.net/Unity3DTests/WebGLTemplates/Babel_Default/index.html

Features:

  • Cover Image to publicize the scene theme,
  • Play Button to start the scene loading,
  • Window Resize on bottom right corner. Before loading the user can resize the scene window to a better fit.
  • Other small tweaks; among them a message "Loading ..." to reassure in case of slow downloads and a url command to start the scene immediately in case we need it; details and example below.

If, for some reason, in a specific situation we want to start the scene immediately?  Just add "?start=yes" to the URL, like this:
http://odisseia.babelx3d.net/Unity3DTests/WebGLTemplates/Babel_Default/index.html?start=yes

The wait time can be defined by using in the URL command a value in milliseconds instead of the yes argument. Examples: with "?start=5000" waits 5 seconds; with "?start=0" there is no wait and the scene is loaded immediately without showing the Cover Image, see below link.
http://odisseia.babelx3d.net/Unity3DTests/WebGLTemplates/Babel_Default/index.html?start=0

Check our blog for more details and download the package to install in your Unity project:
https://portal.babelx3d.net/content/video-style-viewer-webgl-scenes

Enjoy!

vcard

Visibility: 
Public - accessible to all site users
Edited by: vcard on 2019/10/19 - 00:37
Top
2019, January 16 - 20:24
jduarte
Hello

Hello

During installation I got 4 critical errors :

Assets/WebGLTemplates/Babel_Default/TemplateData/UnityProgress.js(5,25): BCE0005: Unknown identifier: 'document'.

Assets/WebGLTemplates/Babel_Default/TemplateData/UnityProgress.js(10,29): BCE0005: Unknown identifier: 'document'.

Assets/WebGLTemplates/Babel_Default/TemplateData/UnityProgress.js(12,35): BCE0005: Unknown identifier: 'document'.

Assets/WebGLTemplates/Babel_Default/TemplateData/UnityProgress.js(15,34): BCE0005: Unknown identifier: 'document'.

I don't know how critical they are although the players settings have this new option.

Thanks and regards

João

 

Top
2019, January 17 - 11:53
(Reply to #2)
vcard
vcard's picture
Hi João,

Hi João,

Thanks for the input about this.

Unity informs many errors these days. If the scene  publishes ok it is not critical. Tell me about it.

Enjoy,

Vcard

Top
2019, January 27 - 21:37
vcard
vcard's picture
Hi all

Hi all smiley

A new version v.1.1 of our publishing WebGL template is out!

  • CSS button positions tuned,
  • Behavior tuned: now when the user moves the mouse over the entire cover image the play button outer circle enlightens a bit to make the user more aware of the play button location. Previously this only happened when the user's mouse was over the much smaller play button area,
  • The corresponding icon appearing in WebGL publishing templates now shows a play button, a specific feature of the template.
    Template_icon
            The new icon

Check our blog to download.

Enjoy!

vcard

Top