{"id":65835,"date":"2024-12-02T03:01:00","date_gmt":"2024-12-01T17:01:00","guid":{"rendered":"https:\/\/www.rjmprogramming.com.au\/ITblog\/?p=65835"},"modified":"2024-12-01T14:09:25","modified_gmt":"2024-12-01T04:09:25","slug":"making-of-iphone-videos-play-around-the-traps-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/making-of-iphone-videos-play-around-the-traps-tutorial\/","title":{"rendered":"Making of iPhone Videos Play Around the Traps Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=\"_blank\" href=\"http:\/\/www.rjmprogramming.com.au\/squidgy.mp4\" rel=\"noopener\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Making of iPhone Videos Play Around the Traps Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/squidgy.gif\" title=\"Making of iPhone Videos Play Around the Traps Tutorial\"  style=\"float:left;\"  \/><\/a><p class=\"wp-caption-text\">Making of iPhone Videos Play Around the Traps Tutorial<\/p><\/div>\n<p>Especially as far as video creation goes with the set of web browser brands, on mobile and non-mobile platforms, going around, it can be valid to ask &#8230;<\/p>\n<blockquote><p>\nDoes it play everywhere?\n<\/p><\/blockquote>\n<p> &#8230; because it&#8217;s surprising what can arise sometimes.<\/p>\n<p>During last week we had one happen, where our &#8230;<\/p>\n<ul>\n<li>original MOV video the iPhone (Camera app in Video mode) created &#8230; and we AirDrop<sub>ed<\/sub> to MacBook Air (macOS) &#8230;<\/li>\n<li>converted via (macOS command line) &#8230;<br \/>\n<code><br \/>\n<a target=\"_blank\" title='ffmpeg' href='https:\/\/www.ffmpeg.org\/' rel=\"noopener\">ffmpeg<\/a> -i IMG_2910.MOV squidgy.m4v<br \/>\n<\/code><br \/>\n &#8230;<\/li>\n<li>and then played, online, via &#8230;<br \/>\n<code><br \/>\n&lt;video style=\"width:100%;\" controls&gt;&lt;source type=video\/mp4 src=\/squidgy.m4v&gt;&lt;\/source&gt;&lt;\/video&gt;<br \/>\n<\/code><br \/>\n &#8230; <strike>&#8220;crashed and burned&#8221;<\/strike> <i>just, quietly, didn&#8217;t play<\/i> on any Safari incarnation of web browser, though did for Google Chrome, for example\n<\/li>\n<\/ul>\n<p> &#8230; so annoying!<\/p>\n<p>We asked <a target=\"_blank\" title='Useful information, thanks' href='https:\/\/www.google.com\/search?q=safari+m4v+type%3Dvideo%2Fmp4&#038;oq=safari+m4v+type%3Dvideo%2Fmp4&#038;gs_lcrp=EgZjaHJvbWUyCQgAEEUYORigATIHCAEQIRigATIHCAIQIRiPAtIBCDk4MDhqMGo0qAIAsAIB&#038;sourceid=chrome&#038;ie=UTF-8' rel=\"noopener\">the Open Source community<\/a>, no doubt, and <a target=\"_blank\" title='Great advice thanks' href='https:\/\/stackoverflow.com\/questions\/45776576\/safari-wont-play-a-gif-converted-to-mp4-or-m4v' rel=\"noopener\">we liked this great advice<\/a>, to, at first, try (on macOS command line) &#8230;<\/p>\n<p><code><br \/>\nffmpeg -i IMG_2910.MOV -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an squidgy.m4v<br \/>\n<\/code><\/p>\n<p> &#8230; creating a different set of problems, until we went &#8230;<\/p>\n<p><code><br \/>\nffmpeg -i IMG_2910.MOV -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an squidgy.mp4<br \/>\n<\/code><\/p>\n<p> &#8230; teamed with the blog posting video playing HTML &#8230;<\/p>\n<p><code><br \/>\n&lt;video style=\"width:100%;\" controls&gt;&lt;source type=video\/mp4 src=\/squidgy.mp4&gt;&lt;\/source&gt;&lt;\/video&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; as per &#8230;<\/p>\n<p><video style=\"width:100%;\" controls><source type=video\/mp4 src=\/squidgy.mp4><\/source><\/video><\/p>\n<p> &#8230; instead, to make every<strike>one<\/strike> browser happy <font size=1>(as well as any readers of <a target=\"_blank\" href='https:\/\/www.rjmprogramming.com.au\/ITblog\/html-javascript-scratchpad-simultaneous-line-equations-hints-revisit-tutorial\/' title='HTML\/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial' rel=\"noopener\">HTML\/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial<\/a> who persisted)<\/font>!<\/p>\n<p>Yes, but thinking on it, those early readers will have noticed audio present on that previous video incarnation.  We wanted to get it back, and it contextualizes things.  Well, we went back to the source <font size=1>(but didn&#8217;t ask any horses)<\/font> to use ffmpeg to extract an audio &#8220;track&#8221; if you will, via &#8230;<\/p>\n<p><code><br \/>\nffmpeg -i IMG_2910.MOV squidgy.m4a<br \/>\n<\/code><\/p>\n<p><img style=width:95%; src=\/squidgy_audio_track.jpg><\/img><\/p>\n<p> &#8230; and uploaded this, then looked for help and found <a target=\"_blank\" title='Great link' href='https:\/\/stackoverflow.com\/questions\/6433900\/syncing-html5-video-with-audio-playback' rel=\"noopener\">this great link<\/a>, thanks, getting us to &#8230;<\/p>\n<p><code><br \/>\n&lt;video id=myvideo style=width:95%; controls&gt;<br \/>\n&lt;source type=video\/mp4 src=\/squidgy.mp4&gt;&lt;\/source&gt;<br \/>\n&lt;audio id=myaudio&gt;<br \/>\n&lt;source type=audio\/mp4 src=\/squidgy.m4a&gt;&lt;\/source&gt;&lt;\/audio&gt;<br \/>\n&lt;script&gt;<br \/>\n  \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/6433900\/syncing-html5-video-with-audio-playback<br \/>\n  var myvideo=null, myaudio=null, change_time_state=true;<br \/>\n  function syncit() {<br \/>\n    myvideo = document.getElementById(\"myvideo\");<br \/>\n    myaudio = document.getElementById(\"myaudio\");<br \/>\n    change_time_state = true;<br \/>\n    myvideo.onplay = function(){<br \/>\n        myaudio.play();<br \/>\n        if(change_time_state){<br \/>\n            myaudio.currentTime = myvideo.currentTime;<br \/>\n            change_time_state = false;<br \/>\n        }<br \/>\n    }<br \/>\n    myvideo.onpause = function(){<br \/>\n        myaudio.pause();<br \/>\n        change_time_state = true;<br \/>\n    }<br \/>\n  }<br \/>\n  setTimeout(syncit, 5000);<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/video&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; as per &#8230;<\/p>\n<p><video id=myvideo style=width:95%; controls><source type=video\/mp4 src=\/squidgy.mp4><\/source><br \/>\n<audio id=myaudio><source type=audio\/mp4 src=\/squidgy.m4a><\/source><\/audio><br \/>\n<script>\n  \/\/ Thanks to https:\/\/stackoverflow.com\/questions\/6433900\/syncing-html5-video-with-audio-playback\n  var myvideo=null, myaudio=null, change_time_state=true;\n  function syncit() {\n    myvideo = document.getElementById(\"myvideo\");\n    myaudio = document.getElementById(\"myaudio\");\n    change_time_state = true;\n    myvideo.onplay = function(){\n        myaudio.play();\n        if(change_time_state){\n            myaudio.currentTime = myvideo.currentTime;\n            change_time_state = false;\n        }\n    } \n    myvideo.onpause = function(){\n        myaudio.pause();\n        change_time_state = true;\n    }\n  }\n  setTimeout(syncit, 5000);\n<\/script><\/video><\/p>\n<p> &#8230; to help, more, with context.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d65835' onclick='var dv=document.getElementById(\"d65835\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/video\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d65835' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Especially as far as video creation goes with the set of web browser brands, on mobile and non-mobile platforms, going around, it can be valid to ask &#8230; Does it play everywhere? &#8230; because it&#8217;s surprising what can arise sometimes. &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/making-of-iphone-videos-play-around-the-traps-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,29,30,37],"tags":[2161,113,183,5003,234,5002,249,2105,5004,2650,415,4387,631,2178,760,2732,2893,817,877,950,2362,5001,1083,1545,1233,1670,1296,1319,1369,1404],"class_list":["post-65835","post","type-post","status-publish","format-standard","hentry","category-elearning","category-operating-system","category-photography","category-tutorials","tag-airdrop","tag-audio","tag-camera","tag-codecs","tag-command-line","tag-compatibility","tag-configuration","tag-context","tag-contextualize","tag-convert","tag-ffmpeg","tag-functionality","tag-iphone","tag-macos","tag-media","tag-mimetype","tag-mov","tag-mp4","tag-open-source","tag-platform","tag-play","tag-playing","tag-safari","tag-stackoverflow","tag-sync","tag-synchronize","tag-track","tag-tutorial","tag-video","tag-web-browser"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65835"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=65835"}],"version-history":[{"count":21,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65835\/revisions"}],"predecessor-version":[{"id":65871,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/65835\/revisions\/65871"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=65835"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=65835"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=65835"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}