Friday, May 29, 2009

Lessons From Building a Basic Video Player in HTML5

HTML5 browsers that support the <video> tag are required to provide a basic set of controls for watching video on a web page. The built-in controls can be turned on by adding the "controls" attribute to the <video> tag. However, in many cases, you will want to provide your own richer set of playback controls. In this post, I intend to call out some of the hurdles that I have run across working on various HTML5 video players. If you want to see many of these techniques in action, check out the source code for

A few quick warnings. First, I have no prior experience in building video players on platforms such as Flash or Silverlight. Some of these tips may be second nature to someone who already understands building players in these technologies. Secondly, many of these techniques are unabashedly broken in many browsers as this is exceedingly bleeding edge technology. Your best bet is to bounce between browsers such as Safari 4 Beta, Webkit nightlies, Chromium nightlies, FireFox 3.5 Beta, and Opera 9.64 until you find one that works. Finally, this post contains only a subset of topics involving HTML5 video players. Please leave a comment if there are other specific topics you would like me to discuss.


Early on, you need to decide how you want to build your video controls (e.g. play button, progress bar, etc.). Resist the temptation to use a single <canvas> element for all of it. Using actual markup has several benefits. For instance, blind and visually-impaired users make up a decent number of video consumers. Semantic markup will make your player accessible to them. If you want the flexibility of <canvas> elements, you can nest them inside of your video controls like so:

<button class="play-button"><canvas class="play-icon" height="32" width="32"></button>

Also, take advantage of new tags such as <progress>, <time>, <meter> and <button> (new-ish). These tags allow you to store additional information about the current state of your player. Whenever possible, have your Javascript update these elements and their attributes, and then base your CSS styles on these values. For example:


<meter id="my-video-rating" class="video-rating" value="4"></meter>


