{"id":2753,"date":"2020-12-10T16:35:49","date_gmt":"2020-12-10T16:35:49","guid":{"rendered":"http:\/\/mp4gain.com\/mp4gain\/?p=2753"},"modified":"2020-12-10T16:35:49","modified_gmt":"2020-12-10T16:35:49","slug":"video-on-your-website","status":"publish","type":"post","link":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/","title":{"rendered":"Video on your website"},"content":{"rendered":"

Video on your website<\/strong><\/p>\n

\"HTML5<\/p>\n

Anyone who has visited YouTube.com in the last four years knows that it is possible to embed a video on a web page.<\/p>\n

\"HTML5<\/p>\n

Before HTML5, there was no standard way to do this, in fact any video you watched on the internet was added via third party plugins like QuickTime, RealPlayer or Flash (which is what YouTube uses). These add-ons are pretty well integrated with the browser, so you may not even know you are using them. But this is until you try to watch a video on a platform without plugin support.<\/p>\n

HTML5 defines a standard way to insert video into a web page using the <video> element. Support for <video> is still evolving and this is a polite way of saying that it doesn’t work yet, at least it doesn’t work everywhere. But don’t despair! There are alternative ways to add, and in abundance.<\/p>\n

<video> support is only a small part of the problem. Before talking about HTML5 video, you must first understand the video itself.<\/p>\n

Video containers
\nYou can think of video files as “AVI” or “MP4”. Actually “AVI” and “MP4” are just file formats. Like a ZIP file, which can store any file, the video formats define the storage, not the data. Actually, things are a bit more complicated due to the video streaming not always supporting container formats, but this is not important yet.<\/p>\n

A video file generally contains multiple tracks: a video track (no audio), as well as one or more audio tracks (no video). The tracks are usually interconnected, the audio track contains markers to synchronize the audio with the video. Additional tracks can contain metadata such as the aspect ratio of the video or the language of the audio track. Containers can also contain metadata such as the title of the video itself, the cover, the episode number (for the TV series), etc.<\/p>\n

There are many video container formats, these are some of the most popular.<\/p>\n

MPEG-4, usually with mp4 or m4v extension. MPEG-4 is based on the old Apple QuickTime container (mov files). The movie trailers on Apple’s site still use the old container, but the movies on iTunes come in MPEG-4 container format.
\nOgg, usually with the extension ogv. Ogg is an open source open source standard for users, free of patents. The Firefox 3.5, Chrome 4, and Opera 10.5 browsers have built-in support without special plugins: Ogg containers, Ogg video (called “Theora”), and Ogg audio (called “Vorbis”). Ogg is compatible with all major Linux distributions and can also be used on Mac and Windows by installing QuickTime components or DirectShow filters, respectively. Player VLC perfectly plays Ogg files on any platform.
\nFlash video, usually with the extension flv. For Flash videos, Adobe Flash is used, which is not surprising. Before Flash 9.0.60.184 (also known as Flash Player 9 Update 3), only the Flash archive was supported. Later versions also support the MPEG-4 container.
\nWebM, usually with the webm extension. It is an open, patent-free standard designed specifically for use with HTML5 video, enhanced with the VP8 video codec and the Vorbis audio codec. Technically similar to another format called Matroska. Supported natively, without separate plugins, in the latest versions of Google Chrome, Mozilla Firefox, and Opera.
\nASF, usually with an .asf extension. The ASF container format was invented by Microsoft for streaming video. It included a lovely DRM scheme that prevented users from backing up their legally acquired licenses. Therefore, if for any reason you lost the license of the content, you felt you had to buy it again.
\nAudio and video interleaving, usually with the avi extension. The AVI container format was invented by Microsoft at a time when it was considered surprising that computers could play video. Features of recent file formats, such as metadata, are not officially supported. Also, this format is not officially supported by most modern video and audio codecs in use. It is the default format for popular encoders like MEncoder.
\nVideo codecs
\nWhen you talk about “watching a video,” it is probably a combination of a video stream and an audio stream. But you don’t have two different files, you have a “video”. It can be an AVI file or an MP4 file, which is just a container format like a ZIP file that contains various types of files inside.<\/p>\n","protected":false},"excerpt":{"rendered":"

Video on your website Anyone who has visited YouTube.com in the last four years knows that it is possible to embed a video on a web page. Before HTML5, there was no standard way to do this, in fact any video you watched on the internet was added via third party plugins like QuickTime, RealPlayer … Continue reading “Video on your website”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[56005,56006,55999,56000,56001,56004,56003,56002,56015,56018,56011,56010,56016,56017,56013,56012,56021,56019,56022,56026,56020,56024,56023,56025,55998,56008,56007,56031,56029,56032,56030,56039,56040,55997,56028,56009,56014,56036,56033,56027,56035,56034,56037,56038],"class_list":["post-2753","post","type-post","status-publish","format-standard","hentry","category-audio-video","tag-can-html5-be-video","tag-can-i-use-html5-video","tag-cant-play-html5-video","tag-cant-play-html5-video-chrome","tag-cant-play-html5-video-firefox","tag-cant-play-html5-video-in-ie-11","tag-cant-play-html5-video-opera","tag-cant-watch-html5-video","tag-does-chrome-support-html5-video","tag-does-firefox-have-html5-video","tag-does-html5-video-support-wmv","tag-does-html5-video-tag-stream","tag-does-safari-support-html5-video","tag-does-youtube-use-html5-video","tag-how-does-html5-video-streaming-work","tag-how-does-html5-video-work","tag-how-download-html5-video","tag-how-html5-video-works","tag-how-to-download-html5-video-chrome","tag-how-to-download-html5-video-from-website","tag-how-to-html5-video","tag-how-to-make-html5-video","tag-how-to-make-html5-video-load-faster","tag-how-to-play-html5-video-on-chrome","tag-html5-is-video-playing","tag-html5-video-doesnt-autoplay","tag-html5-video-dont-preload","tag-html5-video-is-not-playing","tag-html5-video-is-not-playing-in-chrome","tag-html5-video-is-not-working-in-safari","tag-html5-video-is-paused","tag-html5-video-will-not-play","tag-html5-video-will-not-play-in-firefox","tag-is-html5-video-file","tag-m4v-is-html5-video","tag-video-do-html5","tag-what-does-html5-video-not-found-mean","tag-what-is-error-code-html5-video-4","tag-what-is-html5-video","tag-what-is-html5-video-file-not-found","tag-what-is-ssl-html5-video","tag-what-is-youtube-html5-video-player","tag-which-browser-support-html5-video","tag-why-html5-video-not-working"],"yoast_head":"\nVideo on your website - mp4gain.com<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Video on your website - mp4gain.com\" \/>\n<meta property=\"og:description\" content=\"Video on your website Anyone who has visited YouTube.com in the last four years knows that it is possible to embed a video on a web page. Before HTML5, there was no standard way to do this, in fact any video you watched on the internet was added via third party plugins like QuickTime, RealPlayer … Continue reading "Video on your website"\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/\" \/>\n<meta property=\"og:site_name\" content=\"mp4gain.com\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/mp4gain\" \/>\n<meta property=\"article:published_time\" content=\"2020-12-10T16:35:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg\" \/>\n<meta name=\"author\" content=\"R. Arias\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@mp4gain\" \/>\n<meta name=\"twitter:site\" content=\"@mp4gain\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"R. Arias\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/\"},\"author\":{\"name\":\"R. Arias\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc\"},\"headline\":\"Video on your website\",\"datePublished\":\"2020-12-10T16:35:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/\"},\"wordCount\":733,\"image\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg\",\"keywords\":[\"can html5 be video\",\"can i use html5 video\",\"can't play html5 video\",\"can't play html5 video chrome\",\"can't play html5 video firefox\",\"can't play html5 video in ie 11\",\"can't play html5 video opera\",\"can't watch html5 video\",\"does chrome support html5 video\",\"does firefox have html5 video\",\"does html5 video support wmv\",\"does html5 video tag stream\",\"does safari support html5 video\",\"does youtube use html5 video\",\"how does html5 video streaming work\",\"how does html5 video work\",\"how download html5 video\",\"how html5 video works\",\"how to download html5 video chrome\",\"how to download html5 video from website\",\"how to html5 video\",\"how to make html5 video\",\"how to make html5 video load faster\",\"how to play html5 video on chrome\",\"html5 is video playing\",\"html5 video doesn't autoplay\",\"html5 video don't preload\",\"html5 video is not playing\",\"html5 video is not playing in chrome\",\"html5 video is not working in safari\",\"html5 video is paused\",\"html5 video will not play\",\"html5 video will not play in firefox\",\"is html5 video file\",\"m4v is html5 video\",\"video do html5\",\"what does html5 video not found mean\",\"what is error code html5 video 4\",\"what is html5 video\",\"what is html5 video file not found\",\"what is ssl html5 video\",\"what is youtube html5 video player\",\"which browser support html5 video\",\"why html5 video not working\"],\"articleSection\":[\"Audio and video\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/\",\"url\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/\",\"name\":\"Video on your website - mp4gain.com\",\"isPartOf\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg\",\"datePublished\":\"2020-12-10T16:35:49+00:00\",\"author\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc\"},\"breadcrumb\":{\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#primaryimage\",\"url\":\"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg\",\"contentUrl\":\"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mp4gain.com\/mp4gain\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Video on your website\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#website\",\"url\":\"https:\/\/mp4gain.com\/mp4gain\/\",\"name\":\"mp4gain.com\",\"description\":\"Mp4 Gain Official Website\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mp4gain.com\/mp4gain\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc\",\"name\":\"R. Arias\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g\",\"caption\":\"R. Arias\"},\"description\":\"R. Arias is the author of this article and has extensive experience for more than 30 years as a recording engineer and audio specialist, as well as more than 20 years of experience creating algorithms related to audio and video. Linkedin\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/ricardoariaszorrilla\/\"],\"url\":\"https:\/\/mp4gain.com\/mp4gain\/author\/mp4gain\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Video on your website - mp4gain.com","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:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/","og_locale":"en_US","og_type":"article","og_title":"Video on your website - mp4gain.com","og_description":"Video on your website Anyone who has visited YouTube.com in the last four years knows that it is possible to embed a video on a web page. Before HTML5, there was no standard way to do this, in fact any video you watched on the internet was added via third party plugins like QuickTime, RealPlayer … Continue reading \"Video on your website\"","og_url":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/","og_site_name":"mp4gain.com","article_publisher":"https:\/\/www.facebook.com\/mp4gain","article_published_time":"2020-12-10T16:35:49+00:00","og_image":[{"url":"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg","type":"","width":"","height":""}],"author":"R. Arias","twitter_card":"summary_large_image","twitter_creator":"@mp4gain","twitter_site":"@mp4gain","twitter_misc":{"Written by":"R. Arias","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#article","isPartOf":{"@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/"},"author":{"name":"R. Arias","@id":"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc"},"headline":"Video on your website","datePublished":"2020-12-10T16:35:49+00:00","mainEntityOfPage":{"@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/"},"wordCount":733,"image":{"@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg","keywords":["can html5 be video","can i use html5 video","can't play html5 video","can't play html5 video chrome","can't play html5 video firefox","can't play html5 video in ie 11","can't play html5 video opera","can't watch html5 video","does chrome support html5 video","does firefox have html5 video","does html5 video support wmv","does html5 video tag stream","does safari support html5 video","does youtube use html5 video","how does html5 video streaming work","how does html5 video work","how download html5 video","how html5 video works","how to download html5 video chrome","how to download html5 video from website","how to html5 video","how to make html5 video","how to make html5 video load faster","how to play html5 video on chrome","html5 is video playing","html5 video doesn't autoplay","html5 video don't preload","html5 video is not playing","html5 video is not playing in chrome","html5 video is not working in safari","html5 video is paused","html5 video will not play","html5 video will not play in firefox","is html5 video file","m4v is html5 video","video do html5","what does html5 video not found mean","what is error code html5 video 4","what is html5 video","what is html5 video file not found","what is ssl html5 video","what is youtube html5 video player","which browser support html5 video","why html5 video not working"],"articleSection":["Audio and video"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/","url":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/","name":"Video on your website - mp4gain.com","isPartOf":{"@id":"https:\/\/mp4gain.com\/mp4gain\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#primaryimage"},"image":{"@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#primaryimage"},"thumbnailUrl":"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg","datePublished":"2020-12-10T16:35:49+00:00","author":{"@id":"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc"},"breadcrumb":{"@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#primaryimage","url":"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg","contentUrl":"https:\/\/i.ytimg.com\/vi\/yY6XnbWnK4o\/maxresdefault.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/mp4gain.com\/mp4gain\/video-on-your-website\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mp4gain.com\/mp4gain\/"},{"@type":"ListItem","position":2,"name":"Video on your website"}]},{"@type":"WebSite","@id":"https:\/\/mp4gain.com\/mp4gain\/#website","url":"https:\/\/mp4gain.com\/mp4gain\/","name":"mp4gain.com","description":"Mp4 Gain Official Website","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mp4gain.com\/mp4gain\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mp4gain.com\/mp4gain\/#\/schema\/person\/36ffddda9988e565bd4a9013324ce2cc","name":"R. Arias","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/8ca03263e87418cfde07c571c83fa172297ce230085e4f181b9e5f9af745d6be?s=96&d=blank&r=g","caption":"R. Arias"},"description":"R. Arias is the author of this article and has extensive experience for more than 30 years as a recording engineer and audio specialist, as well as more than 20 years of experience creating algorithms related to audio and video. Linkedin","sameAs":["https:\/\/www.linkedin.com\/in\/ricardoariaszorrilla\/"],"url":"https:\/\/mp4gain.com\/mp4gain\/author\/mp4gain\/"}]}},"_links":{"self":[{"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/posts\/2753","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/comments?post=2753"}],"version-history":[{"count":0,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/posts\/2753\/revisions"}],"wp:attachment":[{"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/media?parent=2753"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/categories?post=2753"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mp4gain.com\/mp4gain\/wp-json\/wp\/v2\/tags?post=2753"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}