No thumbnails for uploaded videos?

[LDDG]

Hello all,

Is it normal for any video uploaded not to have a thumbnail displayed?

[Ramsesx]

4 hours ago, LDDG said:

Is it normal for any video uploaded not to have a thumbnail displayed?

No, it should show a preview based on the content. Just test it here how it should look:

https://invisioncommunity.com/forums/forum/15-test-posting-messages/

[LDDG]

3 hours ago, Ramsesx said:

No, it should show a preview based on the content. Just test it here how it should look:

https://invisioncommunity.com/forums/forum/15-test-posting-messages/

I forgot to mention that this happens only when browsing on a mobile device. In desktop mode using a PC, it does show a thumbnail of the video. It doesn’t show a thumbnail in mobile view.

[Ramsesx]

4 hours ago, LDDG said:

. It doesn’t show a thumbnail in mobile view.

You are right. Maybe a bug. 

[Nathan Explosion]

1 hour ago, Ramsesx said:

You are right. Maybe a bug. 

You might want to research it a little more to - what device? What browser? What version?

The display of the video in a browser is down to what the browser wants to display. All IPS are doing is putting a <video> tag around the file and using native HTML5 to display the video, thus the browser is in charge.

The display of the thumbnail is 'controlled' with the 'preload' attribute of the tag, which has 3 options of 'auto' (which means download the file in full, ready to play), 'metadata' (which will download just enough to display a thumbnail and 'none' (which does what it says on the tin)

The default is 'auto', and because IPS do not use this atrribute on the tag then this default is in effect. As a result, the browser is then responsible for the display.

<video controls class="ipsEmbeddedVideo" data-controller="core.global.core.embeddedvideo" data-fileid="121990">

I've tested a video out just now, and the thumbnail displays fine on desktop and on my Android device running Chrome - all good.

If you believe it's a bug, log it with support - I'm happy to be wrong on this.

[LDDG]

2 hours ago, Nathan Explosion said:

You might want to research it a little more to - what device? What browser? What version?

The display of the video in a browser is down to what the browser wants to display. All IPS are doing is putting a <video> tag around the file and using native HTML5 to display the video, thus the browser is in charge.

The display of the thumbnail is 'controlled' with the 'preload' attribute of the tag, which has 3 options of 'auto' (which means download the file in full, ready to play), 'metadata' (which will download just enough to display a thumbnail and 'none' (which does what it says on the tin)

The default is 'auto', and because IPS do not use this atrribute on the tag then this default is in effect. As a result, the browser is then responsible for the display.

<video controls class="ipsEmbeddedVideo" data-controller="core.global.core.embeddedvideo" data-fileid="121990">

I've tested a video out just now, and the thumbnail displays fine on desktop and on my Android device running Chrome - all good.

If you believe it's a bug, log it with support - I'm happy to be wrong on this.

I've tried on my iOS device using Safari, Chrome and Edge. All 3 do NOT show a thumbnail for the embedded video. On my desktop PC, using Chrome and Edge, the thumbnails do show. The issue is with mobile view.

Maybe IPS should include an option to allow us to choose the default behavior of the video embeds? Allow us to use Auto, Metadata or None?

[Nathan Explosion]

2 minutes ago, LDDG said:

I've tried on my iOS device using Safari, Chrome and Edge. All 3 do NOT show a thumbnail for the embedded video. On my desktop PC, using Chrome and Edge, the thumbnails do show. The issue is with mobile view.

If you are insisting on this being an IPS issue then (if you have not already done so):

3 minutes ago, LDDG said:

If you believe it's a bug, log it with support - I'm happy to be wrong on this.

 

[LDDG]

2 minutes ago, Nathan Explosion said:

If you are insisting on this being an IPS issue then (if you have not already done so):

 

What's wrong with asking on the forums as well? That will be the first suggestion from IPS via a support ticket anyway. I never said it was a bug. I'm just asking if this is normal and apparently it should not be.

[Nathan Explosion]

2 minutes ago, LDDG said:

What's wrong with asking on the forums as well? That will be the first suggestion from IPS via a support ticket anyway. I never said it was a bug. I'm just asking if this ir normal and apparently it should not be.

Nothing is wrong - who said it was?

All I'm suggesting is that you log a ticket - get an official response. This is peer to peer and I'm helping as much as I can....and I'm helping more now by testing on iOS for you. Feel free to ignore my advice, but all I'm doing is providing 'peer to peer technical support'

[LDDG]

4 minutes ago, Nathan Explosion said:

Nothing is wrong - who said it was?

All I'm suggesting is that you log a ticket - get an official response. This is peer to peer and I'm helping as much as I can....and I'm helping more now by testing on iOS for you. Feel free to ignore my advice, but all I'm doing is providing 'peer to peer technical support'

Like I said, I never said it was a bug. I am just asking if it was normal and if anyone else is experiencing it. I appreciate your help in helping determine if it's an issue that needs to be reported or not. Thanks!

BTW, I already opened up a ticket with IPS =)

[Nathan Explosion]

I'm leaning towards iOS issue on this one - historically, Safari has had issues with this and requires the use of the 'poster' attribute to work around it. Just testing something out on Chrome now...

Yep, iOS specific issue, nothing to do with IPS at all....

Go to https://test.ynwa.tv/video.html - same video set to display twice. One normal, doesn't show the thumbnail....the other uses the 'poster' attribute to overcome the issue. 3rd video is hosted from same domain as the html page....so rules out cross-domain issues.

It appears that Apple pulled support for the 'preload' attribute on HTML5 at some point, which means that the browser cannot download the file's metadata regardless of the value being set to auto or metadata, and therefore cannot display a thumbnail because it cannot obtain one. (Nice work Apple)....hence why the poster attribute has to be used. But that behaviour was relaxed in later iOS versions https://webkit.org/blog/6784/new-video-policies-for-ios/

[LDDG]

19 minutes ago, Nathan Explosion said:

I'm leaning towards iOS issue on this one - historically, Safari has had issues with this and requires the use of the 'poster' attribute to work around it. Just testing something out on Chrome now...

Yep, iOS specific issue, nothing to do with IPS at all....

Go to https://test.ynwa.tv/video.html - same video set to display twice. One normal, doesn't show the thumbnail....the other uses the 'poster' attribute to overcome the issue. 3rd video is hosted from same domain as the html page....so rules out cross-domain issues.

Cool, so there is no workaround for iOS users?

[Nathan Explosion]

1 minute ago, LDDG said:

Cool, so there is no workaround for iOS users?

I've got an idea....trying something out now ?

[LDDG]

@Nathan Explosion When I open that test page you posted using my iPhone, the second video does show a thumbnail. The one labeled “with kludge”.

[Nathan Explosion]

I know - hence why "with kludge"....I've forced it to work using the attribute I mentioned (poster)

 

[LDDG]

Just now, Nathan Explosion said:

I know - hence why "with kludge"....I've forced it to work using the attribute I mentioned (poster)

 

? I wonder if that arrtibute can be forced via custom.css? Just thinking out loud lol

[Nathan Explosion]

No, because it's not css, it is html.

Take a look at my test page now...the 4th video now displays the first frame of the video ?

[LDDG]

2 minutes ago, Nathan Explosion said:

No, because it's not css, it is html.

Take a look at my test page now...the 4th video now displays the first frame of the video ?

Yup! ?? We are almost there, buddy!

[Nathan Explosion]

2 workarounds now figured out - I'm going to be putting one of them (likely the first one) in to my HTML5 Audio/Video player plugin.

[LDDG]

21 minutes ago, Nathan Explosion said:

2 workarounds now figured out - I'm going to be putting one of them (likely the first one) in to my HTML5 Audio/Video player plugin.

Sweet! Looking forward to the workaround, so I can implement it on my site. ??

[LDDG]

Hi @Nathan Explosion... Any more updates on the workaround?

[Nathan Explosion]

Hi @LDDG - no. When it's ready, I will release my updated plugin....no sooner.

[LDDG]

18 minutes ago, Nathan Explosion said:

Hi @LDDG - no. When it's ready, I will release my updated plugin....no sooner.

Plugin? So the workaround is a paid one?

[Nathan Explosion]

Sheesh....can you just sit tight and see what I actually put out, please? All will become clear if I can just get on with it...

[Nathan Explosion]

I've added a workaround for this behaviour to my "(NE) HTML5 Audio/Video Player" plugin...

Howver, if you don't wish to use the plugin then the workaround can be implemented with the following template modification

Edit core -> global -> editor -> attachedVideo
Add the following at the beginning of the template:

{{$autoplay = '';}}
{{if(\IPS\Http\Useragent::parse()->platform === 'iPad' OR \IPS\Http\Useragent::parse()->platform === 'iPhone')}}
{{$autoplay = 'autoplay="true" preload="metadata"';}}
{{endif}}

Modify the following line:

<video controls class="ipsEmbeddedVideo" data-controller="core.global.core.embeddedvideo" data-fileid="{$id}">

to:

<video controls class="ipsEmbeddedVideo" data-controller="core.global.core.embeddedvideo" data-fileid="{$id}" {$autoplay}>

Note: this template modification is not backwards compatible to already uploaded videos - my plugin will assist with that.

If you don't want to use my plugin to assist with that either, then you will need to edit the post containing the video and remove the existing embedded video (not the attachment...just the embedded video) and re-embed the video by clicking on the attachment to put it back in.