Making of iPhone Videos Play Around the Traps Tutorial
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 …
Does it play everywhere?
… because it’s surprising what can arise sometimes.
During last week we had one happen, where our …
- original MOV video the iPhone (Camera app in Video mode) created … and we AirDroped to MacBook Air (macOS) …
- converted via (macOS command line) …
ffmpeg -i IMG_2910.MOV squidgy.m4v
… - and then played, online, via …
<video style="width:100%;" controls><source type=video/mp4 src=/squidgy.m4v></source></video>
…“crashed and burned”just, quietly, didn’t play on any Safari incarnation of web browser, though did for Google Chrome, for example
… so annoying!
We asked the Open Source community, no doubt, and we liked this great advice, to, at first, try (on macOS command line) …
ffmpeg -i IMG_2910.MOV -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an squidgy.m4v
… creating a different set of problems, until we went …
ffmpeg -i IMG_2910.MOV -c:v libx264 -pix_fmt yuv420p -profile:v main -level:v 3.1 -an squidgy.mp4
… teamed with the blog posting video playing HTML …
<video style="width:100%;" controls><source type=video/mp4 src=/squidgy.mp4></source></video>
… as per …
… instead, to make everyone browser happy (as well as any readers of HTML/Javascript Scratchpad Simultaneous Line Equations Hints Revisit Tutorial who persisted)!
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 (but didn’t ask any horses) to use ffmpeg to extract an audio “track” if you will, via …
ffmpeg -i IMG_2910.MOV squidgy.m4a
… and uploaded this, then looked for help and found this great link, thanks, getting us to …
<video id=myvideo style=width:95%; controls>
<source type=video/mp4 src=/squidgy.mp4></source>
<audio id=myaudio>
<source type=audio/mp4 src=/squidgy.m4a></source></audio>
<script>
// Thanks to https://stackoverflow.com/questions/6433900/syncing-html5-video-with-audio-playback
var myvideo=null, myaudio=null, change_time_state=true;
function syncit() {
myvideo = document.getElementById("myvideo");
myaudio = document.getElementById("myaudio");
change_time_state = true;
myvideo.onplay = function(){
myaudio.play();
if(change_time_state){
myaudio.currentTime = myvideo.currentTime;
change_time_state = false;
}
}
myvideo.onpause = function(){
myaudio.pause();
change_time_state = true;
}
}
setTimeout(syncit, 5000);
</script>
</video>
… as per …
… to help, more, with context.
If this was interesting you may be interested in this too.
