sydlawrence / jquery.videobg Goto Github PK
View Code? Open in Web Editor NEWAdding HTML5 video backgrounds to websites
Home Page: http://syddev.com/jquery.videoBG
Adding HTML5 video backgrounds to websites
Home Page: http://syddev.com/jquery.videoBG
May I suggest this logic and the addition of a $.fn.supportsAutoPlay
function?
This is an example of detecting autoPlay, not sure how foolproof it is?
fairly psuedo-code not tested... sorry~
$.fn.videoBG.supportsAutoPlay = function() {
var AUTOPLAY = false;
try
{
var video = new Video();
video.autoplay = true;
video.volume = 0;
// this will only be triggered if autoplay works
$(video).on('play', function() {
AUTOPLAY = true;
});
}
catch(e)
{
return false
}
return AUTOPLAY
});
}
for Chrome 26.x and above, WIN
Is it possible to add a Callback function in this library. A callback on "oncanplaythrough" event.
Thank you.
Is it possible to load more than one video in a row with this plugin?
I'm curious about use of video in a background of a div on iOS devices. When I use your script (which is great, thank you) I'm getting the poster image with a play button overlay. I'm fine with no video on iOS and just the poster image, however, that play button kinda sucks since I have text on top of my video :-/
Any way around this?
I tried your plugin and somehow my video is too zoomed in for my container. Does it depends on the div's width/height or does it calculate somehow by the video resolution ? Thing is I don't know if it's the container's fault. I use fullpage.js and one of the slides has the video background.
Thanks.
We at VersionEye are working hard to keep up the quality of the bower's registry.
We just finished our initial analysis of the quality of the Bower.io registry:
7530 - registered packages, 224 of them doesnt exists anymore;
We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).
Sadly, your library sydlawrence/jquery.videoBG
is one of them.
Can you spare 15 minutes to help us to make Bower better?
Just add a new file bower.json
and change attributes.
{
"name": "sydlawrence/jquery.videoBG",
"version": "1.0.0",
"main": "path/to/main.css",
"description": "please add it",
"license": "Eclipse",
"ignore": [
".jshintrc",
"**/*.txt"
],
"dependencies": {
"<dependency_name>": "<semantic_version>",
"<dependency_name>": "<Local_folder>",
"<dependency_name>": "<package>"
},
"devDependencies": {
"<test-framework-name>": "<version>"
}
}
Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.
NB! Please validate your bower.json with jsonlint before commiting your updates.
Thank you!
Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!
Hello, any chance this will work in Safari?
(Currently using Win 7 Pro 64bit, Safari 5.1.7)
Thanks
Tom
setting autoplay: false
doesn't prevent video from playing as soon as loaded,
I'm trying to use this as a background in a part of my site that uses a scrolling script.
The site is this one:
http://juliawallin.se/newsite/
CSS: http://juliawallin.se/newsite/base.css
Script: http://juliawallin.se/newsite/assets/script.js
If you go to the site, you will see that instead of the poster, the white background of the div section-1 is shown. I can't seem to figure out why.
Does anyone have a clue? Would appreciate some help! I would be forever thankful!!!
This isn't working in firefox. works in IE and chrome, but not in firefox. my link is here -
http://digitalmarketingcardiff.com/blackmambavideo/
can someone help please?
thanks.
Hi Syd,
Is it possible to change the playback speed? Normally it would work (in some browsers) like this:
<script type="text/javascript"> /* play video twice as fast */ document.getElementById("my-video").defaultPlaybackRate = 2.0; document.getElementById("my-video").play(); </script>But my knowledge is too limited to change your script.
Is there an option?
resize on window size change
Hi, Cool plugin, I like the way you handle different video file types for different browsers. I started implementing your plugin into our app at the request of a customer, it broke all of the js on our site, I found the cause to be the way the wrapper divs are added:
// move the contents into the wrapper
wrap.html(container.html());
You can add the wrapper this way to copy events over and not break all the other js:
// move the contents into the wrapper
wrap.html(container.clone(true));
The other thing, we have a page that completely breaks when the videobg is added to the page, I think it could be conflicting with a twitter widget or something. I think we just wont use it on that page though.
I think I am close to having it work in a Drupal 7 environment but problems remain.
Assuming that all references are relative to the location of the query,videoBG.js file, I created a folder in the site's "file" section called videoBG within which I located the query.videoBG.js file and the assets folder. The only difference is that the query.js file is located elsewhere as a global resource.
Inspecting the results, I look at the script.js which is reporting the error:
script.js:2TypeError:'undefined' is not a function (evaluating '$(document)')
I have loaded the video assets into the asset folder and reference them exactly as you have.
Any suggestions as to what could be 'undefined'?
I want to fire an event when the video is over.
Thanks.
what is the selection with this. also i have question with responsive how video will be center?
thank you.
jquery.videoBG is already available in bower search
>bower search jquery.videoBG
Search results:
jquery.videoBG git://github.com/sydlawrence/jquery.videoBG.git
however, this repo lacks bower descriptor file. adding bower.json can greatly help people already using bower to track versions, main and ignore files. our project, for example, uses https://github.com/ck86/main-bower-files to include all files specified in bower.json "main" section.
could you please add bower.json file to repo?
Hi,
This library is nice and perfect for a project I'm working on right now. The only problem I've met is that the autoplay parameter did not seem to work. If you set to false it will still start right away.
I solved the problem by adding 3 lines in your code (line 153) :
if (options.autoplay) {
$video.attr('autoplay',options.autoplay);
//I added the 3 following lines
}else{
$video.removeAttr('autoplay');
}
and it works better now. :)
Hi!
How can I stop the loops and load back a regular homepage please ?
(without any video background)
Using it as a video intro in fact.
Thanks
Shouldn't the css property top or left be removed when changing aspect ratio on setFullscreen function? For example: you have left set to -100px shift, when you resize your window to the opposed aspect ratio so you have to add top ratio, the previous -100px are still set.
Hi
I'm trying to embed videos with your Video bg script. Everything works well, in Chrome and Safari.
But in FF the Video doesn't play. And I dont know why. Maybe you have an idea because I don't know what to do anymore.
You can find my page here: http://aareschwumm.ch/video1.php
I don't know what to do anymore. Do you have any idea?
I am using the video background for the hero area of the homepage. While it loops correctly on all other browsers (Firefox, Safari, IE, etc.), it doesn't loop correctly on my Chrome (Mac OS). There is a solid minute of black screen between loops. Anyone encountered this and knows how to fix this issue? Thanks!
Honestly... its perhaps me, but I couldn't get it work fullscreen (last master repo).
More than that, when I got look at the produced HTML code, I was really afraid :
This code seriously embed one body tag inside one another body tag.
WTF !
Is it a bug from my use or it is just "normal". If normal, I would seriously advice users to not use this, this is totally nonsense.
Produced code :
Please provide a destroy method which will remove all bounded events and destroy a <video>
tag
I don't think the issue is with the plugin, but I've posted this issue with the theme authors and Stack overflow. Nothing, on either front. So, I'm hoping maybe you know something, because this is driving me nuts.
What I wrote on Stack:
I've already posted this on the theme's author support page. I haven't gotten an answer yet.
Video plugin: jQuery.videoBG
theme: Mercurial http://themeforest.net/item/mercurial-one-page-parallax-wordpress-theme/3505513
site: http://wearehmc.com/wordpress/
Right now, the site is set up with video as a background. I have figured that it’s not the plugin, but the theme because it works on the current site with a fixed navigation.
So, as I said the navigation header “unstickies” it’s self in Chrome, Safari, and Opera (there’s also some weird behavior too). I haven’t even tried IE … But really I’m not worried about IE, yet. There’s no weird CSS changes, or Javascript errors.
Now it might have something to do with it calling different videos for the different browsers, but as I said before, the static site that we have up at the moment works fine, and if I remember correctly Firefox and Safari support the same video format.
Oh, and when the navigation header is set to absolute there’s no weird behavior.
I'm trying to figure out if this is a html5 video bug, or a theme bug.
IE 10 does not play the video neither shows the poster image, but the page background.
Has anybody ran across this issue and fixed it?
Hi,
I want to use this plugin but there appears to be an error in the jquery.js 1.5.1 with it on line 16 "uncaught referenceError: selector not defined"... i just downloaded the zip to test out the demo's...
if i change this to the latest version of jquery 1.11.0, then the same error appears but in jquery.videoBG.js on line 20...
hope you can fix it...
-cheers
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.