vodkabears / vide Goto Github PK

I see in your code that autoplay is being detected by way of the user agent string. A more comprehensive way of taking care of the check is documented here:

http://codepen.io/davidgenetic/pen/FmHaD

Basically, it adds an additional test to Modernizr.

This doesn't affect anyone that would be deploying Vide on a live server, but for people that are developing locally, jQuery throws the following error when the resource is on a URL with a port number. (ie http://localhost:4567)

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4567/[object%20Object].gif
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4567/[object%20Object].jpg
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4567/[object%20Object].png
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4567/[object%20Object].jpeg
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4567/[object%20Object].mp4
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4567/[object%20Object].ogv
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:4567/[object%20Object].webm

After the still image is loaded, it will turn into black color background and wait till the video is playing. But for other browsers, its working fine.

The video i'm using is around 10.9mb. Should i use a smaller size to eliminate the black color background?

Hello,

I am trying to create an audio toggle button for my background video using your plugin. Using methods such as

.prop('muted', true)

and

.setVolume(0);

and

.mute();

via an onclick function but no joy. Any suggestions to help me along the way?

Internet Explorer 8 sends Error and quites complete. Could you provide a fix here, so IE8 would show the jpg File which is provided as Background-Image for that div.

Many of our Clients still using that shitty browser or have to use it.

-Domtaholic

Just because I know this will come up within 30 seconds of demo.

Is there an "easy as hell" solution for changing the still image every few seconds on the mobile version? Even though it's almost 2015 and we generally hate sliders, that one sliver of the old tech can be useful for simulating this particular experience in still frames.

Just wondered if you built it in.

Vide is super easy to set up. Thanks for that. I was looking at my "Network" tab in the developer tools in Chrome and I noticed that looping a video was causing the constant network traffic at the end of each loop. It's wasn't caching the video like I expected. Can you shed any light on why this might be happening?

Hi,
I love this plug in! When my page loads I see a quick white flash before the video starts. It appears that the poster is showing, and then the background is white, then the video starts.

Do you have any suggestions as to what might be causing this or how to stop it from happening? We are using jquery.1.11.1.min.js and the latest jquery.vide.js

Sample: http://fok.getinfopage.com/index.html
body tag:

I also see it at http://vodkabears.github.io/vide/ (though the background is dark gray rather than white) so perhaps it cannot be avoided.

Thanks,
Frederick

The title says it all. The screen is blank and the fallback image doesn't display when viewing a page with the plugin on iOS when Vide is targeting a div. I pulled up your demo on my iPhone and the fallback image is working fine on the body. Any ideas?

The Issue
Old versions of IE (8 and below) error on the video script

Steps to reproduce

1. Add video to an element
2. Open in IE 8 (or emulated, see notes)
3. Site-breaking error occurs

What should happen
Auto-detect browser agent and fall back to a still image in unsupported versions.

Additional Notes
I was about to write a conditional into my jQuery to avoid throwing this error but it should really be part of the base script. IE11 finally includes an emulation mode for older versions (F12 > sidebar > last item in scroll) so it should be fairly straightforward to produce.

Hi and thanks for this nice plugin. I was wondering if there was a chance to see something like this: posterType: "none" in the future? I'm using Vide within a WP theme and I want to make it easier for the user to select a BG-img and a video. The issue here is that both need the same name which makes it more of a pain for the user to set up. Thanks.

First off, I love this plugin.

SO, Firefox and WebKit browsers do not play a background-image GIF animation again once it has played once without reloading. Would be good if you treated the gif like you do the video and force it behind with position absolute. I'll have to do this manually until this is fixed.

Cheers and Happy New Year!

The poster image doesn't show. Well, let him be apart But for 2 milliseconds xD
I need a fix.

may be helpful to see a comparison in the readme

http://dfcb.github.io/BigVideo.js/

HI,

I am using this plugin in a template which is going to be a WordPress Theme. Now the issue is WordPress don't have folders and your plugin didn't work with it.

Thanks

How play the video by clicking a URL?

For some reason, and one I can't figure out, I'm getting a 'jquery.vide.js:174 Uncaught TypeError: undefined is not a function' error with this plug in. Any ideas? I'm initializing it like this:
<div id="video" data-vide-bg="mp4: Video/IndexVideo, webm: Video/IndexVideo, ogv: Video/IndexVideo, poster: Video/IndexVideo" data-vide-options="position: 50% 0%">
and
<script> $('#video').vide({ playbackRate:1, muted:true, loop:true, autoplay:true, posterType:"detect", resizing:true }); var instance = $('#video').data('vide'); $(window).resize(function(){ instance.resize(); }); </script>

Hi,

Great plugin, only problem I have is that my video is not looping. I added data-video-options attribute and set loop to true, but still no loop. Did I forget something in the code?

Regards,
Ali

Implementation of this plugin is great. However, the background does not scale or cover correctly. If a page is larger than the aspect ratio o the video, the page will break and a gap will form between the video and content. Any ideas would be helpful.

Hi, is there a way to set the start and/or end playback time?

Where download some videos?

Hello!

Have a small question about this plugin - how I can detect video onload event(or canplaythrough, or just when video starts playing), for use in page preloader to avoid white flashes, delays and etc.

