Displaying a video

My photo gallery - using Flexbox - is nearly done, and soon I am going to be creating thumbnails for the gallery. However, I have a lot of video intermixed with my photos.

So I have some questions on how to best handle videos in a web page…

1.) How do you create thumbnails of your videos?

2.) What do I need to do as far as HTML/CSS for a video file so it displays in my gallery and also plays?

3.) If a video is rotated - not sure if I have this issue - how would you rotate things so they are displayed properly?

4.) Any other suggestions on how to make presenting videos on your web page come out the best they can?

Thanks!

The easiest way is to upload the videos to YouTube either to a public or private account and rendering script can be copied and pasted to your project. Thumbnails are automatically shown.

Storing videos to your web host server is possible but far more complicated and not as fast as YouTube. Vimeo and other online services are available.

Edit:

As far as rotated videos are concerned I would wait to see if the problem arises.

What would I need to do to serve videos from my own server?

You would need quite a lot of disk space in the server to host the videos and ffmpeg to convert the videos to formats supported by different browsers, otherwise you will find that not any video can play in any browser. Presumably you will also need a javascript video player if you want to provide a consistent playing experience across browsers. It is not a simple topic. I used to work for a company that specialised in video content management solutions and the infrastructure is not simple or easy. But if you really want to do this I’d start familiarising myself with using ffmpeg in the server, probably through PHP. With ffmpeg you can do all kinds of things with videos, like converting to different formats, trimming, extracting frames for your thumbnails, compress etc etc…

@Andres_Vaquero,

I took some videos of a work party on my iPhone and was hoping to post them on a site I am building.

Pardon me for being naive, but I thought it would be as easy as creating a thumbnail for the video, and when the user clicks on it the video plays…

I don’t need anything super fancy as this is just to share with people from the party, although I obviously want it to work - at least in most cases.

Is that doable?

Well they could upload any kind of video, then good luck with that being supported on whichever browser is being reproduced, because it most probably would not be supported.
I’d take a read at this to familiarise yourself with the problem:
http://diveintohtml5.info/video.html

@Andres_Vaquero,

The videos from my iPhone are .MOV format.

I just opened up a test file in Firefox on my PC and my Mac and it plays on each computer.

Seems like a pretty safe sign to move forward, no?

I don’t think so… I think they are not supported when played within an HTML5 video tag.

You’re ruining my party!

Looks like video is a PITA, huh?

Okay, if you can’t think of an easy way for me to play the videos I took, then is there a way I can offer one of those download icons and maybe just create a thumbnail that says “Download video below” or something like that?

Why not use YouTube, the recommended easiest way that converts files to virtually all the different video formats?

Because then I have to create an account and learn YouTube, and I was hoping to have this ready for tomorrow…

Creating a YouTube account takes a couple of minutes, if you manage to upload the videos to your server and makes them available for all users I will be most surprised if you finish before next year.

@John_Betong,

I appreciate the help, just running out of time and apprehensive about YouTube…

Also, since this is a one-off thing, I hate to create a YouTube video for that.

As a backup, what about having one of those “download” icons next to a thumbnail, and if people want to see they video then they can download it from my website as a file, save it to their computer, and view it there.

How would I do that?

You have to first find a way in which you can upload large files into your server… not easy if those files are large as you will probably hit server POST size restrictions. So if the files are larger than what your server accepts then you may have to slice them up and upload them in parts, which is no easy task. Once you have a good file uploader script then you can just have a standard link to those files and that should provide a download, if it doesn’t then it may open in a new tab and reproduce the video in the browser. If then you need to force a download you may have to use you server side technology to force the download on those files.
I’m afraid the easiest solution is what @John_Betong has already suggested: Youtube.

@Andres_Vaquero,

I can SFTP any file size that I want…

And I assume that if I provide one of those download icons, that any reasonable file size can be downloaded.

What do I need to do as far as the HTML/CSS to put up a download icon and when the user clicks on it, they get a pop-up asking then to choose where to download the file?

Someone mentioned that option earlier in another thread of mine, but I forgot where it is and what it is called. It seemed pretty easy to do in HTML…

As mentioned, “with a great deal of difficulty!”

My last job involved video editing and uploading to a server for an English language course.

download | html 5

Right?

1 Convert your mov files to mp4 format.
2 Use the HTML5 video element to display them.

<video controls>
 <source src="your-video-example.mp4" type="video/mp4">
</video>

Website Example

https://www.coothead.co.uk/to-be-or-not-to-be.html

The video in this example has a size of 17.MB.

Browser Support for mp4:-

https://caniuse.com/#search=mp4

coothead
`

How would I do that?

Is that going to cost me a lot of time and $$$ buying/learning fancy software like from Adobe? :frowning:

If I can come up with .mp4 files, then will the video player be included using those tags?

Is that you @coothead?

Coothead does Shakespeare!! :biggrin:

How do you get a video that small in file-size?

My videos range from 4MB to up to 1GB…

What is the difference between MPEG-4 and MP4 and H.264?

Thanks, as always, for the help on another tricky subject!! :+1:

A simple search came up with this selection…

https://duckduckgo.com/?q=online+convert+.mov+to+mp4

Yes, that is the basic HTML. ;winky:

I wish. :rofl:
It is, actually, Adrian Lester an English thespian.

coothead