1 of 13

HTML5 Video Conversion

A tutorial - CG-214

2 of 13

HTML5 Video

  • Video comes in all shapes and sizes, but we need to get our videos into .mp4 and .webm format for our webpages.
  • In class we were going to use VLC, but after trying it out, their different versions for different operating systems are quite a bit different, making it harder than it needs to be.
  • I found a free online tool called Online-Convert which we can use. It’s web-based, so it should look the same for everyone
    • Since your file is going up to the web and being converted, keep that in mind when using it. For all intensive purposes, assume the creators of the site (along with the NSA) can now see the file

3 of 13

Converting a video

  • Visit http://www.online-convert.com/
  • We have a few options here, but let’s convert some video

4 of 13

Converting in Online-Convert

  • Online-convert gives us tons of options. We’ll have to go through the process twice, once for .webm and once for .mp4

​

5 of 13

Converting in Online-Convert

  • After selecting the video format, it will take us to a new, messy page.
  • ‘Choose File’ of what you want to convert
  • We don’t need to use the optional settings, though it doesn’t hurt to change the resolution to what we want to display it at
  • At the bottom, click ‘Convert File’

6 of 13

Converting in Online-Convert

  • It will go to a new page, and let you know the status
  • It takes awhile (especially for .webm)
  • Once completed, it will automatically download to your downloads folder
  • Move it to the appropriate folder on your webpage
  • Do the process again for the other file format (.webm or .mp4) and you’re done!

7 of 13

Another converting method

  • In case you’re skeptical of online-convert, next is steps for VLC.
  • These steps won’t be the same for every operating system.
  • What’s important to remember is the steps.

8 of 13

Installing VLC

  • Double click the file that was downloaded, something like ‘vlc-2.2.4.dmg’
  • Something like this window should show up. Drag that VLC icon into your ‘Applications’ folder.
  • After it copies, navigate into your Applications folder and open it!

9 of 13

Running VLC

  • On startup, if something like this image shows up, click OK. This is legitimate software and not some crazy virus attempt.

10 of 13

Running VLC

  • Here’s the VLC application. A lot of stuff we don’t need here. But this is also a good program to just play videos on your computer (will play more file formats than QuickTime, for example).

11 of 13

Converting a video

  • Go to file -> Convert/Stream (Also command + shift + S on a mac)
  • This new window should appear

12 of 13

Converting a video

  • Drag and drop the video you want to convert, or open it.
  • Even if a video ends with ‘.mp4’, there’s still a chance it’s not web compatible, so it’s still worth doing this.

13 of 13

Converting a video

  • VLC should default to the H.264 + MP3 (MP4) setting. That’s what we want!
    • H.264 compression codec, MP3 audio, and the ‘wrapper’ is a .mp4 file
  • Press ‘Save as File’ at the bottom
  • Choose an output location (maybe our webpage folder?) and Save the file. Give it a name that makes sense
  • Note: my version of VLC (new VLC with older Operating system) wanted to save everything in a .m4v format. It’s very similar to .mp4. It will work, but it’s not ideal.