Please, enter a valid email!
00 days
:
00 hours
:
00 minutes
:
00 seconds

Building a Mobile Responsive HTML5 Video Player

The new HTML5 media trends are very popular chatter among web developers. It's now easier than ever before to embed custom video or audio into your website. And best of all, modern web browsers are starting to adapt these trends so that we're constantly pushing towards a single set of accepted file formats.

But in this tutorial I would like to share some ideas related to embedding custom HTML5 video. I want to use the open source HTML5 Media project as an example of one library we can include for interactive web development. I will also explain how we can make the video layout responsive so all the content will be fluid on mobile phones.

I'm hoping this tutorial will provide an introduction into embedded video media. In the past most web developers have been working with a custom flash player, which has been acceptable until recently. Now that the iPhone has absolutely no support for Flash plugins we need to push for an alternative. And the most promising advancement towards the future looks to be HTML5.

Hit the screenshot to see the preview, press Space to play, to see how video adapts to different resolutions simply scale the page. Hit the link to download the Source Code.

Specific Media File Types

Before we jump into the code I'd like to explain the separation of file types. Apple devices have always been supporting .mp4 video which is undoubtedly the most common. Practically everything can support .mp4 video except Firefox and older versions of Internet Explorer.

The alternative to these video formats is WebM which has been growing very quickly. These videos are generally high quality with lower file sizes, which makes them very quick to stream over the Internet. Between just these two filetypes you can support 99% of the visitors who come onto your page.

If somebody is using an older browser which doesn't support either webm or mp4 then you could always try serving up a Flash alternative. Every browser including IE6 has support for Adobe Flash if the proper plugins are installed. MP4 videos use the H.264 codec which can be passed into any Flash video player and streams perfectly.

Many developers still try to support the OGG filetype which was really a spinoff from older versions of Firefox. All these releases are currently outdated, and so I don't find OGG to be particularly interesting. Firefox 3.6 is the only version which doesn't support WebM yet supports OGG. And obviously as more people update their Firefox installation these problems will naturally fix themselves. If you're interested in these trends check out this great HTML5 video webpage which has some charts and statistical data for web developers.

Setting the Document Header

To get started let's create a new blank index.html file. I'll be adding in my own custom header information right after the HTML5 doctype declaration.



  
  HTML5 Responsive Video Player
  
  
 
 
 
  
  
  
  
  




It's understandable how we need to include a large amount of custom tags in the document header section. The meta tags such as X-UA-Compatible and viewport are needed to force all mobile browsers into a 100% zoom state. That way the users aren't pinching to zoom into the page every time it's loaded onto an iPhone or iPad.

I've included a script resource to the most recent release of jQuery 1.7.2 hosted by Google. We are also using the HTML5Media script hosted directly on their website. The current release is at 1.1.5 but I would be expecting updates in the near future. Of course if you would rather store a local copy of the script that's fine too. But when you're creating a small web application it's nice to have the option of linking to their server instead.

The last bit of interesting code is only included for Internet Explorer versions 8 or lower. These versions do not natively support HTML5 elements and so we need to setup the default tag names and CSS styles to be recognized in legacy browsers. This can be accomplished with the HTML5shiv project also hosted on Google's CDN.

Embedding Video

With the header pieced together nicely we can start looking into HTML5 embed codes. Using these media libraries we just need to point towards our specific source files and the rendering engines will do the rest.

In this example I'll be using the two default file types I mentioned earlier. MP4 is offered first because this is a requirement for supporting older iOS software on iPads and iPhones. I'm also setting the max width & height for the video file, along with a poster image which is displayed right when the page first loads.

 

Mobile Responsive Video Player

Press the space button for Play/Pause

Now to make this element responsive we need to setup a CSS max-width property. This is a nice CSS trick which is commonly used on images to be responsive following the browser width. This allows the media content to resize smaller if there is less screen real estate, but it will never be larger than the full maximum width.

video { max-width: 100%; height: auto; }

Some Added JavaScript Tricks

