imshapp

Q: HTML widget with video

I'm trying to create a HTML video player .wdgt that I can drop in to the HTML widget in iBooks Author. I'm getting an error that the video files aren't in a supported format. I've created the video using Quicktime 10 and Exported as iPad, Apple TV yada yada. The resulting files are .m4v which are fine if I drag them to the canvas by themselves - but just not in a widget. I'm not using Dashcode to create a dashboard widget but have instead simply created an HTML page (index.html) and added a .plist file with a Default.png all in a folder with the .wdgt extention.

 

Has anyone successfully inserted an HTML wdgt file that includes video?

 

Thanks for any input.

 

Michael

Posted on Jan 25, 2012 3:58 PM

Close

Q: HTML widget with video

  • All replies
  • Helpful answers

  • by imshapp,

    imshapp imshapp Jan 25, 2012 4:30 PM in response to imshapp
    Level 1 (0 points)
    Jan 25, 2012 4:30 PM in response to imshapp

    I've read this doc http://support.apple.com/kb/HT5065 and it says no .m4v in HTML widgets -- only mp4. I get the same message with either file type.

  • by K T,

    K T K T Jan 25, 2012 4:44 PM in response to imshapp
    Level 7 (23,844 points)
    Publishing
    Jan 25, 2012 4:44 PM in response to imshapp

    The docs say:

     

    You can also include audio and video in HTML widgets.

    • For video, you should use an .mp4 file extension.
    • For audio, use files with an .m4a file extension.
    • You cannot use media that has .m4v or .m4p file extensions. Note: Video and audio media in HTML Dashboard files are not DRM protected

     

    Are you trying to use files that ARE DRM protected/purchased from your library?

  • by imshapp,

    imshapp imshapp Jan 25, 2012 5:14 PM in response to K T
    Level 1 (0 points)
    Jan 25, 2012 5:14 PM in response to K T

    K T - I read that too and I've tried both. The video isn't DRM - it's my original file exported from QT using Apple's presets for both iPod, and iPad as the docs say. Neither work in hte HTML widget.

  • by frato,

    frato frato Jan 26, 2012 6:06 AM in response to imshapp
    Level 1 (30 points)
    Jan 26, 2012 6:06 AM in response to imshapp

    I have the same problem with audio (m4a file). If I use it in a media widget, everything is fine, but if I use it in an html widget (with an html5 <audio> tag), it says the audio can't be played. I created a thread about this problem, with no luck for the moment.

     

    Seems there are some problems with audio and video in html widget.

  • by imshapp,

    imshapp imshapp Jan 26, 2012 6:51 AM in response to frato
    Level 1 (0 points)
    Jan 26, 2012 6:51 AM in response to frato

    Thanks for the input, frato. I've also tried creating a Keynote presentation with a video but iBooks Author won't let me add that either. I haven't tried audio but will do that today and see if I make any progress.

     

    In each chapter of our book we have several videos and were trying to create a player of sorts with thumbnails of related videos (similar to YouTue) so that we didn't have to embed multiple instances of the media widget on the pages. HTML is ideal for this but just seems to not be ready yet. HTML by itself seems to work just fine though.

  • by Juju4ka,

    Juju4ka Juju4ka Mar 28, 2012 9:09 AM in response to imshapp
    Level 1 (0 points)
    Mar 28, 2012 9:09 AM in response to imshapp

    I tried to add HTML widget with .mp4 video inside and got error message: "The HTML Dashcode file “video_widget.wdgt” wasn’t added. The file contains a media file that isn’t in a supported format."

     

    According to http://support.apple.com/kb/HT5065 .mp4 file format is valid.

     

    Is this iBooks Author bug? How to add video within HTML widget?

     

    Regards, J.

  • by imshapp,

    imshapp imshapp Mar 29, 2012 6:50 AM in response to Juju4ka
    Level 1 (0 points)
    Mar 29, 2012 6:50 AM in response to Juju4ka

    There does seem to be a bug in the HTML widget in that it won't allow any local video content like the documentation says. I haven't been able to get a definitive response/clarification from Apple on this but after much hair pulling and reading other posts this does seem to be the consensus from the community.

     

    The only workaround I've come across so far is to us an iFrame in your HTML to display the video from a remote server.

     

    We can't have any remote content in our iBook so we had to change the way we presented our material and use the Media widget to display .m4v files. The problem we've had with this approach is that we really don't have much control over the encoding settings for the .m4v files. Compressor provides some control but won't allow us to go below a preset data rate that is much too high for us. We have over 400 videos that we have to include in our book. We've come up with a very strange workaround for creating the .m4v videos that requires us to first create a .mp4 or .mov video with a very low data rate and then use QT 10 to export the video using the iPhone 3GS preset. The resulting .m4v is 2-3 times larger than our source .mov. At least it's at a size that will allow us to cram all 400+ videos into the book.

     

    Sure wish Apple will fix this soon!!!! It's extremely frustrating not being able to control the overall data rate of the .m4v files and even more frustrating that we can't use local .mp4 videos in the HTML widget like the documentation says.

  • by Aminta,

    Aminta Aminta Jul 27, 2012 10:14 AM in response to imshapp
    Level 1 (0 points)
    Jul 27, 2012 10:14 AM in response to imshapp

    Hi imshapp, I've finally found the solution!

     

    Strange but true, is a problem of path! I mean: assume you have internally working Html wdgt with video into in a highly branched folder of your Mac but when you put it in a iBook of yours it doesn't work. You have to:

     

    1) Extract the contents of the .wdgt file in a very simple branched folder of OS X like "User" or "Download"

     

    2) Rebuild the .wdgt from this folder

     

    3) Create a brand new iBook always from the same folder. The book has to have a simple title like "Try"

     

    4) Put the .wdgt in the new iBook, make a preview on iPad and - voilà - it magically and strangely works!

  • by nvsp,

    nvsp nvsp Aug 1, 2012 12:23 PM in response to Aminta
    Level 1 (0 points)
    Aug 1, 2012 12:23 PM in response to Aminta

    Hi Aminta,

     

    I'm unable to reproduce your findings. Could you please provide a sample .wdgt file somewhere, so I can take a closer look at how it works?

     

    Thanks!

  • by tk0us,

    tk0us tk0us Aug 2, 2012 5:06 AM in response to imshapp
    Level 2 (265 points)
    Aug 2, 2012 5:06 AM in response to imshapp

    change the file extension to .m4a and use HTML5 video tags to make it run. Works all the time for me and my publications, hope it works for you as well

  • by G-Man 5000,

    G-Man 5000 G-Man 5000 Aug 3, 2012 1:10 PM in response to tk0us
    Level 1 (15 points)
    Aug 3, 2012 1:10 PM in response to tk0us

    tk0us,

     

    Could you expand on adding an HTML5 tag to a video please?

     

    Thanks

  • by tk0us,

    tk0us tk0us Aug 4, 2012 6:07 AM in response to G-Man 5000
    Level 2 (265 points)
    Aug 4, 2012 6:07 AM in response to G-Man 5000

    as an example using a "sample" video as source:

     

    To use HTML5 audio or video, start by creating an <audio> or <video> element, specifying a source URL for the media, and including the controls attribute.

    <video src="http://example.com/path/mymovie.mp4" controls></video>

     

     

    of course you need to change the source to your own .m4a file

  • by LucianoGenova,

    LucianoGenova LucianoGenova Aug 12, 2012 10:09 AM in response to imshapp
    Level 1 (0 points)
    Aug 12, 2012 10:09 AM in response to imshapp

    I found this solution, using Compressor, by Apple.

    Try this and let me know!

     

    Cheers, Luciano - Italy.