Psychoanalytic-Electronic-Publishing / PEP-Web-User-Interface

Single Page App Graphical User Interface for PEP-Web
1 stars 0 forks source link

Missing Thumbnail For Videos in the Infocards #417

Closed nrshapiro closed 3 years ago

nrshapiro commented 3 years ago

When we show a video from Wistia (e.g., see the top right info box on the site), it shows the thumbnail preview we select when we create the video.

The videos from S3 though, used in the infocards, while they work for captions, they do not show the thumbnail. I search the issue on stackoverflow, and there's discussion of several ways to show it (https://stackoverflow.com/questions/20075875/how-to-set-the-thumbnail-image-on-html5-video)

Then the question is: Can you read the embedded thumbnail? The first frame is unlikely to be as interesting to us as a preview, though if that's the easiest, we can try it.

If not, what is the easiest way we (meaning the non-techie "administrator" who will be setting the video up in the Admin interface) to get the thumbnail to show. I could of course load a sidecar file to specify it however we need in the S3, or the png file with a matching name, so you can configure it as the poster parameter per the accepted stackoverflow answer.

bakerac4 commented 3 years ago

@nrshapiro It seems like the two best options are

  1. use the first frame as the thumbnail
  2. you to upload a thumbnail image when you add the video to s3

For 1) it will happen automatically so thats nicer for you but you don't have control of what displays. Item 2 would give you specific control over what shows. I would probably recommend 2, but its up to you!

nrshapiro commented 3 years ago

@bakerac4 @adistasio

Some questions below, however, I have noted as of this morning the videos on the front page aren't working at all. Not only no thumbnail, as there was before...no video. Something has changed.

RE the video thumbs, questions:

  1. Is it possible to set it to #2, but have the system fall back to #1 if there's no thumbnail image provided?
  2. Will it detect thumbnails automatically, or do we need to configure them, e.g., in the .vtt file?

I do have thumbnails in S3 currently, but not configured anywhere, and they are not showing on the site.

PEPTOPAUTHVS.001.0013A.preview.jpg PEPTOPAUTHVS.001.0013A.preview.mp4 PEPTOPAUTHVS.001.0013A.preview.srt PEPTOPAUTHVS.001.0013A.preview.vtt

This slightly different context comment was handled in #419 (testing error likely)

3.  Also, I was just experimenting since the videos weren't working: is this case sensitive?  They were uppercase as shown below, but the URL is of course lower case in the Admin:

https://pep-web-video-previews.s3.amazonaws.com/peptopauthvs.001.0029a.preview.mp4

So I tried making it lower case, but it's still not working.  So obviously something else is wrong.
bakerac4 commented 3 years ago

@nrshapiro I will add both. However I don't believe the fallback of #1 will be useful from the videos I have seen. It uses the first frame which is usually just black, or white as the videos seem to fade in.

nrshapiro commented 3 years ago

@nrshapiro I will add both. However I don't believe the fallback of #1 will be useful from the videos I have seen. It uses the first frame which is usually just black, or white as the videos seem to fade in.

@bakerac4 Great. I noticed on S3 I had one thumb in JPG and others in PNG. Does it matter to you? Are you checking for both, or which?

bakerac4 commented 3 years ago

@nrshapiro I used jpg as that was in the example.

nrshapiro commented 3 years ago

@bakerac4

First, I do see the video "cover image" on the infocards.

But I'm trying to see exactly what users see when I'm logged in with an account that does not have content privileges. In other words, we are in preview mode.

I go to here: https://pep-web.rocks/search?preview=PEPTOPAUTHVS.001.0013A

I see a blank screen, but the preview is available. This is likely because the videos fade in. Which is why we wanted the cover image/frame.

The jpg is available:

profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0013a.preview.jpg profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0013a.preview.mp4 profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0013a.preview.srt profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0013a.preview.vtt

Why doesn't it show?

I tried these: All work nicely, and where I checked captions are working, but no cover image graphic. Shouldn't there be when we supply the jpg?

https://pep-web.rocks/search/document/PEPTOPAUTHVS.001.0014A https://pep-web.rocks/search/document/PEPTOPAUTHVS.001.0015A https://pep-web.rocks/search/document/PEPTOPAUTHVS.001.0016A https://pep-web.rocks/search/document/PEPTOPAUTHVS.001.0017A https://pep-web.rocks/search/document/PEPTOPAUTHVS.001.0018A

profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0014a.preview.jpg profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0014a.preview.mp4 profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0014a.preview.png profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0014a.preview.srt profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0014a.preview.vtt profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0015a.preview.jpg profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0015a.preview.mp4 profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0015a.preview.png profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0015a.preview.srt profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0015a.preview.vtt profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0016a.preview.jpg profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0016a.preview.mp4 profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0016a.preview.png profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0016a.preview.srt profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0016a.preview.vtt profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0017a.preview.jpg profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0017a.preview.mp4 profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0017a.preview.png profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0017a.preview.srt profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0017a.preview.vtt profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0018a.preview.jpg profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0018a.preview.mp4 profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0018a.preview.png profile:AWS Prod S3?pep-web-video-previews/peptopauthvs.001.0018a.preview.srt

image