{"id":996,"date":"2013-04-24T16:22:01","date_gmt":"2013-04-25T02:22:01","guid":{"rendered":"http:\/\/mymonkeydo.com\/?p=996"},"modified":"2013-04-24T16:22:01","modified_gmt":"2013-04-25T02:22:01","slug":"html-5-flash-fallback-video-player-w-rtmp","status":"publish","type":"post","link":"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/","title":{"rendered":"HTML 5 Flash Fallback Video Player w\/ RTMP"},"content":{"rendered":"

There are a ton of video player that use\u00a0HTML5 with flash fallback. \u00a0A few years ago I found one named JW Player. \u00a0This was a great player that was fully featured. \u00a0Keyword being “was”. \u00a0I was developing a website that would be using this player, but for the time being I used the free version of the player because I was hoping for a promo code to show up. \u00a0As I was developing the site, the company that owns JW Player upped the price from a simple $79 fee to a yearly $99 fee. \u00a0This was a big jump in price and developers complained a whole lot, including myself. \u00a0(i got the CEO to respond! woohoo!) \u00a0but no changes came of it (as of now anyway).<\/p>\n

 <\/p>\n

When One Door Closes…<\/h2>\n

Onto a search for a new javascript player that could do HTML5, Flash fallback, and RTMP streaming when flash is used. \u00a0A few players I found were jPlayer<\/a>, videoJS<\/a>, MediaElement.js<\/a>, Flowplayer<\/a>. \u00a0Flowplayer costed about $99(to remove the watermark) plus I wasn’t sure if I needed to purchase the flash player for flash fallback. \u00a0Confusion is not good to a potential buyer. \u00a0jPlayer was the most popular of the free ones, but I couldn’t get the RTMP to work with my video for some reason. \u00a0I got the sample to work, but not mine, weird. \u00a0videoJs scared me because I saw a post were the flash fallback used Flowplayer which means I could not use it commercially without purchasing. \u00a0Would’ve been a legal disaster if I used it and didn’t pay for it. \u00a0MediaElementJs was the only one I had no opinion. \u00a0It was actually the least popular of all the open source players. \u00a0But then I saw that it would be in WordPress core 3.6! \u00a0Case closed. \u00a0MediaElement.js would be the replacement.<\/p>\n

 <\/p>\n

Another one Opens<\/h2>\n

As it turns out MediaElement does not get Firefox to fallback to flash if I use a mp4 video file. \u00a0It simply errors out. \u00a0It does however, support the webm format. \u00a0The WebM format is sponsored by Google and is supposedly the next industry standard for web videos so it would be a good thing if I converted to it. \u00a0I found a free converter called Miro Video Converter to convert my mp4 to webm format. \u00a0In the end I have a video player that will be integrated into WordPress, a more standard video format, smaller footprint for HTML5 users (mp4 size: 163mb webm:78mb), and no money spent… but a whole lot of time spent looking for this… oh well, the client wins at least.<\/p>\n

 <\/p>\n

The Old<\/h2>\n

JW Player, mp4 format<\/p>\n

The New<\/h2>\n

MediaElementJS (WordPress 3.6), webm format, Miro Video Converter<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[3],"tags":[22,25,32,52,64],"yoast_head":"\nHTML 5 Flash Fallback Video Player w\/ RTMP - My Monkey Do<\/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:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"HTML 5 Flash Fallback Video Player w\/ RTMP - My Monkey Do\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/\" \/>\n<meta property=\"og:site_name\" content=\"My Monkey Do\" \/>\n<meta property=\"article:published_time\" content=\"2013-04-25T02:22:01+00:00\" \/>\n<meta name=\"author\" content=\"Webhead\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Webhead\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/\",\"url\":\"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/\",\"name\":\"HTML 5 Flash Fallback Video Player w\/ RTMP - My Monkey Do\",\"isPartOf\":{\"@id\":\"https:\/\/mymonkeydo.com\/#website\"},\"datePublished\":\"2013-04-25T02:22:01+00:00\",\"dateModified\":\"2013-04-25T02:22:01+00:00\",\"author\":{\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\"},\"breadcrumb\":{\"@id\":\"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/mymonkeydo.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"HTML 5 Flash Fallback Video Player w\/ RTMP\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mymonkeydo.com\/#website\",\"url\":\"https:\/\/mymonkeydo.com\/\",\"name\":\"My Monkey Do\",\"description\":\"A Log of Coding Solutions\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mymonkeydo.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829\",\"name\":\"Webhead\",\"url\":\"https:\/\/mymonkeydo.com\/author\/corey\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"HTML 5 Flash Fallback Video Player w\/ RTMP - My Monkey Do","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:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/","og_locale":"en_US","og_type":"article","og_title":"HTML 5 Flash Fallback Video Player w\/ RTMP - My Monkey Do","og_url":"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/","og_site_name":"My Monkey Do","article_published_time":"2013-04-25T02:22:01+00:00","author":"Webhead","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Webhead","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/","url":"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/","name":"HTML 5 Flash Fallback Video Player w\/ RTMP - My Monkey Do","isPartOf":{"@id":"https:\/\/mymonkeydo.com\/#website"},"datePublished":"2013-04-25T02:22:01+00:00","dateModified":"2013-04-25T02:22:01+00:00","author":{"@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829"},"breadcrumb":{"@id":"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/mymonkeydo.com\/html-5-flash-fallback-video-player-w-rtmp\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/mymonkeydo.com\/"},{"@type":"ListItem","position":2,"name":"HTML 5 Flash Fallback Video Player w\/ RTMP"}]},{"@type":"WebSite","@id":"https:\/\/mymonkeydo.com\/#website","url":"https:\/\/mymonkeydo.com\/","name":"My Monkey Do","description":"A Log of Coding Solutions","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mymonkeydo.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/mymonkeydo.com\/#\/schema\/person\/b16fc650a8c182faaac896bab099b829","name":"Webhead","url":"https:\/\/mymonkeydo.com\/author\/corey\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/996"}],"collection":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/comments?post=996"}],"version-history":[{"count":0,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/posts\/996\/revisions"}],"wp:attachment":[{"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/media?parent=996"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/categories?post=996"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mymonkeydo.com\/wp-json\/wp\/v2\/tags?post=996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}