{"id":48,"date":"2015-09-26T22:40:06","date_gmt":"2015-09-26T22:40:06","guid":{"rendered":"http:\/\/mansavageproductions.com\/websitesvideos\/?p=48"},"modified":"2015-09-26T22:41:46","modified_gmt":"2015-09-26T22:41:46","slug":"html5-video-code","status":"publish","type":"post","link":"http:\/\/mansavageproductions.com\/websitesvideos\/2015\/09\/26\/html5-video-code\/","title":{"rendered":"HTML5 Video Code"},"content":{"rendered":"<p>Working with HTML5 video in Dreamweaver<\/p>\n<div class=\"text parbase section\">\n<p class=\"Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak\">Encode video to MP4, Ogg, and WebM format.<\/p>\n<p class=\"Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak\">Follow these steps to create a new HTML file in Dreamweaver and add video and source tags:<\/p>\n<div class=\"Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak\">\n<p>Open Dreamweaver and an HTML file.<\/p>\n<\/div>\n<p>Switch to Code view or Split view.<\/p>\n<p>Add the following code inside the <code><span style=\"font-family: Courier New;\">&lt;body&gt;&lt;\/body&gt;<\/span><\/code> tags:<\/p>\n<\/div>\n<div class=\"parbase codeblock compbase section\">\n<div class=\"PanelFillLight PanelBevelTop LayoutCell LayoutRow\"><code class=\"CodeBlock\"><span style=\"font-family: Courier New;\">&lt;video autoplay=\"autoplay\" controls=\"controls\" preload=\"auto\"&gt; &lt;source src=\"movie.mp4\" type=\"video\/mp4\"&gt; &lt;source src=\"movie.ogv\" type=\"video\/ogg\"&gt; &lt;source src=\"movie.webm\" type=\"video\/webm\"&gt; &lt;\/video&gt; <\/span><\/code><\/div>\n<div class=\"PanelFillLight PanelBevelTop LayoutCell LayoutRow\"><\/div>\n<\/div>\n<div class=\"text parbase section\">\n<div class=\"Semantic LayoutCellSides LayoutBreakAfter TextMedium TextBreak\">\n<p>Notice that the video tag specifies three parameters that preload the video when the page loads, auto-play the video when ready, and show the browser&#8217;s native controls. Nested between the open and close video tags are three source tags. The source tags define the MP4 video source, the Ogg video source, and the WebM video source. The browser chooses the source it can support. Note that the MIME type must be included for full support across browsers, and the MP4 type should come first to support iPad.<\/p>\n<p>Save the file next to your videos or in the location of your choice.<\/p>\n<p>Update the src attribute in the source tags with the path to your videos.<\/p>\n<\/div>\n<p>For poster:<\/p>\n<p>&lt;video controls poster=&#8221;demo.jpg&#8221;&gt;<br \/>\n&lt;source src=&#8221;demo.mp4&#8243; type=&#8221;video\/mp4&#8243; \/&gt;<br \/>\n&lt;source src=&#8221;demo.webm&#8221; type=&#8221;video\/webm&#8221;\/&gt;<br \/>\n&lt;source src=&#8221;demo.ogv&#8221; type=&#8221;video\/ogg&#8221;\/&gt;<br \/>\n&lt;p&gt;Fallback code if video isn&#8217;t supported&lt;\/p&gt;\/<br \/>\n&lt;\/video&gt;<\/p>\n<p>&nbsp;<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Working with HTML5 video in Dreamweaver Encode video to MP4, Ogg, and WebM format. Follow these steps to create a new HTML file in Dreamweaver and add video and source tags: Open Dreamweaver and an HTML file. Switch to Code view or Split view. Add the following code inside the &lt;body&gt;&lt;\/body&gt; tags: &lt;video autoplay=&#8221;autoplay&#8221; controls=&#8221;controls&#8221; [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-48","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts\/48","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/comments?post=48"}],"version-history":[{"count":2,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts\/48\/revisions"}],"predecessor-version":[{"id":50,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/posts\/48\/revisions\/50"}],"wp:attachment":[{"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/media?parent=48"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/categories?post=48"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/mansavageproductions.com\/websitesvideos\/wp-json\/wp\/v2\/tags?post=48"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}