Works great on Opera, FireFox, Chrome and IE (latest versions) but doesn't work on Safari at all. What video format would solve the issue? I have mp4, webm, and ogg file formats. What do I need to add to get it working on safari?

Great tool by the way!

Perhaps its blatantly obvious, but I think It should be noted somewhere in your docs that setting the background color property on the div which contains the video will prevent the video from being displayed :)

Excellent script!
But I'm trying to add a play / pause button, is it possible?

When I want to use video background and I didn't upload some type of file ( .jpg, .png ,....) .
There is some bug notification on browser dedug.
Please help me.
Thanks you !
Jack Bui

In grunt wiredep, is injected jquery.vide.js and jquery.vide.min.js. Any help?

So I am using this plug-in for a site, and it works great. I have a few videos embedded in modal boxes and I am looking to pause vide while the modal is open. Is there a function that pauses vide that I can implement when the modal box opens?

This is working fine uness I navigate away from the page where the video is, and then return by using he back button, the video is gone.

Refreshing brings it back. Also linking directly to the page seems to work fine as well.

Safari seems to be the only browser affected.

Is't possible to use a youtube video?

None of the sample code supplied works 👍
The path you are trying to load jquery from does not exist in the project (404 error)

Also you have included JQuery twice - once in HTML, the other you are adding via Javascript - why I have no idea.

Honestly, why bother supplying untested, non working code for a project that would never do what you said it did anyway?!

Is there a way to Pause/Stop/Play the video on a button click via jQuery?
Any instructions?
Thx

Typically you'd only need one type of fallback image, so you'd never need to load multiple formats (plus it's unlikely anyone would save out multiple background formats for the same poster image).

Ideally you'd want to pull whatever poster image source format is specified and load only that one, regardless of the extension, so Vide doesn't try to find and load images that don't exist.

I've tried following your doc's but I'm still struggling with how to get the video to resize to the width of the containing div as it seem's height is the default method.

Please can you point me in the right directions

i saw at the notes that video is iOS is disabled, is it possible to enable it ?

Hi there,

Great plugin, but I can't get the video to auto play. I'm using the following jquery:

                $('#Home-Slide-Video-1').vide({
                    mp4: 'http://tendril.ca.s3-website-us-east-1.amazonaws.com/Assets/Media/Tendril-Splash-Video.mp4',
                    webm: 'http://tendril.ca.s3-website-us-east-1.amazonaws.com/Assets/Media/Tendril-Splash-Video.webm',
                    ogv: 'http://tendril.ca.s3-website-us-east-1.amazonaws.com/Assets/Media/Tendril-Splash-Video.ogv',
                    poster: ''
                }, {
                    volume: 1,
                    playbackRate: 1,
                    muted: true,
                    loop: true,
                    autoplay: true,
                    position: '50% 50%',
                    //posterType: 'detect',
                    resizing: true
                });

                var video = $('#Home-Slide-Video-1').data('vide');
                var videoObject = video.getVideoObject();
                //videoObject.resize();
                //videoObject.play();

                console.log(videoObject);

With the following HTML:

<div id="Home-Slide-Video-1" class="Home-Slide-Media"></div>

in Firefox 15 or older transform is not supported without vendor prefix. the video is located in wrong position even on your demo page. Solution: just add '-moz-transform': 'translate(-' + position.x + ', -' + position.y + ')',

Hello, First I want to say that I think this is really a super cool jquery plugin! but I run against a thing. how can I get the video 100% wide and 100% make high without scrollbar.
Greets juul

I notice that if I try to reference a video with an absolute URL, it seems like it won't load. Is there something I'm doing wrong?

Hi,

I have seen in you (source) transform: translate with top/ left 50% why do not set top let to zero ?

I dont see any way with this plugin to make a play/pause button.

Any documentation on how to implement that?

is there a possibility to use videos from vimeo or youtube with this plugin?

Thanks!

The vide destroy() method throws an error when invoked dynamically on mobile Safari iOS7:

TypeError: 'undefined' is not an object (evaluating 'this.video.unbind')

...and references line 276:

this.video.unbind(pluginName);

Commenting this out solves the issue, so I'm not sure if it's a syntax error somewhere or if it can just be removed altogether.

PS -- This is the only reliable video background plugin out there. Nice job!

When i check on my ipad and Nexus, it is not showing the video background?

Does it only work for desktop version? or is there a way to tweak the code to compatible with tablet user.

thanks :)

working great, except we'd like to load the video from amazon cloudfront and when I provide an absolute URL the plugin gets super confused by the http:// at the beginning...

Is there away that maybe you could add the ability to select between different videos maybe like 4 or 5 different videos

I'm sure I'm doing something wrong, though I wanted to ask about it. I'm trying to add the video within Slick slider http://kenwheeler.github.io/slick/. It's working fine except I'm stuck on getting it to properly fill the height of the div - likely because the height dimension is set as fixed. Tried adding fitvids.js to see if that would work better but still stuck on getting it to resize proportionally with the slider in different screen resolutions. Here's an example I'm referring to: http://look.wpengine.com/.

And I'm not sure where to add the poster image?

Thanks!
Justin