A Weekend Programming Challenge

My wife and I were watching  Lighter & Princess (点燃我,温暖你). In episode 5, a smart programmer completed a heart animation as part of a programming test in a university course. Everyone of his classmates had a mediocre and simplistic implementation.

My wife challenged me to do the same. I could have done this with SVG and Javascript, but I took the opportunity to learn more Python and Qt. The latter I have not used at all and was always curious how well it worked with Python. I decided to use the PyQt package instead of the PySide package.

I hacked this together today resulting in this rendition:

Click above to see it in action

The PyQt implementation worked really well across Windows, Mac, and Ubuntu Linux. I suppose the Javascript and SVG would have done the same, but I learned something new in this case.

The source code and the installation instructions are at:

Click above to goto GitHub

HTML5 Video on iOS 13

This past weekend, I was writing a simple HTML5 utility that provides certain videos that I have in my own personal library. The idea is that I can make a limited selection of videos and present it on a web page, so that the user can simply click on the cover art of the video and plays inline on the web page.

I thought it was a pretty simple requirement and I should be able to whip this up in a few minutes. I used the HTML5 <video> tag. Everything worked on my Mac and my iPad. It even worked on my LG OLED TV. However, when it came to the iPhone, mobile Safari would load the movie but it would not play. I was even able to seek through the movie by scrubbing the scroll bar, but when I press the play/pause button, nothing would happen.

After many hours scouring the web, I found out many caveats when serving videos on iOS with the iPhone.

  • Videos behind an authorized location may not work on an iPhone because when Safari passes this information to the player, the player does not inherit the previously authorized identity. To get around this, I had to create a token based technique, where the main page have to pass this token to a PHP page that checks this token and serves the video contents.
  • The PHP used to serve the video also need to handle HTTP Range based requests. This wonderful contribution from GitHub really helped me out!
  • Multichannel audio such as 5.1 audio encoded in AAC will load but not play on my iPhone XS currently running iOS 13. The video will play if I re-encode the audio to either AAC stereo, or 5.1 multichannel in AC3 encoding.
  • Multiple audio streams also did not work. The iOS player was only happy with a single compatible audio stream.
  • If you want to make the video autoplay while inlined within the page, it must first be muted.

Lots of things to consider here. I lost about a day and halve researching and experimenting with this, so here it is all recorded just in case I forget in the future. I also hope that this information will help you out as well.