{"id":4549,"date":"2017-02-04T14:46:04","date_gmt":"2017-02-04T14:46:04","guid":{"rendered":"http:\/\/johnjohnston.info\/blog\/?post_type=jetpack-portfolio&p=4549"},"modified":"2017-05-14T21:18:52","modified_gmt":"2017-05-14T20:18:52","slug":"gifmovie","status":"publish","type":"jetpack-portfolio","link":"https:\/\/johnjohnston.info\/blog\/portfolio\/gifmovie\/","title":{"rendered":"GifMovie"},"content":{"rendered":"

GifMovie site<\/a><\/p>\n

I am trying to make a plugin that will:<\/p>\n

    \n
  1. add sounds to a gif<\/li>\n
  2. present a gif as a \u2018movie\u2019 starting and stopping on a click.<\/li>\n<\/ol>\n

    I do not really know what I am doing. I have seen a few plugins that \u2018freeze\u2019 a gif until clicked, they seem to generate a jpg from the the gif. The approach here is different:<\/p>\n

      \n
    1. A shortcode\u00a0[gifmovie gif=’gif-url’ mp3=’mp3-url’]eg:\u00a0[gifmovie gif='http:\/\/38.media.tumblr.com\/5704f412385f040cb6c7e232519867c7\/tumblr_npstce4Hpp1rggurro1_500.gif' mp3='http:\/\/freesound.org\/data\/previews\/157\/157873_2836235-lq.mp3']<\/code><\/li>\n
    2. The short code adds the gif with a class of gifmovie and an attribute of mp3<\/li>\n
    3. Javascript then adds a canvas element, put a frame from the gif on and a play button, it hides the gif. Adds an audio element for the mp3. Clicking hide canvas, shows gif and play audio.<\/li>\n<\/ol>\n

       <\/p>\n","protected":false},"excerpt":{"rendered":"

      GifMovie site I am trying to make a plugin that will: add sounds to a gif present a gif as a \u2018movie\u2019 starting and stopping on a click. I do not really know what I am doing. I have seen a few plugins that \u2018freeze\u2019 a gif until clicked, they seem to generate a jpg […]<\/p>\n","protected":false},"author":1,"featured_media":4550,"comment_status":"open","ping_status":"closed","template":"","format":"standard","meta":{"mf2_syndication":[],"advanced_seo_description":"","jetpack_seo_html_title":"","jetpack_seo_noindex":false,"jetpack_post_was_ever_published":false,"webmentions_disabled_pings":false,"webmentions_disabled":false,"footnotes":""},"post_format":[],"jetpack-portfolio-type":[479,649],"jetpack-portfolio-tag":[666],"class_list":{"0":"post-4549","1":"jetpack-portfolio","2":"type-jetpack-portfolio","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"jetpack-portfolio-type-gif","8":"jetpack-portfolio-type-wordpress","9":"jetpack-portfolio-tag-wordpress","10":"h-entry","11":"hentry"},"better_featured_image":{"id":4550,"alt_text":"","caption":"","description":"","media_type":"image","media_details":{"width":800,"height":480,"file":"2017\/02\/gifmovie.png.jpg","sizes":{"thumbnail":{"file":"gifmovie.png-150x150.jpg","width":150,"height":150,"mime-type":"image\/jpeg","source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2017\/02\/gifmovie.png-150x150.jpg"},"medium":{"file":"gifmovie.png-620x372.jpg","width":620,"height":372,"mime-type":"image\/jpeg","source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2017\/02\/gifmovie.png-620x372.jpg"},"medium_large":{"file":"gifmovie.png-768x461.jpg","width":768,"height":461,"mime-type":"image\/jpeg","source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2017\/02\/gifmovie.png-768x461.jpg"},"post-thumbnail":{"file":"gifmovie.png-668x401.jpg","width":668,"height":401,"mime-type":"image\/jpeg","source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2017\/02\/gifmovie.png-668x401.jpg"},"sempress-image-post":{"file":"gifmovie.png-668x401.jpg","width":668,"height":401,"mime-type":"image\/jpeg","source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2017\/02\/gifmovie.png-668x401.jpg"},"rpwe-thumbnail":{"file":"gifmovie.png-45x45.jpg","width":45,"height":45,"mime-type":"image\/jpeg","source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2017\/02\/gifmovie.png-45x45.jpg"},"jetpack-portfolio-admin-thumb":{"file":"gifmovie.png-50x50.jpg","width":50,"height":50,"mime-type":"image\/jpeg","source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2017\/02\/gifmovie.png-50x50.jpg"}},"image_meta":{"aperture":"0","credit":"","camera":"","caption":"","created_timestamp":"0","copyright":"","focal_length":"0","iso":"0","shutter_speed":"0","title":"","orientation":"0","keywords":[]}},"post":4549,"source_url":"https:\/\/johnjohnston.info\/blog\/wp-content\/uploads\/2017\/02\/gifmovie.png.jpg"},"jetpack_likes_enabled":false,"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/jetpack-portfolio\/4549","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/jetpack-portfolio"}],"about":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/types\/jetpack-portfolio"}],"author":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/comments?post=4549"}],"version-history":[{"count":0,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/jetpack-portfolio\/4549\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media\/4550"}],"wp:attachment":[{"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/media?parent=4549"}],"wp:term":[{"taxonomy":"post_format","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/post_format?post=4549"},{"taxonomy":"jetpack-portfolio-type","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/jetpack-portfolio-type?post=4549"},{"taxonomy":"jetpack-portfolio-tag","embeddable":true,"href":"https:\/\/johnjohnston.info\/blog\/wp-json\/wp\/v2\/jetpack-portfolio-tag?post=4549"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}