Autoplaying Background Video: BigVideo.js

Ollie · July 10, 2015, 4:19pm

Hi there,

I have been stuck on this for sometime today. I can’t understand it should be put together within the hype document.

The link to what I am trying to complete is here, http://dfcb.github.io/BigVideo.js/

can anyone help,

Thanks Ollie

MarkHunte · July 10, 2015, 4:43pm

Please post the project so we can see what you are doing …

Cheers

Daniel · July 10, 2015, 6:41pm

Hi @Ollie

If you would like to make your own full screen button, select your video element, give it a ‘unique element ID’ of ‘video’, and then select your ‘full screen’ button. Next, create a new JavaScript function that runs the following code:

var video = document.getElementById("video");
video.play();
video.webkitEnterFullScreen();
video.mozRequestFullScreen();
video.msRequestFullscreen();

That’s essentially what that plugin does.

Since you might want to control the video’s play state when you hit this button, here’s a few more functions which might be useful:

//get the id of the videos 
var mediaElement = document.getElementById("video1");  
var mediaElement2 = document.getElementById("video2"); 

// pause the video (if it is playing)
mediaElement.pause(); 
mediaElement2.pause(); 
 
// rewind the video. 
mediaElement.currentTime = 0;
mediaElement2.currentTime = 0;

// optionally play the videos again
mediaElement.play(); 
mediaElement2.play();

Ollie · July 10, 2015, 7:46pm

Hi @danielmorgan

I have decided that the video should be uploaded and played via Vimeo or Youtube, so it will be embedded on the page with a html widget. The idea is to have a fullscreen background video playing which cannot be controlled. The reason I am keen to use the jquery plugin that I link (http://dfcb.github.io/BigVideo.js/) is that it achieves the exact look I am after. It fades the video in once loaded, doesn’t have any controls and can also just be on auto play which loops when finished.

So do you think it is possible to include this jquery plugin I linked within hype? Or is there a better way you suggest I can achieve having fullscreen background video, which has the points I mentioned above?

Thanks for you help

Ollie

Daniel · July 10, 2015, 9:08pm

You’ll need to include a reference to Jquery and this JS file in the head of your document. You can edit the contents of the <head>…</head> of your exported .html file by clicking on ‘Edit HTML Head’ in the Document Inspector.

You’ll then need to place your initialization code as a JavaScript that runs ‘On Scene Load’. Finally, use your embed code within the inner HTML of a rectangle.

The order of operations is:

Load Jquery
Load BigVideo
Load Video element
Run the BigVideo JS to get the video to play and appear in the Background (this occurs ‘On Scene Load’)

Ollie · July 10, 2015, 9:41pm

Great, sounds like it will be able to work nicely. However I have read over this now numerous times now, and being a complete beginner can’t fully understand the exact steps.

I have no previous experience in coding or web building so although you have stated the exact procedures, I would be very grateful if you could expand a little (for example what is the “initialization code”) so that I can implement and achieve the desired look.

Thanks Daniel

Kind Regards Ollie

Ollie · July 11, 2015, 10:37am

Hi Mark,

I don’t have much of a project to link at this point as I am unsure of how to complete the stages. However I can describe the desired outcome, which is to have a fullscreen background video which is embedded from YouTube or Vimeo. This video would fade in once loaded to avoid any loading screens seen by the viewer. The video would be on auto play and loops when reaches the end. The link I copied (http://dfcb.github.io/BigVideo.js/) has the exact look I am after, unfortunately I don’t have the experience of knowledge to make it work.

Any help would be great,

Thanks Ollie

Ollie · July 12, 2015, 7:50pm

Hi @Daniel is there any chance you could elaborate on the steps you have listed. I am very new to javascript and the use of various JS files.

Thanks in advance

Ollie

DBear · July 12, 2015, 9:29pm

Hi @Ollie here is a template with the various steps Daniel has outlined

blank_bigvideoJS.hypetemplate.zip (19.3 KB)

Inside this template you will see in the head.html 3 links to the scripts required and 1 link to the css file for bigvideo

If you preview the hype document you will see that the video plays in the background. (tested on Safari)

To change the video - link to your own or another on the web (direct mp4.ogg,web) you can change this by accessing and editing the init() javascript function in the resources folder.

hope this helps!

D

Ollie · July 13, 2015, 8:16am

@DBear Thank you so much! I had attempted yesterday to see if I could make it all work, but had no luck. So thank you so much for taking the time and uploading an example template! It has helped out hugely, and I can now progress my project!

I shall now replace the example video with something of my own. Do you know if it is possible to link a Vimeo / YouTube video?

Thanks Kind Regards Ollie

DBear · July 13, 2015, 11:52am

@Ollie Here is another template for you.

bgVideo-Youtube.hypetemplate.zip (20.7 KB)

Here the document is set to 1280px wide and 800px high but it can be whatever you want.

This uses the Youtube API to generate the video and control the playback and appearance.

I’m sure you can look up the info and maybe adapt it to what you want. It’s not a definite solution but it’ll get you on your way.

D

jameskoh · July 13, 2015, 12:06pm

thank you DBear.
maybe you can share this to javascript function library.
this can be so useful.

Ollie · July 13, 2015, 1:30pm

@DBear Thanks so much for your help and including the example templates.

I will have a look and experiment with both and see which works best for my project.

Thanks again,

Kind Regards Ollie

mams · September 4, 2020, 5:49pm

Hi there, I tried the template to embed a Youtube video, but I want the sound on. If I delete the line "event.target.setVolume(0); // mute the video
}"
or change the value to 1, 10 or 100, the autoplay doesn't work anymore. Do you have any clue why? Thanks a lot for the help !

Daniel · September 4, 2020, 6:01pm

You can make it a part of the embed code:

mams · September 4, 2020, 6:19pm

Thanks Daniel, actually my problem is that I do want the sound on my video, unmuted. When using it within a widget, autoplay doesn't work (see attached). If I use DBear's template autoplay works, but if I withdraw the line to mute the video (because I don't want this behavior), the autoplay stops working.

Daniel · September 4, 2020, 7:07pm

The browsers have determined that they don't want websites to play audio when you visit them without clicking a 'play' button or taking some sort of other action... So the only way to autoplay video without user interaction is to have the video muted.

Chrome, Safari, and Firefox all have different ways of handling this, but the basic workaround is to just have a button that plays the video.