Hi curiousco,
This is probably a job for the vidbg.js script. It will give you a little more control over the JavaScript and video objects.
You can learn more here: https://github.com/blakewilson/vidbg
Regards,
Blake
Thanks for the quick reply! I’m quite a JS novice/hack, so surprised I’ve gotten as far along as I have. A testament to your work, me thinks. 🙂
That being said, any advice on how to go about adding an ID var/parameter to the existing JS that I can later reference?
Thanks again,
Gabe
Hi Gabe,
Thank you for the kind words 🙂
If you have numerous video backgrounds with different selectors (container fields) you will be able to target them individually through JavaScript. This could technically be used as a form of “ID.” If you could elaborate a little bit on what you are trying to accomplish I will try my best to point you in the right direction 🙂
Regards,
Blake
Sure –
I’m using the videos in combination with a jQuery script called onePageScroll, which essentially mimics Apple’s old iPhone website. (see: http://www.thepetedesign.com/demos/onepage_scroll_demo.html)
Most of the main content sections within an individual HTML page will have a video background. When scrolling from one content section to the next, I need to be able to pause the current section’s video and play the new section’s video. The onePageScroll API allows for all kinds of callbacks, so the ability to do what I’m trying to accomplish is built into the jQuery script.
The problem I’m having is that I don’t know how to target specific videos without them having a unique ID. For example, the first instance of the video I’m using was placed into a container called “.sectionHeader” — now I want to use JS to pause or play this particular video.
Currently, i’m trying to reference it via document.getElementById(“.sectionHeader”)
To boil things down, say I have three videos, each placed into containers “.sectionOne”, “.sectionTwo”, and “.sectionThree” respectively. How could I use JavaScript to pause one video and play another?
Thanks again for your time, it’s very much appreciated.
Hi Gabe,
You sure can do this. Here is an example of how to pause/play a video in Video Background using jQuery. Let’s say your “container” is .sectionOne
jQuery( function($) {
$(function() {
var $sectionOneContainer = $('.sectionOne');
var $sectionOneVideo = $sectionOneContainer.find('.vidbg-container > video');
$sectionOneVideo.get(0).pause();
});
});
Here is what is happening:
- Wrap the function in a jQuery function to avoid conflicts with other libraries
$sectionOneContainer variable declares the video container$sectionOneVideo variable gets the video element- Finally,
$sectionOneVideo.get(0).pause(); call the .pause() function on the DOM video element
You can use .pause() or .play() as needed.
Regards,
Blake
Wow, I would have never come up with that. Thank you so much — it works like a dream. I’ll share my creation once it’s finished. 🙂
I’m immensely grateful!
I’m glad that worked. I’m looking forward to it!
Have a great day!
Regards,
Blake
