By Guilherme Muller

Build a Media Player with HTML

By Guilherme Muller

The possibilities for media in HTML have taken off with the introduction of the video and audio elements in HTML5. Now we can embed video and audio in websites without the need for proprietary technologies like Flash or Silverlight.

With browser support better than ever, and new technologies like WebVTT starting to arrive, now is a great time to get to know (or to revisit) these new HTML elements.

Learnable has just launched Getting Started with HTML Media, a course that gets you up to speed with HTML's new media elements and how to take them to the next level with CSS and JavaScript.

Here's a video from the course that gets the ball rolling, showing you how to structure the HTML code for a custom media player. (Later videos demonstrate how to build on this with CSS and JavaScript to create a fully functioning, custom media player.)

Loading the player…

You can download the source files for this demo on GitHub.

If you found this useful, check out the full course at Learnable—which takes you from the basics right up to developing a fully functioning, custom media player, playing both audio and video.

  • Emanuel Barbosa Gonçalves

    Parabéns e obrigado conteúdo. Teria o curso em português?

    • Olá Emanuel! Infelizmente por ora o curso está disponível apenas em inglês. Resta saber com o pessoal do Learnable se eles irão disponibilizar legendas em outras línguas, mas já me propus a ajudar.

  • Bongo

    Interesting stuff Guilherme. I was hoping that this was a step by step tutorial.

    • Thanks! This is just a sneak peek for the course mentioned above. You can check out the whole course on Learnable, now Sitepoint Premium.

  • Sobhi Ali Houri

    Hello are you offering this for free?

Get the latest in Front-end, once a week, for free.