Making yor plugin work with all browsers that use flexible width themes.

p.s. The ideal solution here is to always specify a dummy poster placeholder if the user does not specify a poster image. This will make your video player bullet proof.

Also, im not sure that you even have to specify the height as “auto”.
as long as you specify a poster image and set an initial dimension, you can then use CSS styles with flexible width markup.

I am certainly willing to believe that I haven’t cracked the fluid-width problem. It has to work on so many different themes and browsers that all work just different enough to break in a million different ways. I won’t be able to try anything out until tomorrow, but if you’re going to work on it today I want to point out a few things you could take a look at it.

Because I don’t trust every browser to get it right through CSS (and maybe I just hadn’t hit the right code yet) the plugin makes a pretty good effort to resize the video player through JavaScript as soon as the Video.js “ready” event is fired. The kgvid_setup_video() function runs and adds the title and watermark overlays, and then it runs the kgvid_resize_video() function and attaches that function to the resize event in the browser to catch any future changes in size or orientation.

It took me some time to figure this out because it is the last place I would look, but your previous changes to the Video.js CSS file prevented the Video.js “ready” event from firing in Firefox (at least it did on my computer) which is why those changes were not inconsequential and made it difficult for me to figure out the problem.

When it does work, there can be a delay in the resizing because it doesn’t fire until the player has been set up. This is more obvious in Firefox because it’s loading the Flash player to play the H.264 video. If you have a WEBM or OGV source it tends to be almost instantaneous, but that varies depending on what else the page is loading. I imagine that some implementation of your ideas could make that happen immediately.

One question I want to get to the bottom of is why the kgvid_resize_video() event isn’t firing in that screenshot you made. Is that IE? Or in your Android browser. It has worked on other pages that I’ve tested on my Nexus 4.

ok, understood about the css changes, sorry. I didnt expect CSS to cause any issues, I was talking about the plugin source files, but i guess CSS is also part of the source.. anyway.

All i can tell you right now is that the implementation and setup of the video tag is no small matter. I fully understand this because I myself have spent about 2 weeks total of R&D. I am not even 100% sure how it works to be honest, I can only offer conjecture. What i do know is that I have tested this implementation across many platforms and versions and so far, all major browsers work fine.

Maybe my particular install of IE has something fishy about it. Maybe its also my phone acting up, but i work from office and home and both computers exhibit the same issue with your plugin. I know that IE has alot of security features built in that prevent the execution of code across domains or code that may be used to exploit the browser. Bottom line, IE has tightened security up after all the criticism to the point of being the most finicky browser to tune for. The solution taht I offer is tried and tested. Feel free to look at my front page with other devices and let me know if you see any problems, maybe i myself have missed things that you specifically have adressed too.

And dont sweat the timeliness of updates, its not mission critical. I will of course work on this problem as well and share. I am waiting on my host to install ffmpeg so the pages we are looking at are locked down anyway.

thanks again for your awesome tool. I have some ideas on extending its functionality to suit my needs and will be happy to share them with you. Im making a production management tool for visual effects and design projects, so its important to have powerful preview and versioning features ??

Dear kyle, I am happy to say that i have a proof of concept working.

the problem ended up to be your SWF fallback player.

i didnt integrate this fully yet, as you have lots of aniciliary code surrounding your embed, but this should give you a good start:

https://www.hihandsome.tv/the-well/0165/

login test:test

thanks!

Here is the modified php file:
https://www.stooch.tv/outgoing/MISC/video-embed-thumbnail-generator.php.zip

the gist of the fix is: I look to see if there is a poster image added, if there is no poster image, i refer to your “nothumbnail.jpg” as fallback, so that there is ALWAYS a poster included with the video tag. This ensures that firefox and ie load the proper size on startup. Im not 100% sure that you have to set the height to “auto”, maybe setting the actual size is better? on load, the CSS markup will override the poster video size anyway. I also stripped all of your CSS formatting for now, currently I have a site wide theme CSS that has the following video tag:

object, embed, video{width: 100%!important; max-width:100%; height:auto;}

please search for “stooch” and you will find my markup.
i did not erase any of your original code, just commented it out.

I trust that this will be self explanatory.
thanks!

one more thing, i am using the tinymce fallback flash player that comes with word press core install.

I think requiring a poster image is going to be useful, assuming I can make it work with other aspect ratios. That will probably require resizing the nothumbnail image through PHP before it’s loaded if I have the video’s actual aspect ratio. Luckily version 3.6 of WordPress is going to give me that information for every video that’s uploaded.

