*warning*! adult website!
I'm using the tooltips in JWPlayer 6.8, but they don't seem to be properly aligned. I use a VTT file, the thumbs are generated, and the timing seems to be ok, but the thumbnails are slightly moved to the right of the 'wrapper' (the gray area with the current time stamp in it). Tried with Chrome and IE, both show the same problem...
Please put up a (safe for work) test page.
I created a work-safe video. Just don't click the links in the header and you'll be safe. The video is the same as used on samples on this site, so there shouldn't be any problems.
http://video.thehun.net/video/250 is the link
as you can see the graphics in the scroll-bar are all wrong, and the tooltips don't look ok either. I think it has to do with the way I'm scaling the video, but I want the video in the scale it's showing (responsive design). Thanks for your assistance!
I have a safer page for you with far less code on it to make it a lot easier to pinpoint the problem. I too a video from the web (http://clips.vorwaerts-gmbh.de/VfE_flash.mp4) and generated a VTT file for it (//thumbs.thehun.net/video/2014-04/250533d24fe409be_proverb.vtt), along with a montage to show as tooltips (you can get that info from the VTT file)
the file is at http://video.thehun.net/test.html
deleting the code to make a clear example I found that if I remove the Bootstrap 3.0-link from the example it works. So it seems to be the mere including of bootstrap 3.0 that messes up the player (I'm not even using the responsive design in this case!)
Ok, made two examples that are not even on my own server, using JSFiddle, the first is just the player with tooltips loading off my own server:
http://jsfiddle.net/P9eJK/
the second is the exact same code with one difference: Bootstrap 3.0 is included as well. No other changes are made to the code:
http://jsfiddle.net/P9eJK/1/
as you can see the tooltips no longer look good in the second sample. The thumbnail itself extends outside the gray area reserved for it...
Yeah, so it seems like using Bootstrap + HTML5 mode + thumbs, has this issue, then.
yes, indeed...
There has to be some css/js clash then between bootstrap and our html5 player.
indeed, that's what I figured... so... what can be done about this? Bootstrap 3 is widely used as well as JWPlayer... but right now the layout of the player isn't good enough for me to launch what I want...
The easiest fix without diving deeply into what the clash is, would be setting primary = flash
Flash is no option... that's the reason I went with JWPlayer. I want to be cross-platform, Android, iOS, Desktop, everything... unfortunately that means no flash. The whole point to Bootstrap 3.0 is mobile first, so everything has to be as compatible as possible...
But there must be other webdesigners running JWPlayer under a bootstrap 3 design. Just tried it with the latest version of Bootstrap 3 (3.1.1), same problem. I can't imagine I'm the only person that bought JWPlayer and uses Bootstrap 3 for responsive design.
This is actually the first we have heard of this.
However, you can set flash to primary and it falls back to html5 on desktops (what jw5 did).
Tried that... layout looks better indeed, but the video isn't playing right away... very slow... Seems to download the entire clip, which is going to take long for a 23 minute video...
the problem class is jwoverlay. Just removing the padding from that already makes it better... I think the image should be scaled... looking in your code now how to do that...
I must say though that this is a bit weird... you have the people there that made this player, they probably can fix this in 5 minutes, especially with the provided JSfiddles...
it's the DIV #mediaplayer_controlbar_thumb. the style of that is reset to 160x90 pixels with every move of the mouse. the problem is that the framework around it, with borders and such to make it looks nice, is 160x90 pixels as well with a padding. Meaning the extra divs that make the thumb look stroked don't line up with the original since that's now too big... should be an easy fix...
Don't know why this only manifests itself in bootstrap 3, but since it's no static setting, but something that seems to be re-caclulated by your player I can't change this setting myself...
The issue with the entire file needing to be downloaded can be fixed with this tool – http://renaun.com/blog/2010/06/qtindexswapper-2/
this seems like an interesting app with one down side for me: I don't host the videos, so re-indexing them is no option...
I still believe the 'real' problem is the player itself... the CSS in it is clashing with Bootstrap 3.0. It's a bit weird to push away from HTML5, which everybody is heading that way. I'll try loading the player in an iframe or something, to see if that fixes it.... or find an alternative player. My player doesn't look right now, and I bought a licence 'cause this one supports HTML5 which is widely compatible with just about anything that plays video, kudos for that, but to push Flash in 2014... nah... that's so 2010 :-)
Yes, I would see if trying an iframe works.
