Apple Event: May 7th at 7 am PT

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Why is adding HTML code so difficult?

I'm trying to add a weather widget into my book. Yes, I've been spending a lot of time looking into dashcode and creating the widget from scratch, but I can't get it done. Even though I got Xcode and dashcode installed, I'm not that technically inclined and can't figure out how to take this snippet:


<script src="http://weatherandtime.net/swfobject.js" type="text/javascript" ></script><div id="div_weather_05" style="padding:0px;text-align:center; margin:auto auto;width:170px; height:220px;"><div style="padding:1px;position:relative; z-index:100; color:#FFFFFF; text-align:center;left:50px;top:182px; width:115px;height:auto;overflow:hidden;"><a style="margin:0px; padding:3px; color:#FFFFFF; text-decoration:none; font-size:12px;" href="http://weatherandtime.net/en/Asia/Sri-Lanka/Colombo-weather.html" title="Colombo Weather"><nobr>Colombo Weather</nobr></a></div><span id="swf_weather_05"> </span></div><script type="text/javascript" language="Javascript">swfobject.embedSWF("http://weatherandtime.net/weather_05.swf", "swf_weather_05", "170", "200", "10","weather_05.swf", {city: "19459",lang:"en"}, {menu:"false",wmode:"transparent",allowScriptAccess:"always"}, {id:"weather_05",name:"weather_05"});</script>


and make it into a widget that I can just drag and drop into the book's HTML widget window. Is there an easier way to do this? Otherwise, unfortunately, I don't think I'll be able to use some of these key features.

Posted on Jan 22, 2012 10:51 AM

Reply
Question marked as Best reply

Posted on Jan 22, 2012 12:47 PM

Well for one, you are trying to load flash content so that won't work but it looks like you can't access external data from the iBooks

45 replies

Jan 26, 2012 11:24 AM in response to imshapp

hei, sounds like a nice project...


Well first of all i didn't try video, only audio, but had to make a lot of workarounds...


i used jQuery and the HTML5 library jPlayerand that worked very good also combined with fancyBox


first of all the only audio accepted was .m4a, but something where weird and allways rejected, i have used some other non apple audio converter to convert from .mp3 to .m4a.... so what i did was, open each .m4a in quicktime, and export again in the same .m4a format, for some reason that new (heavy) .m4a adio was not rejected....


after that widget was accepted and works very well...


Hope this helps, and would like to see how do you do with your project, I'm a graphic designer, so if you need a hand, i can help....

Jun 5, 2012 3:01 AM in response to imshapp

hey everyone,


This has been a topic I have been following very closely as not being able to locally store videos in a widget has been a huge thorn in my side.


I have tried a few different things but, still haven't been able to get anything to work.


I was really close to getting something that may work and wanted to throw it out there to see if anyone else has suggestions or similar ideas.


What I did was add the video to the hype file as an .m4v and then exported to an html 5 widget.


I then opened the contents and changed the extension of the .m4v file to .mp4 (strangely this worked and let me add the file into ibooks author, despite the fact that adding a real mp4 file does not work.


I then exported the ibook author file as an ibook, and then changed the extension to .zip and extracted it.


and changed the file back to .m4v.


I also tried to leave it as a .mp4, and also tried replacing the .m4v file with the .mp4 file and changing the reference in the hype.js file, unfortunately all to no avail.


unfortunately the video does not playback, but I wanted to throw this process out to see if anyone else has tried anything similar or could offer any suggestions on something else to try.

Jun 5, 2012 6:30 AM in response to Rycankun

I tried jplayer with mp4 video and it didn't work. We're using with m4a audio though and it's working great. Maybe a combination of jplayer and Rycankun's suggestion would work - or even using HTML5 video tags. I had tried adding .mp4 video files to my widgets and always got the 'widget not added b/c of unsupported file types' error. We've been using m4v video files in the Media widget instead but have still been looking for a solution to use video in HTML widgets. As a test I just tried changing one of our m4v video files to have the mp4 ext and I was able to add it to the widget. Changing the file ext back to m4v gave me the 'unsupported file' error again so perhaps Rycankun is correct. I'm going to try to hook one up to play the video from my html code and will post results shortly. Thanks Rycankun for the possible work-around!!

Jun 5, 2012 8:44 AM in response to Rycankun

Bingo! Thanks Rycankun! Sometimes it's the most simple solution. To re-cap...if you have a m4v video that will work in a Media Widget then you can simply change the file ext to mp4 and use it in a HTML Widget. Simply making a mp4 from Quicktime or Compressor doesn't seem to work though.


A few thoughts about encoding -- we started out using the documented Quicktime 10 > Export > Format iPod touch & iPhone 3GS but there's no control over the video/audio compression settings. We then went to Compressor and used a modified version of the SD or HD preset for Apple devices - had more control but still weren't able to get the files as small as we needed at the quality we desired. We finally have settled on using Handbrake to create our mp4 using the iPhone & iPod Touch preset and adjusting the Constant bitrate RF value and audio settings to get the quality we desired. The resulting mp4 is not directly useable in iBA but it's easy to convert the mp4 container to a m4v contrainer using Subler (for Mac) to transcode to Main @ 3.1 profile. Transcoding with Subler doesn't re-encode the video or audio - those tracks just pass through and Subler converts the movie container to the selected Main @ 3.1 profile. There's probably a way to create the m4v directly from Handbrake with Main @ 3.1 profile but so far the closest I've gotten is Baseline @ 3. Anybody have any thoughts on this?

Jun 5, 2012 6:40 PM in response to cmath

Hey cmath,


Where you able to get it to work???


If so could you send a quick example as I still havnt been able to get the video to work in the video once it is added.


If you were able to get something to work could you explain what you did or maybe send a quick sample.


As for video encoding I am not really sure about all of that, but if i see anything around I will make sure to update you.


Thanks!

Jun 6, 2012 5:21 AM in response to Rycankun

I did get it to work. The key is to start with a m4v video that has the correct profile -- Main @ 3.1. When you have a properly encoded m4v video you can change the file ext to mp4 and use the video in an HTML widget. For my test I simply used the HTML5 video tag but I'm sure there are other ways to display the video like using jPlayer (jQuery plugin). Here's a link that explains the HTML5 video tag http://www.w3schools.com/html5/tag_video.asp and a link to the jPlayer plugin http://jplayer.org/


If you have a mp4 video already you can open it in a program called Subler and see what the profile is. The mp4 videos I created with Handbrake were coming out as Baseline @ 3 or Baseline @ 2.2 so they won't work in IBA. So I opened these mp4 videos in Subler - it shows the current profile - and then selected the video track and changed the profile to Main @ 3.1 - added it to the queue - and exported a new m4v with the correct profile. The m4v file that is created by Subler works in the Media Widget of IBA so changing the file ext to mp4 allows me to use this video in the HTML widget.


You could probably also create your m4v video by exporting from Quicktime 10 and then change the file ext to mp4 but I haven't tested that - should work though. Here's info from Apple on how to create m4v videos using QT10 http://support.apple.com/kb/HT5065.


Let me know if you need more info.

Why is adding HTML code so difficult?

Welcome to Apple Support Community
A forum where Apple customers help each other with their products. Get started with your Apple ID.