How to (make best) use external js library from html object (need help from dev)

[Franck Payen]

Ok, on another discussion about rotating full screen backgrounds slideshows, i was orientated to try a small lib named "backstrech"

I throw myself in, and i really like what we can do with it.

To use it simply, just make an html object and paste this in :

<script src="http://musecdn2.businesscatalyst.com/scripts/4.0/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="assets/jquery.backstretch.min.js" type="text/javascript"></script>
<script>
  $.backstretch([
      "http://dl.dropbox.com/u/515046/www/outside.jpg"
    , "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"
    , "http://dl.dropbox.com/u/515046/www/cheers.jpg"
  ], {duration: 3000, fade: 750});
</script>

then add the jquery.backstretch.min.js to your "downloaded files" (file menu > files to download)

And you’re done.

Now, i need some help from better developers.

As you can see, my first line is a call to jquery, the same that we find later in Muse exported code.

Reason 1 : without this line, jquery is not defined and the plugin won’t work.

This raises 2 issues :

- We load twice the same ressource which is useless (100k)

- loading js is all about having the page hangs while it loads, hence, they are put at the end of the body.

Does anybody know a way to load this particular html script AFTER we are sure the muse scripts (esp. jquery) have been loaded ?

(in the Edge Animate world, i’d go for the yepnope, and put it at the right place in the code, though, here i have no access to page load structure except head)

PS : in addition to that, i made an exported page/excluded from navigation where i put all the images i wanted for the background, i could then simply change the images lines :

, "http://dl.dropbox.com/u/515046/www/garfield-interior.jpg"

to

, "images/my_image_name_as_in_ressources.jpg"

[patashnik88]

Sorry Franck i'm not very clued up on css, what do I need to do to fix the problem?

[HelloNoam]

Hi patashnik88, looks like you might have put in the wrong info in the widget options for the file names.

Instead of: //Users/marshalldoctors/Desktop/VIDEO/TEST2.mp4

Try to just put these in the options:

TEST2.mp4

TEST2.webm

TEST2.ogv

The widget options only needs the file names, not the path.

Let me know if this works.

Thanks,

Noam

[patashnik88]

Thanks Noam! That did the trick. I initially was putting the folder name and then the file name and then thought the path might work. It's very simple thanks for making

this available to the community!

[Terraform1]

Stupendous work Noam!

I do have 2 sm. questions / requests... however

1. the video on "loop" seems to skip a frame, or maybe better stated the loop is not seamless... is there anyway that we could tighten something like that up so it was seamless? At first I assumed it "appeared" that way because the video loop itself was not edited for "seamless looping" however on close inspection it does "flash" black which I am assuming is the canvas color... It really is near to perfect however.

2. is there anyway to put a "fallback" fullscreen image one layer below the fullscreen vid widget so if the video can not load for whatever reason the visitor still gets a fullscreen image?

I am still "researching" Muse, to see if I can use it on this project that I am working on... I came from a flash world and since have been using various dev teams to do the HTML stuff but this project is super small budget for an artist friend and I would love to find a solution where I can make something w/o having to call in one of my dev teams... and this Widget really is awesome but I would have no idea as to how to even start to adjust things inside of a widget  

thanks again for your hard work on this!

[patashnik88]

Hi Noam,

Just a few problems i'm having I wonder if you can take a quick look. Basically when in Muse and then viewing the page in browser the video plays fine but when i publish the site and upload via filezilla (i'm hosted by godaddy) the video does not play.

the site in question is www.aketonik.com

Does this video feature only work for sites published through business catalyst?

[HelloNoam]

Hm, it appears to be playing for me when visiting www.aketonik.com.

I tried on Chrome, Firefox, and Safari and they all seemed to work. Did you figure it out? What browser are you using?

It should work on all hosts, no BC limitation.

[patashnik88]

What I did was upload the three videos in my dropbox and then replaced the

src in the html from ASSETS/....MP4 etc.. to direct to the videos in

my dropbox and add ?dl=1 to the end of the URL. It seemed to work. Is there

any disadvantage in using this method in terms of speed?

I figured the problem must be with my host provider (godaddy) as when I

upload the videos to my assets folder it's unable to load them.

Do you know what the problem might be?

Thanks for the help.

[patashnik88]

Hi Noam,

I've been having a bit of problem with the video widget. I checked it on another computer using an older version of Safari (V5) and it's a bit buggy and takes a while to load.

Similarly the video itself takes too long to load and begins with a black screen (on Chrome) or the grey widget icon (safari). The video file is relatively small - less than 2mb.

Do you think because the videos are being hosted in my dropbox account might explain the slow loading time?

Ideally would there be a way to either include a loading bar as the video loads or if I put a browser filled image can that show before the video starts playing?

I also noticed there is a youtube and vimeo widget now included in Muse, can these also be used as full screen video backgrounds if we can default the autoplay to full screen and have it muted?

Thanks for your help and a happy new year!

