HTML video in popup box randomly plays/doesn't play in Chrome

Question

This will once again be one of those question there's probably no answer to, but I'll try it anyway.

I created a custom WP plug-in that takes a folder name and outputs all videos inside the folder as images, which when clicked make a video pop-up. The video has custom controls (only play/pause and mute) and I'm using fancybox to make the video pop-up.

Everything works reliably in Opera and Firefox. The video doesn't bother playing in IE9 and, what's most annoying, it sometimes plays in Chrome and sometimes doesn't. (btw Safari won't even pop-up, no idea why).

The plug-in is quite a piece of code, but the end result is a bunch of links with an image inside and a hidden div that contains the links relevant to the current video. Then there's the video container, which is the code for the pop-up. Upon clicking one of the links, the src of the video is swapped for the one that is in the hidden content of the link.

It's quite hard to explain, so please have a look at the code on the website: http://londoncreativedigital.com/downloads/creativeshowcase/

If you're still reading, here's the plug-in's code https://github.com/marian-cerny/simple-video-embed

Video playing/pausing is handled in assets/player-controller.js.

I would greatly appreciate any help. I just can't logically explain what can be the reason for this. I tried to debug the JS, but couldn't come up with anything. For a second I thought that adding a webm video would help, but it doesn't. It behaves the same way, even after adding a webm and removing the mp4 version. (tried on localhost, the online version doesn't have the webm vids).

Answer 1

You hardly ever need to blame your markup or javascript, suppose there is something different than this. I've been it such situations couple of times. All right, here is what I did.

1. opened video directly in chrome and FF.
2. open the developer bar on both, and look up the net(network) tab, where you suppose to see headers and other loading information.
3. in my case here is only one request in FF, and multiply from Chrome and there is canceled or pending only.
4. tryed the same with ogg clip, it is good in FF though chunked, and bit better in Chrome, part of requests are in pending, part canceled and fiew is good.

What could be wrong here, all right, as I said I do have similar problems in the past, I worked with professional movie maker, who do very good with all that codecs stuff. I just showed him perfectly working mp4 video from the videojs.com and he fixed his somehow by changing encoder or something like this. Unfortunately, I could not connect him how and ask, but probably it gives you some ideas. Please whenever you will be able to solve it, update status over here, I was bit intrigued all that times but had no chance to resolve my curiosity.

Your video was only once worked for me, but I am not sure if it was mp4 or ogg at that point. Also I am on win7 with latest Chrome and FF.