.video-rating {
 display: block;
 width: 100px;
 height: 20px;
.video-rating[value=0] { background-image: url(/img/stars-0.png); }
.video-rating[value=1] { background-image: url(/img/stars-1.png); }
.video-rating[value=2] { background-image: url(/img/stars-2.png); }
.video-rating[value=3] { background-image: url(/img/stars-3.png); }
.video-rating[value=4] { background-image: url(/img/stars-4.png); }
.video-rating[value=5] { background-image: url(/img/stars-5.png); }


function changeRating(newRating) {
 document.getElementById("my-video-rating").value = newRating;

User Interface

Capturing every video event that affects your user interface will quickly become unmanageable. Furthermore, there is no single event fired periodically during the video that you can use to update your UI to reflect the current time of the video while its playing. The best solution I have found is to fire off a function that updates the video controls on a set interval of 100ms. The function uses the state of the player at the moment the function fires to drive the UI. This greatly simplifies the code but results in the UI being updated constantly even when the video is paused.

One thing that caught me off guard was the nature of volume and muting. For whatever reason, I expected setting muted to true would be reflected in the volume property (e.g. setting the volume to 0). However, the specification explicitly keeps these two values separately, which actually makes life much easier. Just remember to check both values when trying to update your player's volume controls.


Fullscreen support is still a much debated topic. Currently, it looks like fullscreen support will originate with the browser and not the video element itself. This makes sense since you will want your controls, ads, and other elements external to the video to show up in fullscreen mode. However, there is no way presently to toggle fullscreen mode from inside the page (as this is a security concern). The best you can do from inside the page is scale up your video player to fill the browser window. I have a prototype I am working on that does this by adding a CSS class to my player. The code looks something like this:

.video-player video {
 display: block;
 width: 640px;
 height: 360px;
.video-player.fullscreen video {
 display: block;
 width: 100%;
 height: 100%;
 position: absolute;
 z-index: 9999;
 top: 0;
 left: 0;

I am still working on getting the controls to layout properly in full-window mode, and will update this post with any insights I uncover.

Some talk has occurred over changing the CSS media type of the document when the browser's built-in fullscreen mode is toggled. For instance, have the media type change from "screen" to "projection". This could be used to change stylesheets or select different sets of CSS rules inside of a stylesheet. For example:

<link rel="stylesheet" type="text/css" media="screen" href="videoplayer.css">
<link rel="stylesheet" type="text/css" media="projection, tv" href="videoplayer-full.css">

Or you could do this in the CSS code:

@media screen {
 /* Do your normal video player styles here */
@media projection, tv {
 /* Do your fullscreen styles here */

Finally, one hurdle that remains is supporting the ability to show an embedded video in fullscreen on a third-party site. The security puzzle that this introduces is still undergoing heavy debate. Currently, there is no way to accomplish this that I know of.


Embedding your videos in third-party pages is another area that is still very much in flux. At the core, you will be embedding an HTML document instead of a Flash or Silverlight binary. To accomplish this, you will need to use an <iframe> tag like so:

<iframe src="" height="360" width="640"></iframe>

There are other tags that would seem more semantically correct such as the <embed> and the <object> tag. According to the specification, the <embed> is meant to be an entrypoint for external plugins and not typically intended for HTML content. Setting the source of an <embed> element to an HTML document does work in some browsers. In my mind, this is the most semantically correct tag for embedding since video players do not need the "nested browsing context" of an <iframe> (e.g. ability to navigate forwards and backwards inside the frame). However, since there are no affordances for <embed> tags supporting HTML in the spec currently, it is best to stick with an <iframe>.

The <object> tag does accept HTML content as a source and will establish a nested browsing context if HTML is passed to it. Fundamentally, the behavior of the <object> tag is to act like an <iframe> if HTML content is passed to it or to act like an <embed> if any other content is passed to it. It seems unreasonable to use this tag and its additional logic when an <iframe> is a more direct path to the desired behavior.


The HTML5 <video> element is quickly finding its way into all of the modern browsers. It is important to invest our time in finding good, semantic HTML solutions for the problems that other technologies are primed to solve, such as fullscreen support and embedding. We also need to make sure that we establish good patterns for combining existing technologies (e.g. Flash, Silverlight) with the new capabilities of HTML5. I do not think the aim should be to try and outright replace these technologies. Rather, as developers, we should be taking this opportunity to focus on the benefits of each technology and to make it easy for these technologies to coexist.


  1. Interesting post, have any luck with the layout of the controls in full-window mode?

  2. HTML5 spec doesn’t yet cover any meta data outside of duration, width and height (the video spec is one of the more volatile aspects of HTML5). You may have to do it the old fashioned way - with a data object (json or XML) of timestamps for cuepoints.

    Flv Player

  3. Great collections. Thanks for sharing.

  4. The best thing about HTML5 is that it allows the developers to embed the video files, audio files, and high quality graphics without any third party applications.
    html5 training in chennai | html5 training institutes in chennai | Fita Chennai reviews

  5. Given information was very excellent & Great tips, and awesome way to get exert tips from everyone,not only i like that post all peoples like that post,because of all given information was wonderful and it's very helpful for me... SAP Training
    in Chennai

  6. I have completely read your post and the content is crisp and clear.Thank you for posting such an informative article, I have decided to follow your blog so that I can myself updated.
    Android training in Chennai | Android course in Chennai | Android training institute in Chennai


  7. Truly a very good article on how to handle the future technology. After reading your post,thanks for taking the time to discuss this, I feel happy about and I love learning more about this topic.

    SEO Company in Chennai

  8. Really an awesome post. I wondered by reading this blog post. Thanks a lot for posting this unique post which you have shared with us. Keep on posting like this exclusive post with us.
    Android Training Institute in Chennai


  9. الاول سيو شركة الاول للتنظيف
    ومن اقسام الاول سيو قسم الخدمات المنزليه مثل افضل شركة نظافة بالرياض
    وافضل شركة تنظيف شرق الرياض بالاضافة الى افضل شركة مكافحة حشرات شرق الرياض وتغطى خدماتها شرق وشمال الرياض فالاول افضل شركة مكافحة حشرات شرق الرياض تستخدم اقوى المبيدات الحشرية
    شركة عزل اسطح بالمدينة المنورة
    واسعارها في متناول الجميع ومن الهام التاكد دائما من خلو منزلك من تسربات المياه حتى لا تتعرض لمشاكل مثل انهيار وتصدع المبانى الاول افضل كشف تسربات بالرياض تستخدم اجهزه الكترونية اكشف التسرب بالذبذبات وتغطى كافة مناطق الرياض فهى افضل شركة شركة كشف تسربات المياه شرق الرياض
    شركة تنظيف بالقطيف
    تنظيف خزانات بالرياض
    شركة تركيب مكيفات بالرياض
    شركة ترميم بالرياض
    شركة تنظيف كنب بالرياض

    الاول شركة تخزين عفش بالرياض
    توفر افضل المستودعات لتخزين الاثاث والعفش التى تتوفر بها كل عوامل الامن للحفاظ على الاثاث وتقوم بتغليف الاثاث قبل تخزينه للمحافظة عليها فالاول افضل شركات تخزين العفش بالرياض ونوفر سيارات لنقل الاثاث من اى مكان داخل المملكة .

    بالاضافة الى خدمة نقل عفش بالرياض فنحن نمتلك اكبر اسطول نقل بالرياض يوفر لك افضل خدمة نقل اثاث بالرياض
    بالاضافة الى ان اسعارها في متناول الجميع فهى فالاول شركة نقل عفش بالرياض رخصية بالمقارنة مع باقي الشركات بالرغم من جودة عملها ودقة المواعيد فهى تقوم بتغليف العفش للحفاظ عليه اثناء النقل وتقوم باستخدام سيارات مغطاه مخصصة لنقل العفش للحفاظ عليه من اضرار الشمس والامطار والاتربة فالاول افضل شركة نقل اثاث بالرياض وتغطى كافة مدن المملكة
    شراء اثاث مستعمل
    وتوفر الاول عدة شراء اثاث مستعمل بالرياض لتغطية كافة الاتصالات وللمتابعة مع العميل اثناء نقل الاثاث المستعمل


  10. ونستخدم افضل معدات جلى البلاط والرخام بالرياض فالبيت الافضل افضل شركة جلى بلاط بالرياض شركة و افضل شركة جلى بلاط بالرياض
    شركة تنظيف بالرياض

    عميلنا العزيز اذا كنت تبحث عن افضل شركة غسيل خزانات بالرياض

    تعقيم خزانات مياة الشرب شركة تنظيف خزانات بالرياض

    ولاننا الافضل في الرياض فلدينا قسم خاص باعمال افضل شركة مكافحة حشرات بالرياض و افضل شركة رش مبيدات بالرياض افضل شركة مكافحة حشرات بالدمام

    شركة تخزين عفش بالرياض
    هذا بالاضافة الى اننا نولى اهمية خاصه لخدمات نقل الاثاث خارج الرياض فلدينا اسطول من احدث سيارات نقل الاثاث المغطاه والمؤهلة لنقل جميع انواع الاثاث والعفش من الرياض الى اى مكان داخل المملكة او خارجها الى الخليج العربي والاردن
    نوفر افضل عماله تقوم بعمليات فك الاثاث في المكان وتغليفه بافضل المعدات ثم نقله الى السيارات المغطاه لحمايته اثناء النقل ثم نقوم بنقله الى اى مكان فنحن افضل شركة نقل اثاث خارج الرياض والخرج والدمام
    افضل شركة نقل اثاث بالرياض

  11. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing.

    CCNA Training in Chennai | Networking Training in Chennai

  12. Thanks of sharing this post…Java is the fastest growing language that helps to get your dream job in a best way, so if you wants to become a expertise in Java get some training on that language.
    Core JAVA Training in Chennai | JAVA Training in Chennai

  13. شركة العاصمة للتنظيف ونقل العفش بمدينة ينبع لانها شركة متخصصة فى نقل العفش وامور تنظيف المنازل صنفت بأنها افضل شركات تنظيف المنازل والشقق بينبع وقسم خاص لخدمات نقل العفش مع التغليف بينبع الى جميع انحاء المملكة وحرصا منا قمنا بإنشاء قسم تحت ايدي من خبراء مكافحة الحشرات بينبع والمدينة المنورة
    لمزيد من المعلومات الاتصال علي 0553327589
    شركة تنظيف بينبع
    شركة نقل اثاث بينبع
    شركة مكافحة حشرات بينبع
    شركة تنظيف خزانات بينبع
    شركة جلي بلاط بينبع

  14. Pretty article! I found some useful information in your blog, it was awesome to read, thanks for sharing this great content to my vision, keep sharing.
    Pearson Vue Exam Center in Chennai | Certification Exam Centers in Chennai

  15. The blog gave me idea to build the video player Thanks for sharing it
    Web Designing Training in Chennai

  16. dự án chung cư vinhomes nguyễn trãi là một quần thể đô thị hiện đại chung cu vinhomes nguyen trai được trang bị nội thất tinh tế thiết kế vinhomes nguyễn trãi sang trọng vinhomes nguyen trai đẳng cấp kết hợp cùng tiện nghi vinhome nguyen trai cao cấp vinhome nguyễn trãi là điểm đến lý tưởng vincom nguyen trai đầy đủ cho người tiêu dùng vincom nguyễn trãi có bán giày nam các loại giày công sở nam đẹp nhất.Công ty thiết kế nội thất hàng đầu tại hà nội, chuyên thiet ke noi that

  17. dự án chung cư vinhomes nguyễn trãi là một quần thể đô thị hiện đại chung cu vinhomes nguyen trai được trang bị nội thất tinh tế thiết kế vinhomes nguyễn trãi sang trọng vinhomes nguyen trai đẳng cấp kết hợp cùng tiện nghi vinhome nguyen trai cao cấp vinhome nguyễn trãi là điểm đến lý tưởng vincom nguyen trai đầy đủ cho người tiêu dùng vincom nguyễn trãi có bán giày nam các loại giày da nam đẹp nhất, giày lười nam đẹp.Công ty thiết kế nội thất hàng đầu tại hà nội, chuyên thiet ke noi that

  18. Dự án căn hộ chung cư vinhomes nguyễn trãi với những căn hộ hiện đại. Chất lượng vinhomes nguyễn trãi làm nên sự thành công của công trình. Trung tâm thương mại vincom nguyễn trãi với những sản phẩm của thương hiệu nổi tiếng thế giới. Hiện nay chung cu vinhomes nguyen trai đang là điểm đến lý tưởng của nhà đầu tư. Các căn hộ tại vinhomes nguyen trai mang đến tiện nghi và sự an toàn cho các gia đình. vinhome nguyễn trãi với những thuận lợi về vị trí mang đến cho dân cư vinhome nguyen trai những điều kiện thuận lợi nhất để có thể phát triển ổn định.
    Thiết kế website với những mẫu website doanh nghiệp phù hợp với nhu cầu của mọi khách hàng. thiết kế website bán hàng theo tiêu chuẩn tích hợp seo onpage, thiết kế website giá rẻ uy tín

  19. To add my insight into the broader need much information should I dig, one of his articles, vidio also one of his pictures as I can see on this page, please be able to provide feedback to me.
    At the end of the comment word I say thank you.
    alat bantu sex wanita
    obat kuat pria
    Obat kuat, alat bantu sex pria wanita 18+

  20. تعلن صيانة جليم جاز انها تعمل علي في مراكز الصيانة لصيانة الاجهزة الكهربائية عملت علي وضع ارقام تيلفون خاصة بتللك المراكز لتواصل العملاء معهم وحل مشاكلهم جميعها .

  21. تعلن صيانة بوش العالمية انها تعمل علي تصليح الاجهزة الكهربائية في تللك المراكز علي يد اكبر فريق خبراء فنيين متخصصين في صيانة الاجهزة الكهربائية .

  22. شركة الحارس الخاص في مصر سوف توجد بها جميع انواع كاميرات المراقبة المتميزه مع شركة حرسات امنية سوف تجد كافة الخدمات المتميزه والمتطورة في جمهورية مصر العربية من خلال شركة امن و حراسة علي اعلي جودة .

  23. تعلن شركة العنود انها اكبرشركة تنظيف خزانات بمكة المكرمة والمملكة العربية السعودية اي انها تعمل عليتنظيف خزانات بمكة عن طريق وسائل العزل الحديثة و المستخدمة في عزل خزانات بمكة المكرمة .

  24. تعمل مراكز صيانة تكنوجاز بتقديم جميع الخدمات المتاحة للاجهزة الكهربائية وايضا تعمل مراكز صيانة باناسونيك عن طريق تلبية كافة طلباتكم فور اتصال الاعملاء و تركيب قطع الغيار اللازمة للاجهزة الكهربائية .

  25. تتميز دار مسنين بالقاهرة بأنها تقدم افضل خدمات الرعاية الصحية و النفسية و الترفيهية لكبار السن على يد خبراء ، كما في دار مسنين مما يجعل من السهل على العملاء الوصول الى فروعنا في اي وقت .

  26. الان يمكنك التخلص من الحشرات التي توجد في المنزل من خلال التمتع من شركة ابادة حشرات واعمالها الخاصة في مكافحة حشرات والعكمل علي التخلص منها باحدث الوسائل الممكنة والتي لم تاثر علي صحة الانسان .

  27. يقدم لك دليل تجهيزات افضل صيانة معدات مطاعم فنقدم العديد من الخدمات الازمة للصيانة الخاصة بكل الاجهزة الكهربائية التى لديكم فنقدم افضل صيانة معدات فنادق ايضا فقط زور موقعنا الان

  28. تقدم لك مراكز صيانة جروندنج
    افضل الخدمات التى تهدف الى راحتكم فنسعى دائما الى كسب ثقة عملائنا الكرام يقدم لك مركز صيانة كريازى افضل خدمات الزيارات المنزلية فمن الان ابتعد ان عناء حمل الاجهزة الى مراكز الصيانة المختلفة سوف ناتى بالصيانة الى منزلك

  29. تمتع الان بعروض توكيل صيانة كاريير لدينا افضل خدمات الدعم الفنى التى من خلالها يمكنك ان تقوم بصيانة الجهاز الخاص ببعض الخطوات البسيطة التى لا تتطلب زيارات منزلية او دفع مصاريف صيانة فقط اتصل بنا الان

  30. يحتاج كبار السن الى الرعاية فى كل المجالات وخاصة الطبية والشخصية فالكثير منا لايستطيع التعامل معهم بطريقة صحيحة تواصل الان مع دار مسنين بالمعادى لدينا افضل فريق من الاطباء التابع لنا لرعاية كبار السن فى كل فروعنا دار مسنين بمصر الجديدة والفرع الاخر دار مسنين بمدينة نصر زوروا احدى فروعنا

  31. سارع الان بالتواصل مع شركة مكافحة حشرات بمكة
    من اجل التخلص من كل الحشرات التى تتواجد بالمنزل بامن الوسائل التى لا تتعارض مع صحة الاسرة سارع بابادة حشرات بمكة
    الان لحياة اسرية خالية من الحشرات

  32. احصل الان على اكبر فترات ضمان لصيانة الاجهزه الكهربائية فقط مع اكبر مركز للصيانة تواصل الان مع صيانة فريجيدير
    للصيانة المنزلية

  33. تقدم لك شركة حراسات خاصة
    افضل العروض والخصومات على ساعات الحراسة المختلفة نعمل فى مجال امن وحراسة
    منذ فترات طويله ولدينا العديد من الخبرات التى تحقق لك الامان دائما


  34. في مراكز
    صيانة ويرلبول
    اقوى عروض الصيانه على ايدي متخصصين وقطع غيار اصلية الموقع الالكتروني:

  35. نحن في مراكز
    صيانه سوني
    و مراكز
    صيانه جليم جاز
    نقدم اجود خدمة صيانه باحدث المعدات والتقنيات وفك وتركيب كافة الاجهزة وصيانه للاعطال المختلفة الموقع الالكتروني::


  36. تواصل معنا الان من خلال ارقام الصيانه في مراكز
    صيانة كريازي

    لدينا فريق من الكول سنتر لخدمتكم 24 ساعة يمكنكم طلب خدمة الصيانه هاتفيا او من خلال التوجة الى مراكز الصيانه الاقرب اليك الموقع الالكتروني:

  37. للحصول على النجاح والتفوق واعلى الدرجات في
    معادلة كلية الهندسة
    واقوى كتب الشرح والادوات الهندسية في
    معادلة الهندسة
    بافضل الاسعار تحت اشراف اساتذة ذوي خبرة وكفاءة عالية زوروا موقعنا الالكتروني::

  38. نقدم في شركة البدر تركيب
    صناعي ومعدني في كافة انحاء المملكة باسعار مناسبة الموقع الالكتروني:

  39. اسعار قابلة للمنافسة علي اعلي مستوي من التميز في العمل صيانة تكنوجاز من التقدم في العمل افضل الخدمات المتميزه الان لدينا افضل الخدمات المتميزه صيانة باناسونيك خصومات لدي الشركة علي اعلي جودة افضل الخدمات والتقنيات المتطورة في العمل

  40. مع فريق الصيانة المتخصص في شركة جليم جاز ستتمكن من الحصول على اقوى خدمات صيانة جليم جاز الفورية و المتكاملة لاصلاح اي عطل يواجهك في اجهزة جليم جاز الكهربائية ، و ذلك بإستخدام افضل قطع الغيار الاصلية المستوردة .

  41. كما تقدم شركة البدر ارقى تصميمات قرميد وطوب و التي يمكنك تركيبها في اسرع وقت على يد عمالة متخصصين في كافة اعمال تركيب طوب وقرميد بمهارة عالية فى كافة انواع قرميد ,وباقل الاسعار الممكن .

  42. الان شركة اسفلت اكبر شركة متخصصه في مجال سفلتة الطرق تقدم لكم افضل شركة اسفلت في المدينة المنوره والمملكة العربية السعودية بأكملها لعي اعلي مستوي وافضل خدمة.

  43. خصومات مميزة من خلال شركة تنظيف خزانات بمكة و التي تقدم لكم خدمات صيانة و عزل و تنظيف خزانات بمكة علي أفضل مستوي الان

  44. مع فريق الصيانة المتخصص في شركة كاريير ستتمكن من الحصول على اقوى خدمات صيانة كاريير الفورية و المتكاملة لاصلاح اي عطل يواجهك في اجهزة كاريير الكهربائية ، و ذلك بإستخدام افضل قطع الغيار الاصلية المستوردة .

  45. تعلن مؤسسة ابراج دبي ان يوجد بها الكثير من الشركات المميزة باعمل المكافحة وهي شركة رش مبيدات بالدمام الكبري باعمال المكافحة والابادة .

  46. Interesting and informative article.. very useful to me.. thanks for sharing your wonderful ideas.. please keep on updating..

    Android Training in chennai

  47. Hi, i really enjoyed to read your article.. i got clear idea through your views and ideas.. thanks for sharing your post..

    Java Training in chennai | Dot Net Training in chennai

  48. ShengDe Group is a professianl company for produce Yoga Mat, Yoga Roller, Yoga Block, Yoga Ball and so on. ShengDe Group in Fuzhou in China, welcome to you visit the factory.

  49. I will do niche blog comment Just in 5$ .All comment relevant with your niche and UNIQUE .This off-page seo will increase your traffic and promote your business

  50. شركة كشف تسربات المياه
    البيت السعيد
    شركتنا هي الأفضل دائمًا في مجال كشف تسربات المياه وعلاجها:
    شركة البيت السعيد شركة كشف تسربات المياه لديها فريق ذات كفاءة عالية للغاية، تم تدريبه على العمل في أصعب الظروف وأخطرها على الإطلاق، فهو مدرب على استعمال كافة أنواع المعدات الحديثة المستخدمة في كشف التسربات

    شركة كشف تسربات المياه
    البيت السعيد
    للاستفسار عن جميع خدمات البيت السعيد عزل مائي و عزل حراري و عزل اسطح و عزل خزانات و عزل فوم وجميع انواع العوازل و رش مبيد و مكافحة حشرات و تسليك مجاري و شركة كشف تسربات المياه
    و فحص فلل
    و صيانة مباني و ترميم منازل و نقل عفش و اثاث بالرياض يرجي الاتصال على 0543578920
    او زورو موقعنا على الانترنت

  51. Great content thanks for sharing this informative blog which provided me technical information keep posting.
    Robotics Training Center in Chennai | Robotics Project Center in Velachery

  52. I like the post format as you create user engagement in the complete article. It seems round up of all published posts. Thanks for gauging the informative posts.
    cara menggugurkan kandungan
    obat aborsi
    kalkulator kehamilan
    tanda tanda kehamilan

  53. Testing an application is become essential for any product to get an effective result. Your post helps you to gain more info on Testing domain
    Software training institutes in Chennai | Software testing training institutes in Chennai

  54. I hope your Testing tools content has unique identity across the world. Each and every blog in your website is very informative users. I am eagerly waiting for the next content.
    QTP training in Chennai | Loadrunner Training

  55. Hi dear, I like your post so much, and it is very good. Hope that we can communicate with each other. I want to introduce an aso services, I try it and I feel it is so good to us beginners.