[Craig_Knox]

This is almost exactly what i am looking for, i just want to take it one step further.

im looking for a fullscreen video widget that draws randomly, or optionally in a set order, from a list of videos.

thank you all for your time.

[DominicSimmons]

Hi all!

This background video widget is exactly what I have been looking for! However, when I tried to apply it to my website, I ran into a few issues and was wandering if someone would be able to help?

This is a prototype of the website without your video widget and as you can see there is a blank grey space on the third 'page' where the video would be displayed:

http://www.dominicsimmons.co.uk/nowidget/nowidget.html

This is the website with your widget (the video may take a while to load as the one being used is quite large, and will be scaled down and shortened):

http://www.dominicsimmons.co.uk/widget/widget.html

Obviously my website isn't of a design that you would normally use the background widget for, however in principle it works well by placing the widget on a layer beneath all of the other website content. I am having two problems with the website though.

The first problem is that when the widget is placed in the page, for some reason it is creating an extra section at the bottom of the page about the size of a footer. There is no explanation for this that I can see, and it only happens when the widget is being used. As far as I am aware, this occurs in all browser types.

The second problem appears to be confined to when using Safari. When the widget is being used, the first 'page' loads but then all subsequent 'pages' (other than the video page) appear white and are displaced. Again I am lost as to why this would be, and why it would only occur within Safari and only when the widget is used.

Is able to help me out at all?

Cheers,

Dominic

[niclaswagner]

Great work!
I would like to overlay the video with some carbon pattern to darken it.

Do you have an idea how to do that?

Thank you.

[Izmael]

Ok why didnt this work for me?

When you say download that js file.. Do you literally right click over that link and press "save link as?" Because that's what I did. 

I then followed steps 2 and 3 precisely as told.  I don't see those same wedding images on my test site, just a plain white background.

Thank you

[randystevens]

Try this link and click the zip file. Then after you unzip that you will find the js file, which you can "Add File for Upload".

https://github.com/srobbin/jquery-backstretch

[Izmael]

That certainly did the trick.  Thanks for explaining Randy. 

[j_bruton]

Hi Noam,

I am trying to place this in my muse site. It works perfectly when I preview the site, but does not work when I upload the HTML.

Any thoughts?

-Thank you!

[Gupevieira]

Not working on Firefox

Already downloaded the latest files

please help!!!

[bx5a]

Hi Noam,

I was wondering if you or anyone else could help me out with a small issue. I used your code and the modification posted by topelovely to load a full width slideshow within a div container. It works great, the only problem is that my slideshow is located close to the top of a single-page design and does not load until the rest of the page is completely done loading.

You can see the problem in action here: http://zrno123.businesscatalyst.com.

So my question is: is there a way to force that entire element to load first and not last?

Thank you

[rafael-flores]

Hi Noam,

Many thanks for your GREAT video-code!

I have a problem, when I publish in businesscatalyst run´s perfetly full-scree+edge animation

http://fred45anniversary.businesscatalyst.com/

But wen I put THE SAME file in my hosting nothing happens!

www.fred.anniversary.km16.es

Any idea? why ?? H.E.L.P

Many thanks in advance!

[sachinhasija]

Hello rafael-flores

Both thelinks worked fine for me in Google Chrome.

Did yu manage tosort this one out? Or the issue is specific to any browser?

Regards,

Sachin

[rafael-flores]

Hello Sachin Hasija,

You´re right, in Chrome is fine but not in Safari or Firefox.

BUT in http://fred45anniversary.businesscatalyst.com/

Is perfetly running in all thesse browsers!

My point is; the video with edge animation is working fine with businesscatalys in all browsers but not in

www.fred.anniversary.km16.es

I would love to solve this mistery....any Idea Sachin? Since the code is exacly the same, I was wondering if businesscatalyst have something "extra" that solve the issue.

Since I´m not a coder...I can´t figure how...

Kind regards!

[HelloNoam]

Rafael, can you tell me what kind of server your host is using, Windows or Linux, or which host is is?

This might be an issue with the server not knowing how to serve certain video files. Once you give me that info I could investigate a workaround.

Thanks,

Noam

[rafael-flores]

Hi HelloNoam,

Is not a serving video problem because if I only put the video works perfect. Is the convination of Edge+video where I found the problem. But in business catalyst is working...

I don´t know if you sitll whant to know the server or you have another idea...

Many thanks in advance for your answer and plugin!

...I´m so excited with the posibility to use edge+video+sound!!

[joke4me]

Here's another example demo from Noam instruction

http://www.lohriialo.com/background-video-demo.html

[Studio Tandem]

Thank you a lot guys !!!

This is a really helpfull, and hopefull for my work's evolution in muse !

So if we can use javascript library in muse and also import images since a folder location, i think it's possible to use the masonry system to create a project gallery with categories ? Or maybe place projects in muse with the existing lightbox gallery, and give them an id or type for masonry ?

And again, thank a lot !