{"id":5174,"date":"2019-10-01T02:17:14","date_gmt":"2019-10-01T02:17:14","guid":{"rendered":"http:\/\/www.webputzer.com\/?p=5174"},"modified":"2022-09-09T00:37:10","modified_gmt":"2022-09-09T00:37:10","slug":"video-test","status":"publish","type":"post","link":"http:\/\/www.webputzer.com\/?p=5174","title":{"rendered":"Getting videos hosted on WordPress to play on an iPhone"},"content":{"rendered":"<p>So, none of the videos I uploaded to my WordPress sites would play on my iPhone. I didn&#8217;t know if the problem was the player (for example, I often use &#8220;flowplayer&#8221; on WordPress) or the encoding. I tried the following code, which I&#8217;d never used before, in the absence of any sort of video player plugin:<\/p>\n<pre><video poster=\"http:\/\/www.webputzer.com\/wp-content\/uploads\/2019\/10\/flint-water-tower-still01.jpg\" controls=\"controls\" width=\"640\" height=\"360\">\r\n    <source src=\"http:\/\/www.webputzer.com\/wp-content\/uploads\/2022\/09\/Flints_Deadly_Water_Web_Optimized.mp4\" type=\"video\/mp4\" \/><\/video><\/pre>\n<p>My videos still did not play on my iPhone.<\/p>\n<h2>It was all encoding<\/h2>\n<p>Turns out the problem was, 100%, the encoding &#8211; my videos now work with the code, above, flowplayer, etc.<br \/>\n<em><strong>From the web:<\/strong><\/em><\/p>\n<blockquote><p>&#8220;On the top right of the dialog, click the button\u00a0<code>Presets<\/code>. In the Presets menu, select the option\u00a0<code>Web<\/code>\u00a0-&gt;\u00a0<code>Vimeo YouTube HQ 720p60<\/code>\u00a0or\u00a0<code>Vimeo YouTube 720p30<\/code>.<\/p>\n<p>If you change the default options, make sure you check the option\u00a0<code>Web Optimized<\/code>. The option is also known as &#8220;Fast start&#8221; or &#8220;Progressive downloading&#8221;. It places the video header at the start of the file and allows your video to start playing while it&#8217;s still downloading.<\/p>\n<p>At the bottom of the dialog, select a folder to save the converted video file.<\/p>\n<p>Click Start and wait for the encoding complete.&#8221;<\/p><\/blockquote>\n<p><strong>NOTE:<\/strong> The version of Handbrake referred to, in the above, is obviously different than mine&#8230;..on Linux Zorin 15. It showed the following graphic to help you find the preset:<br \/>\n<img decoding=\"async\" src=\"http:\/\/www.webputzer.com\/wp-content\/uploads\/2019\/10\/handbrake.png\" \/><br \/>\n<strong><em>In my case, I found the setting described above via a different route &#8211; just a different version of Handbrake (see video):<\/em><\/strong><br \/>\n<div id=\"wpfp_e6a8a838e0c9d0e1d6c89deb3c22da85\" data-item=\"{&quot;sources&quot;:[{&quot;src&quot;:&quot;http:\\\/\\\/www.webputzer.com\\\/wp-content\\\/uploads\\\/2022\\\/09\\\/Flints_Deadly_Water_Web_Optimized.mp4&quot;,&quot;type&quot;:&quot;video\\\/mp4&quot;}],&quot;splash&quot;:&quot;http:\\\/\\\/www.webputzer.com\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/flint-water-tower-still01.jpg&quot;}\" class=\"flowplayer no-brand is-splash is-paused skin-slim no-svg fp-slim fp-edgy\" data-fv-embed=\"http:\/\/www.webputzer.com\/?p=5174&amp;fv_player_embed=1\" style=\"position:relative; max-width: 600px; max-height: 390px; \" data-ratio=\"0.65\">\n\t<div class=\"fp-ratio\" style=\"padding-top: 65%\"><\/div>\n\t<img decoding=\"async\" class=\"fp-splash\" alt=\"video\" src=\"http:\/\/www.webputzer.com\/wp-content\/uploads\/2019\/10\/flint-water-tower-still01.jpg\" style=\"position:absolute;top:0;width:100%\" \/>\n\t<div class=\"fp-ui\"><noscript>Please enable JavaScript<\/noscript><div class=\"fp-play fp-visible\"><svg class=\"fp-play-sharp-fill\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 100 100\"><defs><style>.fp-color-play{opacity:0.65;}.controlbutton{fill:#fff;}<\/style><\/defs><title>play-sharp-fill<\/title><path class=\"fp-color-play\" d=\"M49.9217-.078a50,50,0,1,0,50,50A50.0564,50.0564,0,0,0,49.9217-.078Z\"\/><polygon class=\"controlbutton\" points=\"73.601 50 37.968 70.573 37.968 29.427 73.601 50\" filter=\"url(#f1)\"\/><\/svg><\/div><div class=\"fp-preload\"><b><\/b><b><\/b><b><\/b><b><\/b><\/div><\/div>\n<div class='fvp-share-bar'><ul class=\"fvp-sharing\">\r\n    <li><a class=\"sharing-facebook\" href=\"https:\/\/www.facebook.com\/sharer\/sharer.php?u=http%3A%2F%2Fwww.webputzer.com%2F%3Fp%3D5174\" target=\"_blank\"><\/a><\/li>\r\n    <li><a class=\"sharing-twitter\" href=\"https:\/\/twitter.com\/intent\/tweet?text=Webputzer.com+&url=http%3A%2F%2Fwww.webputzer.com%2F%3Fp%3D5174\" target=\"_blank\"><\/a><\/li>\r\n    <li><a class=\"sharing-email\" href=\"mailto:?body=Check%20out%20the%20amazing%20video%20here%3A%20http%3A%2F%2Fwww.webputzer.com%2F%3Fp%3D5174\" target=\"_blank\"><\/a><\/li><\/ul><div><a class=\"sharing-link\" href=\"http:\/\/www.webputzer.com\/?p=5174\" target=\"_blank\">Link<\/a><\/div><div><label><a class=\"embed-code-toggle\" href=\"#\"><strong>Embed<\/strong><\/a><\/label><\/div><div class=\"embed-code\"><label>Copy and paste this HTML code into your webpage to embed.<\/label><textarea><\/textarea><\/div><\/div>\n<\/div>\n<\/p>\n","protected":false},"excerpt":{"rendered":"<p>So, none of the videos I uploaded to my WordPress sites would play on my iPhone. I didn&#8217;t know if the problem was the player (for example, I often use &#8220;flowplayer&#8221; on WordPress) or the encoding. I tried the following code, which I&#8217;d never used before, in the absence of any sort of video player [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5193,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"h5ap_radio_sources":[],"footnotes":""},"categories":[1],"tags":[],"class_list":["post-5174","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"http:\/\/www.webputzer.com\/index.php?rest_route=\/wp\/v2\/posts\/5174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.webputzer.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.webputzer.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.webputzer.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.webputzer.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=5174"}],"version-history":[{"count":0,"href":"http:\/\/www.webputzer.com\/index.php?rest_route=\/wp\/v2\/posts\/5174\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.webputzer.com\/index.php?rest_route=\/wp\/v2\/media\/5193"}],"wp:attachment":[{"href":"http:\/\/www.webputzer.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=5174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.webputzer.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=5174"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.webputzer.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=5174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}