Mobile and HTML Poster.

[Alex King]

Howdy,
First off freak amazing plugin, absolutely love it!
Do you offer support for the poster Attribute on video?

I was having issues with the canvas being invisible until i press play or hovered to play so i just added poster to displayCanvas = $('',{'class' : 'seeThru-display poster '})so in the css i could add a poster but I might have missed a better way of doing it?

First of your plugin works in all the browsers 💯 which is amazing no issue there. I am having trouble with mobile browsers which are ment to have canvas support.
Mobile Safari, single frame but audio
Android doesn't display at all.

I have a minor fix which just checks if its mobile and skips the script so normal video comes through. Is there a better way of doing this as well?

Thanks again for making such a great script

[Frederik Ring]

Hey, thanks for the input, I noticed issues with video not being displayed in the newest versions of Chrome actually, all other browsers seem to work fine. Most of the time you can also fix things like this by forcing a repaint like: vid.play(); vid.pause();. I'll have a look at your poster fix in the evening, sounds interesting to me. Can I just look at the commits in your fork?

Mobile detection also sounds interesting, yet I haven't found a solid way (ie. feature test) yet to find out if the canvas can access the video (i.e. on iPad both video and canvas are perfectly fine, yet they cannot interact). If you do know of feasible way to detect this I'd love to implement a hook for a fallback (you could also specify a spritesheet animation or whatever as fallback).

Thanks for contributing!

[Alex King]

Everything ive done is pretty simple im rather new to js and canvas.
The commit is nothing special it simply adds an extra class called poster which i've styled in my project. I will look into a more scalable solution like creating a background attribute on the seeThru display from the video poster value or creating a unique poster class based on the videos id.

The detection i've used is the just the default if (mobile) sort of thing, nothing as complex as tag support. which im happy with this for now, I might just use the same code to switch out the version version with alpha in the video tag.
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/android/ig))) {
var phone = true;}
if (phone != true) { //seeThru }


tomorrow ill try moving this onto a domain i can show you so you can have a look at what my code is doing.
Thanks for the help! ill keep you posted on the project

[Frederik Ring]

Hi again!

So regarding the feature testing I was thinking that maybe one could implement a very small (single frame) base64-encoded video into the plugin that is then used for testing purposes. But then again iOS could ruin everyhthing by not letting the video playback without user interaction. I'll give it a try on the weekend though! I'll let you know the results.

The idea of having a posterframe option sounds good to me, I guess I'd just do it in a way that the user can (doesn't have to) pass an img that is shown when the video isn't playing. What do you think of this?

[Frederik Ring]

Howdy,

I just implemented the poster frame option the way I think it should be done, you can find it in the wip-branch: https://github.com/m90/jquery-seeThru/tree/wip - didn't test it too thoroughly yet, so any feedback is welcome!

Usage is as following:

$('#vid').seeThru({
    'poster' : true
});

The image will be sourced from the video's poster-attribute.

[Alex King]

Cool , I'll have tonight lunch if I can. Cheers!
UPDATE: I tested it on my project and thats exactly how i wanted it to work, fantastic.