{"id":163,"date":"2011-05-03T12:23:17","date_gmt":"2011-05-03T12:23:17","guid":{"rendered":"http:\/\/blog.rimazrauf.info\/?p=163"},"modified":"2011-05-03T17:27:15","modified_gmt":"2011-05-03T17:27:15","slug":"adding-video-to-your-web-page-rimaz-rauf","status":"publish","type":"post","link":"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/","title":{"rendered":"Adding Video to Your Web Page &#8211; Rimaz Rauf"},"content":{"rendered":"<p style=\"text-align: justify;\">Videos can be added to your Web pages to explain the concepts or process instead of describing it in lengthy paragraphs or steps. Video files are huge, viewing them on Net will take several minutes to download. Visitors also must have the <strong>right plug-in to view them in your browser<\/strong>. It is recommended to give <span style=\"color: #800000;\">links to the video files, rather than embedding them in Web page<\/span>. If you embed the video file you are forcing visitors to download it or stream it\u00c2\u00a0online.<\/p>\n<p>Some of the more common video formats are:<\/p>\n<ul>\n<li>.swf &#8211; Shockwave\/Flash File (by Macromedia\/Adobe)<\/li>\n<li>.wmv &#8211; Windows Media Player video format (by Microsoft)<\/li>\n<li>.mov &#8211; Quicktime video format (by Apple)<\/li>\n<li>.mpeg &#8211; Video compression format (specified by the Moving Pictures Experts Group)<\/li>\n<li>.ogg &#8211; Open standard container format maintained by the Xiph.Org Foundation. Also includes .ogv, .oga, .ogx, and .spx extensions<\/li>\n<li>.webM &#8211; royalty-free, high-quality open video compression format for use with HTML5 video.<\/li>\n<\/ul>\n<p style=\"text-align: justify;\">&nbsp;<\/p>\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\">\n<tbody>\n<tr>\n<td>\n<table border=\"0\" cellspacing=\"1\" cellpadding=\"1\" width=\"100%\">\n<tbody>\n<tr>\n<td style=\"background-color: #cad4e1;\" width=\"20%\">AVI (Audio Video Interleave)<\/td>\n<td width=\"80%\">This format, originally a Windows standard, is now somewhat more widely available. It&#8217;s a good choice if your visitors will almost exclusively be using Windows.<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #a2e1ad;\" width=\"20%\">MPEG (Motion Picture Experts Group)<\/td>\n<td width=\"80%\">This format is the most widely supported, and viewers are available for most platforms. Because it&#8217;s highly compressed and usable, MPEG is the best universal choice.<\/td>\n<\/tr>\n<tr>\n<td style=\"background-color: #e4ba9e;\" width=\"20%\" valign=\"top\">QuickTime<\/td>\n<td width=\"80%\">This format, originally a Macintosh standard, is now available for Windows as well. It provides a good quality if your visitors have the plug-in and use personal computers.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: justify;\"><!--more--><\/p>\n<p style=\"font-size: 12pt; background-color: #2d2b2b; text-align: justify;\"><span style=\"color: #ffff00;\"><strong>Method One -\u00c2\u00a0Link to the Video File<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\"><strong><span style=\"color: #0000ff;\">&lt;a src=&#8221;http:\/\/youtu.be\/7_L_5vrHoWQ&#8221; \/&gt; Gnomeo &amp; Juliet &lt;\/a&gt;<\/span><\/strong><\/p>\n<p style=\"text-align: justify;\">This is an easy method , which will have a Text link to the Video file &amp; when you click the text link it will open the video in a player \u00e2\u20ac\u201c most probably the default player in your machine.<\/p>\n<p style=\"font-size: 12pt; background-color: #2d2b2b; text-align: justify;\"><span style=\"color: #ffff00;\"><strong>Method Two -\u00c2\u00a0Embedding the Video File<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #0000ff;\"><strong>&lt;embed src=&#8221;your file location.mpeg&#8221; width=&#8221;500&#8243; height=&#8221;400&#8243; autostart=&#8221;true&#8221;&gt;&lt;\/embed&gt;<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\">This is where you Embed the Video in to the web page, which will let you to view the video on the web browser.<\/p>\n<p style=\"font-size: 12pt; background-color: #2d2b2b; text-align: justify;\"><span style=\"color: #ffff00;\"><strong>Method Three -\u00c2\u00a0Embedding Using HTML5<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\">Many modern websites shows videos. HTML5 provides a standard for showing them.<\/p>\n<p style=\"text-align: justify;\">Until now, there has never been a standard for showing video on a web page.<\/p>\n<p style=\"text-align: justify;\">Today, most videos are shown through a plugin (like flash). However, not all browsers have the same plugins.<\/p>\n<p style=\"text-align: justify;\">HTML5 specifies a standard way to include video, with the video element.<\/p>\n<hr \/>\n<h2 style=\"text-align: justify;\">Video Formats<\/h2>\n<p style=\"text-align: justify;\">Currently, there are 3 supported video formats for the video element:<\/p>\n<table border=\"1\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\">\n<tbody>\n<tr>\n<th width=\"20%\" align=\"left\">Format<\/th>\n<th width=\"16%\" align=\"left\">IE<\/th>\n<th width=\"16%\" align=\"left\">Firefox<\/th>\n<th width=\"16%\" align=\"left\">Opera<\/th>\n<th width=\"16%\" align=\"left\">Chrome<\/th>\n<th width=\"16%\" align=\"left\">Safari<\/th>\n<\/tr>\n<tr>\n<td>Ogg<\/td>\n<td>No<\/td>\n<td>3.5+<\/td>\n<td>10.5+<\/td>\n<td>5.0+<\/td>\n<td>No<\/td>\n<\/tr>\n<tr>\n<td>MPEG 4<\/td>\n<td>9.0+<\/td>\n<td>No<\/td>\n<td>No<\/td>\n<td>5.0+<\/td>\n<td>3.0+<\/td>\n<\/tr>\n<tr>\n<td>WebM<\/td>\n<td>No<\/td>\n<td>4.0+<\/td>\n<td>10.6+<\/td>\n<td>6.0+<\/td>\n<td>No<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<ul style=\"text-align: justify;\">\n<li>Ogg = Ogg files with Theora video codec and Vorbis audio codec<\/li>\n<li>MPEG4 = MPEG 4 files with H.264 video codec and AAC audio codec<\/li>\n<li>WebM = WebM files with VP8 video codec and Vorbis audio codec<\/li>\n<\/ul>\n<hr \/>\n<h2 style=\"text-align: justify;\">How It Works<\/h2>\n<p style=\"text-align: justify;\">To show a video in <strong>HTML5<\/strong>, this is all you need:<\/p>\n<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" width=\"100%\">\n<tbody>\n<tr>\n<td style=\"font-size: 12pt;\"><span style=\"color: #0000ff;\"><strong>&lt;video src=&#8221;your file location.ogg&#8221; controls=&#8221;controls&#8221;&gt;&lt;\/video&gt;<\/strong><\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p style=\"text-align: justify;\">The control attribute is for adding play, pause, and volume controls.<\/p>\n<p style=\"text-align: justify;\">It is also always a good idea to include the width and height attributes.<\/p>\n<p style=\"text-align: justify;\">Insert content between the &lt;video&gt; and &lt;\/video&gt; tags for browsers that do not support the video element.<\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #ff0000;\"><strong>Example 1 : <\/strong><\/span><span style=\"color: #800000;\"><strong>HTML5\u00c2\u00a0<code>&lt;video&gt;<\/code> Tag<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #0000ff;\"><strong>&lt;video src=&#8221;\/video\/pass-countdown.ogg&#8221; width=&#8221;400&#8243; height=&#8221;250&#8243; controls&gt;&lt;p&gt;If you are reading this, it is because your browser does not support the &#8216;video&#8217; element. Try using the &#8216;object&#8217; element listed further down the page.&lt;\/p&gt;&lt;\/video&gt;<\/strong><\/span><\/p>\n<p style=\"text-align: justify;\">The latest version of HTML (i.e. HTML5) makes it extremely easy to add video to a web page. HTML5 allows you to use a\u00c2\u00a0<code>&lt;video&gt;<\/code> tag, which, believe it or not, embeds video right into your web page!<span style=\"color: #ff0000;\"><strong><span style=\"color: #000000;\"><br \/>\n<\/span><\/strong><\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #000000;\"><span style=\"color: #ff0000;\"><strong>Example 2 : <\/strong><\/span><span style=\"color: #800000;\"><strong>HTML5\u00c2\u00a0<code>&lt;object&gt;<\/code> Tag<\/strong><\/span><br \/>\n<\/span><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #ff0000;\"><strong><span style=\"color: #0000ff;\">&lt;object width=&#8221;425px&#8221; height=&#8221;360px&#8221; &gt;\t&lt;param name=&#8221;allowFullScreen&#8221; value=&#8221;true&#8221;\/&gt;\t&lt;param name=&#8221;wmode&#8221; value=&#8221;transparent&#8221;\/&gt;\t&lt;param name=&#8221;movie&#8221; value=&#8221;http:\/\/mediaservices.myspace.com\/services\/media\/embed.aspx\/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor=&#8221;\/&gt;\t&lt;embed src=&#8221;http:\/\/mediaservices.myspace.com\/services\/media\/embed.aspx\/m=5385825,t=1,mt=video,searchID=,primarycolor=,secondarycolor=&#8221; width=&#8221;425&#8243; height=&#8221;360&#8243; allowFullScreen=&#8221;true&#8221; type=&#8221;application\/x-shockwave-flash&#8221; wmode=&#8221;transparent&#8221;\/&gt;&lt;\/object&gt;<\/span><\/strong><\/span><\/p>\n<p style=\"text-align: justify;\">You can also embed HTML video code into your web page using the\u00c2\u00a0<code>&lt;object&gt;<\/code> tag. To cater for browsers that don&#8217;t support the\u00c2\u00a0<code>&lt;object&gt;<\/code> tag, you can nest the\u00c2\u00a0<code>&lt;embed&gt;<\/code> tag inside the\u00c2\u00a0<code>&lt;object&gt;<\/code> tag.<\/p>\n<p style=\"text-align: justify;\">The parameters inside the\u00c2\u00a0<code>param<\/code> attributes allow you to customize your video.<\/p>\n<p><object width=\"640\" height=\"510\"><param name=\"movie\" value=\"http:\/\/www.youtube.com\/v\/k8O4-I3HmGE?fs=1&amp;hl=en_US&amp;rel=0\" \/><param name=\"allowFullScreen\" value=\"true\" \/><param name=\"allowscriptaccess\" value=\"always\" \/><embed type=\"application\/x-shockwave-flash\" width=\"640\" height=\"510\" src=\"http:\/\/www.youtube.com\/v\/k8O4-I3HmGE?fs=1&amp;hl=en_US&amp;rel=0\" allowscriptaccess=\"always\" allowfullscreen=\"true\"><\/embed><\/object><\/p>\n<p style=\"text-align: justify;\"><span style=\"color: #0000ff;\">By &#8211; Rimaz Rauf<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Videos can be added to your Web pages to explain the concepts or process instead of describing it in lengthy paragraphs or steps. Video files are huge, viewing them on Net will take several minutes to download. Visitors also must have the right plug-in to view them in your browser. It is recommended to give<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"iawp_total_views":0,"footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v22.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Adding Video to Your Web Page - Rimaz Rauf - MOMENTIER<\/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:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Adding Video to Your Web Page - Rimaz Rauf - MOMENTIER\" \/>\n<meta property=\"og:description\" content=\"Videos can be added to your Web pages to explain the concepts or process instead of describing it in lengthy paragraphs or steps. Video files are huge, viewing them on Net will take several minutes to download. Visitors also must have the right plug-in to view them in your browser. It is recommended to give &hellip;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/\" \/>\n<meta property=\"og:site_name\" content=\"MOMENTIER\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/momentier\/\" \/>\n<meta property=\"article:published_time\" content=\"2011-05-03T12:23:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2011-05-03T17:27:15+00:00\" \/>\n<meta name=\"author\" content=\"Rimaz Sally\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rimaz Sally\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/\",\"url\":\"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/\",\"name\":\"Adding Video to Your Web Page - Rimaz Rauf - MOMENTIER\",\"isPartOf\":{\"@id\":\"https:\/\/www.momentier.com\/#website\"},\"datePublished\":\"2011-05-03T12:23:17+00:00\",\"dateModified\":\"2011-05-03T17:27:15+00:00\",\"author\":{\"@id\":\"https:\/\/www.momentier.com\/#\/schema\/person\/fda305c8e6933b783263cc4fd5c42497\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.momentier.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Adding Video to Your Web Page &#8211; Rimaz Rauf\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.momentier.com\/#website\",\"url\":\"https:\/\/www.momentier.com\/\",\"name\":\"MOMENTIER\",\"description\":\"Travel Blogger | Digital Marketer | Photographer | Personal Trainer\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.momentier.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.momentier.com\/#\/schema\/person\/fda305c8e6933b783263cc4fd5c42497\",\"name\":\"Rimaz Sally\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.momentier.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/2a9fde1f9abd5146f14442ff00052b77?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/2a9fde1f9abd5146f14442ff00052b77?s=96&r=g\",\"caption\":\"Rimaz Sally\"},\"description\":\"I am a young, passionate individual with an enthusiastic attitude who thrives in creative environments. I hold a solid understanding of the design process and display a keen interest in emerging technologies and innovative products. I'm considered to be a 'Jack of all trades' and a complete creative nutcase!\",\"sameAs\":[\"http:\/\/www.momentier.com\"],\"url\":\"https:\/\/www.momentier.com\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Adding Video to Your Web Page - Rimaz Rauf - MOMENTIER","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.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/","og_locale":"en_US","og_type":"article","og_title":"Adding Video to Your Web Page - Rimaz Rauf - MOMENTIER","og_description":"Videos can be added to your Web pages to explain the concepts or process instead of describing it in lengthy paragraphs or steps. Video files are huge, viewing them on Net will take several minutes to download. Visitors also must have the right plug-in to view them in your browser. It is recommended to give &hellip;","og_url":"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/","og_site_name":"MOMENTIER","article_publisher":"https:\/\/www.facebook.com\/momentier\/","article_published_time":"2011-05-03T12:23:17+00:00","article_modified_time":"2011-05-03T17:27:15+00:00","author":"Rimaz Sally","twitter_misc":{"Written by":"Rimaz Sally","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/","url":"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/","name":"Adding Video to Your Web Page - Rimaz Rauf - MOMENTIER","isPartOf":{"@id":"https:\/\/www.momentier.com\/#website"},"datePublished":"2011-05-03T12:23:17+00:00","dateModified":"2011-05-03T17:27:15+00:00","author":{"@id":"https:\/\/www.momentier.com\/#\/schema\/person\/fda305c8e6933b783263cc4fd5c42497"},"breadcrumb":{"@id":"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.momentier.com\/adding-video-to-your-web-page-rimaz-rauf\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.momentier.com\/"},{"@type":"ListItem","position":2,"name":"Adding Video to Your Web Page &#8211; Rimaz Rauf"}]},{"@type":"WebSite","@id":"https:\/\/www.momentier.com\/#website","url":"https:\/\/www.momentier.com\/","name":"MOMENTIER","description":"Travel Blogger | Digital Marketer | Photographer | Personal Trainer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.momentier.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.momentier.com\/#\/schema\/person\/fda305c8e6933b783263cc4fd5c42497","name":"Rimaz Sally","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.momentier.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/2a9fde1f9abd5146f14442ff00052b77?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2a9fde1f9abd5146f14442ff00052b77?s=96&r=g","caption":"Rimaz Sally"},"description":"I am a young, passionate individual with an enthusiastic attitude who thrives in creative environments. I hold a solid understanding of the design process and display a keen interest in emerging technologies and innovative products. I'm considered to be a 'Jack of all trades' and a complete creative nutcase!","sameAs":["http:\/\/www.momentier.com"],"url":"https:\/\/www.momentier.com\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.momentier.com\/wp-json\/wp\/v2\/posts\/163"}],"collection":[{"href":"https:\/\/www.momentier.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.momentier.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.momentier.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.momentier.com\/wp-json\/wp\/v2\/comments?post=163"}],"version-history":[{"count":0,"href":"https:\/\/www.momentier.com\/wp-json\/wp\/v2\/posts\/163\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.momentier.com\/wp-json\/wp\/v2\/media?parent=163"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.momentier.com\/wp-json\/wp\/v2\/categories?post=163"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.momentier.com\/wp-json\/wp\/v2\/tags?post=163"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}