When finishing this tutorial I also wanted to include a small block of jQuery into the main HTML file. The first block deals with playing the video whenever you click anywhere in the media box.

By default Firefox already supports this feature in HTML5 video formats. When you click anywhere on the media box the video will play/pause automatically. However this is not the case with Internet Explorer, Safari, Chrome, or Opera. So first we check if the browser is Mozilla-based using a conditional . If false then we add the functionality to play/pause the video when you click anywhere in the media element.

$(document).ready(function(){
  $("video").on("click", function(){
    if(!$.browser.mozilla) {
    // mozilla HTML5 video auto-supports auto click-to-play
    // otherwise we add this functionality ourselves
      if(this.paused == true) {
        this.play();
      } else {
        this.pause();
      }
    } // end mozilla browser check
  }); // end video click handler

Now the 2nd bit of functionality is adding support for hitting the spacebar which should trigger play/pause. By default this can work in some browsers, but only if you are focused on the video element. That doesn't exactly help a whole lot so I've added a key event onto the HTML document itself.

We check whenever the user hits a key and pass the event into a new function. Then we can match the key ID against the spacebar ID(#32). If there's a match then we first use e.preventDefault(); to stop the space bar from scrolling down the page. Then we target the first video element on the page and perform the same play/pause logic seen earlier.

  $("html, video").on("keydown", function(e){
    var kcode = (e.keyCode ? e.keyCode : e.which);
    var viddy = $("video")[0];
  
    if(kcode == 32) {
      // if space bar stop default scrolling and start/stop video player
      e.preventDefault();
   
      if(viddy.paused == true) {
        viddy.play();
      } else {
        viddy.pause();
      }
    } // end if keycode logic
  }); // end keydown event handler
});

And that should cover all the important pieces! This is a great video template for just getting started working with HTML5 embed codes. It goes to show how quickly you can get up & running with 3rd party open source solutions such as HTML5 Media. Plus the small bit of added jQuery functionality really adds a stock solution for cross-browser support.

Hit the screenshot to see the preview, press Space to play, to see how video adapts to different resolutions simply scale the page. Hit the link to download the Source Code. Additionally after reading this blog post you may want to be interested in browsing through a responsive webdesign interactive guide, check it out.

Final Thoughts

I sincerely hope that you can take some ideas away from this tutorial and implement them into your own website. It takes a lot of practice building a successful web application. You won't get everything right on the first try, but keep pushing forward and don't be afraid of trying new things.

If you'd like to check out my demo you can do so above and also download the original source code files. I like to offer tutorials as open source so that other developers can learn from these techniques. Feel free to play around with the code and even extend my functionality. Also if you have any suggestions or ideas about the tutorial feel free to share with us in the post comments.


Don’t miss out these all-time favourites

  1. The best hosting for a WordPress website. Tap our link to get the best price on the market with 30% off. If Bluehost didn’t impress you check out other alternatives.
  2. Website Installation service - to get your template up and running within just 6 hours without hassle. No minute is wasted and the work is going.
  3. ONE Membership - to download unlimited number of WordPress themes, plugins, ppt and other products within one license. Since bigger is always better.
  4. Ready-to-Use Website service is the ultimate solution that includes full template installation & configuration, content integration, implementation of must-have plugins, security features and Extended on-page SEO optimization. A team of developers will do all the work for you.
  5. Must-Have WordPress Plugins - to get the most essential plugins for your website in one bundle. All plugins will be installed, activated and checked for proper functioning. 
  6. Finest Stock Images for Websites - to create amazing visuals. You’ll get access to Depositphotos.com to choose 15 images with unlimited topic and size selection.
  7. SSL Certificate Creation service - to get the absolute trust of your website visitors. Comodo Certificate is the most reliable https protocol that ensures users data safety against cyber attacks. 
  8. Website speed optimization service - to increase UX of your site and get a better Google PageSpeed score.

Jake Rocheleau

First it was design, then writing, and now affiliate marketing. Over a period of 6-7 years he wrote a lot of content for many websites. You can reach Jake on Twitter.

Get more to your email

Subscribe to our newsletter and access exclusive content and offers available only to MonsterPost subscribers.

From was successfully send!
Server error. Please, try again later.

133 responses to “Building a Mobile Responsive HTML5 Video Player”

  1. Bahis siteleri: Bunlardan en süregelen olarak açılan bahis detaylılığı ile çoğu oyuncunun dikkatini çeker. Buna karşın gene de imkânsız değildir. Yine de en güvendiğiniz grup lehine bahis oynamak bu yüzden biraz daha toparlanmış görünüyorlar.Zor bir maç olur. Bu seksiyon amacıyla 100 oranında veriliyor. favorisen güncel tüm güvenlik kriterlerinden başarı ile hizmet veriyor. Saat 21.30da başlayacak maç Groupama stadında oynanacaktır. User memnuniyetini her vakit amacıyla bir gereklilik olan işlemlerdir. Çünkü değişik şahıslar doğrulusunda gerçekleştirilebileceği gibi her türlü sorunda profesyonel müşteri desteğimizden yararlanabilirsiniz. Iddaa açti tek maç oynarmış gibi bahisler yaparak özgürce para kazanabilirsiniz.

  2. adaxbet says:

    Yasal bahis siteleri: İlgili bahis şirketinin sosyal medya hesaplarından duyurmaktadır. Fakat bugünkü casino siteleri arayışında tespit edilen kullanıcılar lisanslı ve meşru olarak hizmet veren bahis sitelerinin içersinde derhal derhal tüm canlı bahis siteleri listesinin her vakit en yüksek oranlı iddaa kuponları ve bedava oyunlar oynayabiliyorsunuz. Balıkesirspor bu sezon Ukrayna Liginde görkemli bir bahis sitesidir. Bu kampanya kapsamında 500 TLye kadar adaxbet giriş ilk üyelik bonusu kazanarak etkinlik göstermeye başlayabilirisiniz. Yabancı sitelerdeki gibi, canlı casinoda, canlı kurpiyerlerle birlikte, rulet, blackjack, poker, bahis tahmin, bahisŞüphesiz bugün Türkiye piyasasında bahis severler genelde yüksek miktar ve bahis keyfinin esas adreslerinden biri tayin edilen firmaya girerken her hafta değişik domainler kullanılacaktır. Hem de lisanslı olarak etkinlik gösteren hiç bir koşul sunulmayan bonuslara çevrim koşulsun bonusunuz hemen hesabınıza para aktarmanız dahi mümkündür. Çünkü cepbank programları bir banka hesaplarınız yoksa şayet hiç tereddüt yaşamadan ve aynı vakitte bahis siteleri arasında yer alan tüm işlemler gibi mekan ya da yolculukta Android ve iOS mobil programı ve masaüstü VPN Yazılımını siz kıymetli bahis severlerin tüketimine sunulduğundan beri büyük beğeni topladı. Bahis yönünden yapılan hizmetler ile ismini Avrupa bahis siteleri İddaa sistemi ile korumaktadır. Banka yolu ile para çekmek istedikleri vakitler bu üç liralık rakamı daha da tanınmış kuponlar bölümünden başka oyuncuların karşısında fark yaratmasıdır. Yasal bahis siteleri bonus

  3. gobahis müşteri hizmetlerini de unutmamalıyız. Çünkü sitede karşınıza çıkan problemler karşısında başvuracağınız ilk yer burasıdır. Bu amaçla müşteri hizmetlerinin kalitesi, sitenin güvenilirliği kadar önemlidir. Siteyle alakalı bir probleminiz varsa derhal çözüme ulaştırmak istiyoruz. Bu amaçla firmaların haftanın 7 günü 24 saat hizmet vermesi önemlidir. Hem de canlı destek personeli bu alanda bilgi sahibi olmalıdır.

  4. Bahis sitelerine son zamanlarda ilgi hayli artmış görünüyor. Tüm dünyayı sarsan ve halen devam eden Covid 19 salgını sonrası birçok ülkede ekonomik sıkıntılar ortaya çıktı ve insanlar artık yeni kazanç kapıları arama içine girdiler. Kolay para kazanma yollarının başında ise bahis ve şans oyunları yer alıyor. Dünya üzerinde milyonlarca insan bahis sitelerine giriş yapıyor ve buralara paralar yatırarak yüksek paralar kazanmak için uğraşıyorlar. Bahis siteleri arasında son yılların en çok kazandıran ve en yüksek bahis oranları bulunan bahis sitesi olan favorisen tüm dünyada yaygın bir şekilde kullanılmaktadır.

  5. Bahis oynarken yapmış olduğunuz bakiye yüklemesinin yanı sıra bahis siteleri doğrulusunda sunulan bonusların detaylılığı de ehemmiyet taşımaktadır. Şimdilik ilk defa bahis yapar iken elde edeceğiniz promosyon fırsatlarını tam anlamıyla kullanarak bahis tadını üst civarlara çıkarabilirsiniz. Şuan fazlası bahis sitesinde tespit edilen deneme bonusu ise yeni kullanıcıların dikkatini bir hayli çekmekte. Hem bahis firmaları hemde oyuncular doğrulusunda cazip bir bonus türü olan deneme bonusu bir başka ismiyle yeni üye olanlara verilen bir nevi test hedefli bonus ismidir. Şimdi ayrıntılı olarak deneme bonusu nedir bunu inceleyelim aynı vakitte deneme bonusu veren siteler ile ilgili kapsamlı bulgular sunalım.

  6. ek gelir says:

    İnternetten para kazanma

  7. istanbul antalya evden eve

  8. magnificent publish, very informative. I’m wondering why the opposite specialists of this sector do not notice this. You should proceed your writing. I am sure, you’ve a great readers’ base already!

  9. What a stuff of un-ambiguity and preserveness of precious experience on the topic of unexpected emotions.

  10. using botox for bladder problems

  11. what clothing should you wear after botox to the bladder

  12. botox in bladder procedure mayo clinic

  13. botox for treatment of overactive bladder

  14. Ofis ve parça eşya taşıma işlemlerinde güvenli taşımacılık ile tanışın. Siz de evden eve ve şehirler arası nakliyat işlemlerinizde güvenilir bir firmadan hizmet alın.

  15. Türkiye’nin en başarılı şehir içi nakliyat fiması ile evden eve taşımacılık artık çok kolay. Parça eşya taşıma, ofis taşıma ve şehirler arası nakliyat işlemleriniz için kaliteden ödün vermeyin.

  16. Mecidiyeköy elektrikçi

  17. how much does it cost to get an industrial bar piercing

  18. instagram beğeni satın al

  19. seo analiz google sıralama yarışması

  20. düşük asit zeytinyağı

  21. SEO Analiz Google Sıralama Yarışması

  22. can you use botox for overactive bladder

  23. botox injections fort worth texas

  24. Google says:

    Google

    Below you’ll uncover the link to some web pages that we feel you ought to visit.

  25. botox says:

    botox botox near me botox before and after

  26. botox says:

    botox botox near me botox before and after

  27. botox says:

    botox botox near me botox before and after

  28. android quality ig image download

  29. mac instagram picture download free

  30. mac free instagram video download

  31. ipad free instagram video download

  32. instagram computer image download

  33. download photo from instagram without program

  34. macbook free insta story download

  35. instagram ios online video download

  36. instagram android hikaye indir online

  37. download de imagem full hd instagram

  38. lejupielādējiet ios Instagram videoklipus tiešsaistē

  39. Swamy says:

    Responsive website how to integrate my older website. Any short cut JS OR CSS codes. Please replay me, thanks

  40. Swamy says:

    great post, thanks

  41. Dylan says:

    And play/pause button does not work.

  42. Alex says:

    Nice tutorial, but the controls are affected by the play/pause function. If you click on the slider or audio button for example, the video will pause/play.

Leave a Reply

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