Just so we’re clear, in addition to removing the CSS styling, you’ve disabled the Video.js player which is not just a Flash player. It’s an integral part of my plugin. It’s an HTML5 video player with a unified API and a Flash fallback which keeps me from messing around with the inconsistent browser implementations of the HTML5 video APIs and does some feature detection to determine which source files to play if for example there are multiple H.264 resolutions in the <source> tags.

I have been convinced from your first post that auto-resizing would work with your code as long as I wasn’t using the Video.js player. You demonstrated that clearly with the player on your homepage. In last year’s version of this plugin I had the occasional unstyled player that resized itself automatically and the Strobe Media Playback Flash Player handles it pretty well too. I will consider adding a no-frills “browser player” option since that could be useful to some people.

The resizing problem I’ve been trying to solve for the past six months is connected to the way Video.js rebuilds the <video> element. The video element is placed inside a DIV which does all the sizing and removes the sizing information from the <video> element. As you know, without any extra work that means the video player never changes size because the DIV’s size has been fixed. I have a method in place to deal with it that works on many other sites. Since you presented a case where it wasn’t working I am still trying to determine why it doesn’t work on your site. This is not about second-guessing you. I want to get to the bottom of the problem you were having in IE when the Video.js player was loading but not resizing, because when everything is working correctly it is supposed to resize on load. It might be connected to not having a thumbnail. I might have to change the Video.js output ahead of time instead of after it loads. That will probably require messing around with their plugin system and since they just released a new version for the first time in a year it’s not very well documented so I would really prefer to find the reason that IE is not firing the resize JavaScript function.

I have to be careful about any changes I make to the player since I have to support a lot of diverse needs. I personally can’t stand the look of the browser players and for a lot of users it’s important to present a unified look. Many users don’t want their videos to fill 100% of their container either. Video.js provides a lot of other benefits that help me out enough that it’s worth the hassle of dealing with resizing.

Yeah that makes sense I know you had alot of functionality in there. Also the problem I was having wasn’t just ie. It was also Android browser too! I must have support for mobile because many directors use tablets and smartphones. Im not quite satisfied with the way my hack is working at the moment anyway. There are weird problems with rewinding and looping. Like a delay or stutter. So I will keep researching this as well. I will cintinue sharing my progress with you. It’s a tricky problem. P.s. I dont think you need to make custon aspect ratios with php. I have a hunch that if you specify a width and height, the auto css rescale will maintain that ratio. I will test further.

I’m working on a reconstructed version of your video page as it would be if the unmodified plugin were generating the code and I think I’ve managed to narrow it down to a conflict with css3-mediaqueries.js which appears to be loaded by your theme.

Removing this code from the page is making it work for me:

<script src="https://www.hihandsome.tv/wordpress/wp-content/themes/good-minimal/js/libs/css3-mediaqueries.js" type="text/javascript"></script>

Can you do me a favor? Can you back up your custom version and try loading up the unmodified plugin and also temporarily disable loading mediaqueries.js? It’s probably in your theme’s functions file.

Brilliant. I will shoot over to my office and try this asap. This may explain the rewind isses too. I have been thinking of stripping the theme im using as a base anyway.

you are a genius. it works.

one question about your player, I notice that it has problems rewinding a video? alot of the videos i post are really short and need to be rewound alot of times, there is a weird pause and often i have to click play a coupel of times to recycle the videos? are there some flags i could set or caching to enable?

That’s great!

If you were also having that rewinding problem when it was just the stripped-down player, then it’s most likely the browser having trouble with the video file. My first guess is to try lowering your H.264 profile. The video we’ve been working with is High profile at Level 5.1, which is fairly complex for web video. I would be surprised if your Android device could play it at all. I find that they are more picky than anything else. Much worse than IE. Officially Android only supports up to Baseline profile and my Nexus 4 tends to choke on most things outside of that, but different devices add on support for different levels. What program are you using to make your H.264s? I highly recommend Handbrake, which I’ve only just started using. For many years I was using Apple’s Compressor, but Handbrake gives you fine control that the professional tools often lack.

my device is a galaxy note 2. this little bastard can stream 1080p hd over 4g ??

but yes, as soon as my host gets me on their ffmpeg enabled server, the goal is to use your conversion tools ??

I use premiere to output to H264, it works great for me. I also have a shell integration of ffmpeg into windows interface with custom right click menus. I do alot of production conversions with that as well, maybe i can even figure out how to do a conversion locally and then automatically upload to my server.

ok, so I killed off media-query and going to just embed it into my theme manually, i really want to have orientation detection for my devices.

I guess ill have to tune it so that it doesn’t interfere with your player.