{"id":6273,"date":"2015-08-18T12:15:34","date_gmt":"2015-08-18T09:15:34","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=6273"},"modified":"2017-12-19T13:49:17","modified_gmt":"2017-12-19T11:49:17","slug":"html5-video-tag-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/","title":{"rendered":"HTML5 Video Tag Example"},"content":{"rendered":"

The aim of this example is to introduce and show the usage of the video<\/code> tag of HTML5.<\/p>\n

Before HTML5, there was no standard for showing videos on a web page and videos could only be played with a plug-in (like flash).<\/p>\n

The HTML video<\/code> element is used to embed video content. It may contain several video sources, represented using the src attribute or the element; the browser will choose the most suitable one.
\n 
\n 
\n 
\n 
\n[ulp id=’tgm4cmEWcKUikZNn’]<\/p>\n

1. Basics<\/h2>\n

1.1 Initial Document Setup<\/h3>\n

Go ahead and create a new html document and add the basic sytnax in it like so:<\/p>\n

\r\n<!DOCTYPE html>\r\n<html>\r\n<head>\r\n\t<title>HTML5 Video Tag Example<\/title>\r\n<\/head>\r\n<body>\r\n\r\n<!-- STYLE SECTION -->\r\n\r\n<style type=\"text\/css\">\r\n\r\n<\/style>\r\n\r\n<!-- HTML SECTION -->\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
1.2 Understanding the Attributes<\/h3>\n
autoplay<\/code>
\nA Boolean attribute; if specified, the video will automatically begin to play back as soon as it can do so without stopping to finish loading the data.<\/p>\n
buffered<\/code>
\nAn attribute you can read to determine which time ranges of the media have been buffered. This attribute contains a TimeRanges object.<\/p>\n
controls<\/code>
\nIf this attribute is present, Gecko will offer controls to allow the user to control video playback, including volume, seeking, and pause\/resume playback.<\/p>\n
height<\/code>
\nThe height of the video’s display area, in CSS pixels.<\/p>\n
loop<\/code>
\nA Boolean attribute; if specified, we will, upon reaching the end of the video, automatically seek back to the start.<\/p>\n
muted<\/code>
\nA Boolean attribute which indicates the default setting of the audio contained in the video. If set, the audio will be initially silenced. Its default value is false, meaning that the audio will be played when the video is played.<\/p>\n
played<\/code>
\nA TimeRanges object indicating all the ranges of the video that have been played.<\/p>\n
poster<\/code>
\nA URL indicating a poster frame to show until the user plays or seeks. If this attribute isn’t specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame.<\/p>\n
src<\/code>
\nThe URL of the video to embed. This is optional; you may instead use the  element within the video block to specify the video to embed.<\/p>\n
width<\/code>
\nThe width of the video’s display area, in CSS pixels.<\/p>\n
1.3 Media Formats Supported<\/h3>\n
1. WebM<\/strong>
\nThe WebM format is based on a restricted version of the Matroska container format. It always uses the VP8 or VP9 video codec and the Vorbis or Opus audio codec. WebM is natively supported in desktop and mobile Gecko (Firefox), Chrome and Opera, and support for the format can be added to Internet Explorer and Safari (but not on iOS) by installing an add-on.<\/p>\n
video\/webm<\/strong>
\nA WebM media file containing video (and possibly audio as well).<\/p>\n
2. Ogg Theora Vorbis<\/strong>
\nThe Ogg container format with the Theora video codec and the Vorbis audio codec is supported in desktop\/mobile Gecko (Firefox), Chrome, and Opera, and support for the format can be added to Safari (but not on iOS) by installing an add-on. The format is not supported in Internet Explorer in any way.<\/p>\n
WebM is generally preferred over Ogg Theora Vorbis when available, because it provides a better compression to quality ratio and is supported in more browsers. The Ogg format can however be used to support older browser versions (for example Firefox 3.5\/3.6 don’t support WebM, but do support Ogg.)<\/p>\n
video\/ogg<\/strong>
\nAn ogg file containing video (and possibly also audio).<\/p>\n
3. MP4 H.264<\/strong>
\nThe MP4 container format with the H.264 video codec and the AAC audio codec is natively supported by desktop\/mobile Internet Explorer, Safari and Chrome, but Chromium and Opera do not support the format. IE and Chrome also support the MP3 audio codec in the MP4 container, but Safari does not. Firefox\/Firefox for Android\/Firefox OS supports the format in some cases, but only when a third-party decoder is available, and the device hardware can handle the profile used to encode the MP4.<\/p>\n
1.4 A Basic Application<\/h3>\n
A very basic application where we insert a video into a webpage would be the following:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<video src=\"videos\/minions.mp4\" controls><\/video>\r\n<!-- src to locate the video, controls attribute to show video controls -->\r\n<\/pre>\n
In the top left side of your browser the video would show and require to press the play button to start:
\n
\"Basic<\/a>
Basic Video in HTML5<\/figcaption><\/figure><\/p>\n
1.5 HTML5 Video Browser Support<\/h3>\n
The following graphics show the support given to HTML5 video and its features by browsers.
\n
\"Browser<\/a>
Browser Compatibility<\/figcaption><\/figure><\/p>\n
2. Cases and Examples<\/h2>\n
2.1 Include Various Formats<\/h3>\n
There are three video formats that work natively in some browsers. Unfortunately, no format works in all browsers, so you need to do at least two if you want meaningful HTML5 video support.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<video controls>\r\n  <source src=\"videos\/minions.mp4\" type=\"video\/mp4\">\r\n  <source src=\"videos\/minions.webm\" type=\"video\/webm\">\r\n  <source src=\"videos\/minions.ogg\" type=\"video\/ogg\">\r\n<\/video>\r\n<\/pre>\n
Notice we used the source<\/code> tag to add videos of different formats, and not inside the video tag as an attribute.<\/p>\n
Minimally, you must use MP4 + H.264, with AAC or MP3. MP4 video plays natively in Safari, Chrome, and IE9 (Vista\/Windows 7). It is also your best option for a Flash video fallback, and plays natively on many devices (iOS, Android, Blackberry, PSP, Xbox, PS3, etc.). Use H.264 High Profile for the best quality, or Baseline profile if you want the same video to be playable on mobile devices.<\/p>\n
Beyond that, use either WebM + VP8 or Ogg + Theora with Vorbis audio for other browsers. WebM works in Firefox (4+), Chrome (6+ or Chromium), and Opera (10.60+), and Ogg works in Firefox (3.5+), Chrome (3+), and Opera (10.54+).<\/p>\n
The result in the browser woulld be just the same video but compatible (able to be read) by all browsers.
\n
\"Browser's<\/a>
Browser’s interface for HTML5 Video<\/figcaption><\/figure><\/p>\n
2.2 Custom Video Size<\/h3>\n
Attributes (most of which we mentioned and explained in the first section) are very useful when considering a customized video element that fits your needs inside the page. So in this section, we’ll have a look at how we can use the various attributes offered for the video element to enhance our content.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<!-- added a custom width and height for the video size and also autoplay -->\r\n<video width=\"640px\" height=\"320px\" autoplay controls>\r\n  <source src=\"videos\/minions.mp4\" type=\"video\/mp4\">\r\n  <source src=\"videos\/minions.webm\" type=\"video\/webm\">\r\n  <source src=\"videos\/minions.ogg\" type=\"video\/ogg\">\r\n<\/video>\r\n<\/pre>\n
The result would be a scaled video size that would automatically play as soon as the webpage is opened.
\n
\"Autoplay<\/a>
Autoplay is ON and the video is in a custom size!<\/figcaption><\/figure><\/p>\n
2.3 Using a Custom Poster for the Video<\/h3>\n
Attributes also provide us a very cool feature called the poster<\/code>. It gives the video an inital default image to display before being played.<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<!-- added a 'poster' attribute and specified the location of the poster image -->\r\n<video width=\"856px\" height=\"480px\" poster=\"image.jpg\" controls>\r\n  <source src=\"videos\/minions.mp4\" type=\"video\/mp4\">\r\n  <source src=\"videos\/minions.webm\" type=\"video\/webm\">\r\n  <source src=\"videos\/minions.ogg\" type=\"video\/ogg\">\r\n<\/video>\r\n<\/pre>\n
The result would be a poster image overlaying our video.
\n
\"Poster<\/a>
Poster Image over a HTML5 Video<\/figcaption><\/figure><\/p>\n
2.4 Fullscreen HTML5 Video<\/h3>\n
When talking about fullscreen video of HTML5, it all comes down to CSS (unless you want to use javascript). You can actually override any attributes regarding the size of the video and force a video to display fullscreen like this:<\/p>\n
\r\n<!-- HTML SECTION  -->\r\n<video width=\"856px\" height=\"480px\" autoplay>\r\n  <source src=\"videos\/minions.mp4\" type=\"video\/mp4\">\r\n  <source src=\"videos\/minions.webm\" type=\"video\/webm\">\r\n  <source src=\"videos\/minions.ogg\" type=\"video\/ogg\">\r\n<\/video>\r\n<\/pre>\n
Applying this CSS snippet will make it possible:<\/p>\n
\r\n<!-- STYLE  SECTION -->\r\n<style type=\"text\/css\">\r\nvideo {\r\n    position: fixed;\r\n    top: 50%;\r\n    left: 50%;\r\n    min-width: 100%;\r\n    min-height: 100%;\r\n    width: auto;\r\n    height: auto;\r\n    z-index: -100;\r\n    -webkit-transform: translateX(-50%) translateY(-50%);\r\n    transform: translateX(-50%) translateY(-50%);\r\n}\r\n<\/style>\r\n<\/pre>\n
\"Fullscreen<\/a>
Fullscreen HTML5 Video<\/figcaption><\/figure>\n
3. Conclusion<\/h2>\n
To conclude, HTML5 video is a quick and easy way to add video content to websites. It provides full compatibility with browsers and has a solid mobile device support. Built in video\/audio playback make it useless to consider third party players like before with quicktime, flash and silverlight (even though there are certain advantages why some pages still use them).<\/p>\n
Customization is pretty good for now and provides a very clean code. Do remember to convert videos into the right formats for all-browser compatibility, and shrink them in size as much as you can to prevent a slow page loading experience to the user.<\/p>\n
4. Download<\/h2>\n
Download<\/strong>
\nYou can download the full source code of this example here: HTML5 Video Tag<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"
The aim of this example is to introduce and show the usage of the video tag of HTML5. Before HTML5, there was no standard for showing videos on a web page and videos could only be played with a plug-in (like flash). The HTML video element is used to embed video content. It may contain …<\/p>\n","protected":false},"author":75,"featured_media":914,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[],"class_list":["post-6273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-html5"],"yoast_head":"\nHTML5 Video Tag Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"The aim of this example is to introduce and show the usage of the video tag of HTML5. Before HTML5, there was no standard for showing videos on a web page\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML5 Video Tag Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"The aim of this example is to introduce and show the usage of the video tag of HTML5. Before HTML5, there was no standard for showing videos on a web page\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/fabiocimo\" \/>\n<meta property=\"article:published_time\" content=\"2015-08-18T09:15:34+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-19T11:49:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Fabio Cimo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@fabiocimo\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fabio Cimo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/\"},\"author\":{\"name\":\"Fabio Cimo\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\"},\"headline\":\"HTML5 Video Tag Example\",\"datePublished\":\"2015-08-18T09:15:34+00:00\",\"dateModified\":\"2017-12-19T11:49:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/\"},\"wordCount\":1225,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"articleSection\":[\"HTML5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/\",\"name\":\"HTML5 Video Tag Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"datePublished\":\"2015-08-18T09:15:34+00:00\",\"dateModified\":\"2017-12-19T11:49:17+00:00\",\"description\":\"The aim of this example is to introduce and show the usage of the video tag of HTML5. Before HTML5, there was no standard for showing videos on a web page\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML5\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/html5\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"HTML5 Video Tag Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22\",\"name\":\"Fabio Cimo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g\",\"caption\":\"Fabio Cimo\"},\"description\":\"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.\",\"sameAs\":[\"https:\/\/www.facebook.com\/fabiocimo\",\"https:\/\/al.linkedin.com\/in\/fabiocimo\",\"https:\/\/x.com\/fabiocimo\",\"https:\/\/www.youtube.com\/fabiocimo1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML5 Video Tag Example - Web Code Geeks - 2026","description":"The aim of this example is to introduce and show the usage of the video tag of HTML5. Before HTML5, there was no standard for showing videos on a web page","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/","og_locale":"en_US","og_type":"article","og_title":"HTML5 Video Tag Example - Web Code Geeks - 2026","og_description":"The aim of this example is to introduce and show the usage of the video tag of HTML5. Before HTML5, there was no standard for showing videos on a web page","og_url":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_author":"https:\/\/www.facebook.com\/fabiocimo","article_published_time":"2015-08-18T09:15:34+00:00","article_modified_time":"2017-12-19T11:49:17+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","type":"image\/jpeg"}],"author":"Fabio Cimo","twitter_card":"summary_large_image","twitter_creator":"@fabiocimo","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Fabio Cimo","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/"},"author":{"name":"Fabio Cimo","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22"},"headline":"HTML5 Video Tag Example","datePublished":"2015-08-18T09:15:34+00:00","dateModified":"2017-12-19T11:49:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/"},"wordCount":1225,"commentCount":0,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","articleSection":["HTML5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/","url":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/","name":"HTML5 Video Tag Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","datePublished":"2015-08-18T09:15:34+00:00","dateModified":"2017-12-19T11:49:17+00:00","description":"The aim of this example is to introduce and show the usage of the video tag of HTML5. Before HTML5, there was no standard for showing videos on a web page","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/html5-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/html5\/html5-video-tag-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"HTML5","item":"https:\/\/www.webcodegeeks.com\/category\/html5\/"},{"@type":"ListItem","position":3,"name":"HTML5 Video Tag Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/1dfb88b4a8d08c37a6080311fd330a22","name":"Fabio Cimo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b3df055f2e1b62e238889fafbb16121c68aab1adcd11af670e185cafae201b3b?s=96&d=mm&r=g","caption":"Fabio Cimo"},"description":"Fabio is a passionate student in web tehnologies including front-end (HTML\/CSS) and web design. He likes exploring as much as possible about the world wide web and how it can be more productive for us all. Currently he studies Computer Engineering, at the same time he works as a freelancer on both web programming and graphic design.","sameAs":["https:\/\/www.facebook.com\/fabiocimo","https:\/\/al.linkedin.com\/in\/fabiocimo","https:\/\/x.com\/fabiocimo","https:\/\/www.youtube.com\/fabiocimo1"],"url":"https:\/\/www.webcodegeeks.com\/author\/fabio-cimo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6273","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/75"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=6273"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/6273\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/914"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=6273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=6273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=6273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}