Sarah Moyer

WordPress Development for Web Agencies

  • Home
  • Work with Me
    • for Agencies
    • for Designers
    • for Business Owners
    • FAQs
    • Website Care
  • Portfolio
  • Blog
  • Contact

HTML5 Video

Last updated on March 31, 2018 · Posted in Snippets · dev process  · video

WP has a video shortcode you can used to add an .mp4 video to your website. However, I couldn’t find where you could add a splash or poster image, which defeats the purpose of the shortcode (it was tooted as an alternative to plugins.)

Plus, the mp4 would play in Firefox.

So let’s look a pure HTML5 video. Here is a good resource for the html and code behind it, according to the IE Dev Center:

Adding an HTML5 video control to your webpage

http://msdn.microsoft.com/en-us/library/ie/hh924820(v=vs.85).aspx

there is a poster image example on there as well as the different video formats.

Turns out HTML5 is good at listing multiple formats for video in an orderly [coded] fashion.

Not converting videos.

Here’s a great place to get your hands dirty practicing it:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video_all
based on the official W3Schools page: http://www.w3schools.com/html/html5_video.asp

More Resources:

http://www.awwwards.com/20-html5-video-websites-examples-and-resources.html

http://www.html5rocks.com/en/tutorials/video/basics/

View supported browsers: http://caniuse.com/video

You need 3 main video formats for browser compatibility: mp4, ogg, webm

Here a free resource to convert: http://www.mirovideoconverter.com/

Was this post helpful?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Anti-Spam by WP-SpamShield

Recommended Resources

Copyright © 2023 by Sarah Moyer · Privacy Policy