I'm doing a series of posts here on automated transcoding of recordings in MythTV. The idea is to explain the basics, then evolve the design to end up with recordings suitable for playback on the iPad, which is a little more advanced.
- The complete series of articles is available at this page
Last time we went through the steps to transcode a recording into the H.264 format, required for playback on iPad (or other Apple devices – iPod, iPhone, Mac OS X, etc).
Today we’ll complete the series by embedding an HTML5 Video player into MythWeb which will stream these files. Of course, this means playback isn’t only possible on iPad, but also any compatible browser platform. The original plan was simply to provide a file download link in MythWeb, but my friend Colin rightly suggested an embedded HTML5 Video player would be much more awesome.
Your MythWeb files are probably installed somewhere like /usr/share/mythtv/mythweb. Open up modules/tv/tmpl/default/detail.php and replace the default embedded player with a new HTML5 Video tag. You should find this around line 797. Replace the two lines comprising the Direct Download hyperlink with the following:
<video controls preload="none" width="360" height="153">
<source
src="/h264xcode/<?php echo $program->chanid ?>_<?php echo date( 'YmdHis', $program->recstartts ) ?>.m4v">
Your browser does not support the video tag.
</video>
The above requires that you make the H.264 files available through your MythWeb web server. In my case, I simply created a symlink from the server’s DocumentRoot to where the H.264 files live (so, change this to reflect your own H.264 file location):
ln -s /mnt/mythtv-video/Videos/iPad /var/www/h264xcode
The result is the following, once the transcoded file appears on disk:
And we’re done! Browsing to the MythWeb site on an iPad shows the embedded player which, when clicked, opens fullscreen for native playback. My deep thanks to all those working on the software used in this series of articles, and I also hope you found it a useful read.
Hi,
Thanks for this. Was easy to follow along.
Can’t seem to get the html5 player to work in the last step though.
Question:
What version Mythtv and Mythweb were you working with?
Seems like in the latest Mythweb retrieved from git, the code
in modules/tv/tmpl/default/detail.php may be a little different?
At least the copy I have here, there is no line 791.
Am able to find the two lines comprising the Direct Download hyperlink
(I think) but when I replace them with the 5 lines of php code it doesn’t seem to work.
I’m guessing the expected behaviour would be both a flash flowplayer window, and the html5 based player window? Or am I misinterpreting what your trying to accomplish?
Hi Bill,
My intention was to replace the flowplayer with the HTML5 player, but I must confess only to testing it on Mac/Chrome and I believe various elements on the page are conditional on the browser platform.
You can of course insert the HTML5 video tag anywhere convenient on any page in MythWeb, so long as its file link is correct.
regards,
oliver.
Hey, thanks for your write ups, they helped me get what I needed to get done.
since mine is on a mac, I used handbrake cli, however I Didn’t like the generic name that I was using during my post job transcoding and while looking through the code, I was just going to say that, this code seems to be a little better
<source
src="/h264xcode/filename ?>”>
Your browser does not support the video tag.
because it works off of the filename, instead of creating the filename by aggregating the properties.
apparently the form doesn’t like encoding the text for display purposes.
Anyways
“php echo $program->filename” is what I was referring to
Nice suggestion, many thanks!