iWeb and Quicktime Movie Upload 2013
Three or so years ago, I made a website using iWeb (the last version Apple produced; i.e. the current version), and I included some videos. The videos were from a digital (tape) video camera, edited with iMovie HD, and were old-format 640x480. I managed to work out how to set the movies to start quickly (before fully loading) using iMovie and QuickTime. I dropped the movie into a regular iWeb page, resized it, put the settings up with the iWeb inspector, and all was well. The movies played (and still play) on Safari and Firefox, on my Macs and on an Asus Windows machine I have. (They won't play on my iPad - if anyone can tell me why, I'd be grateful; I'll probably put the original DV through a more recent version of iMovie and QT, and upload again.)
I want to make another similar website. However, my camera is now a HD tape model, and I have made my peace with iMovie '11 and worked out how to use it. My machine is the latest Mac Mini, and so QT is the latest also. I run Mountain Lion.
I made a movie with iMovie '11, and exported a quality version. I opened it in QT and chose 'Export for Web' and selected the option which gives me three different sizes. After some struggles, I worked out how to put this into my uploaded iWeb (test) site (although I have to say that the instructions Apple's QT gives are not the clearest), and it works, even on my iPad.
My questions concern the code which QT says you should upload. The code in the <body>, I understand, and it's obviously necessary to play the movie.
But about the <head> tag QT says:
Please note, to properly validate as XHTML, the <style> tag and the first <script> tag should be placed within your page's <head> tag.
Here's the code QT says to paste into the <head>
<script src="scripts/prototype.js" language="JavaScript" type="text/javascript"></script>
<script src="scripts/qtp_poster.js" language="JavaScript" type="text/javascript"></script>
<link href="stylesheets/qtp_poster.css" rel="StyleSheet" type="text/css" />
However, the movie playback still seems to work without uploading the code for the <head> of the page. And there is NO <style> tag, and why only the FIRST <script> tag?
The <head> on the page iWeb produces for my test page already has a lot of code:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Generator" content="iWeb 3.0.4" />
<meta name="iWeb-Build" content="local-build-20130116" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="viewport" content="width=950" />
<title>Ed's Video Test</title>
<link rel="stylesheet" type="text/css" media="screen,print" href="Eds_Video_Test_files/Eds_Video_Test.css" />
<!--[if lt IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Eds_Video_Test_files/Eds_Video_TestIE.css'/><![endif]-->
<!--[if gte IE 8]><link rel='stylesheet' type='text/css' media='screen,print' href='Media/IE8.css'/><![endif]-->
<style type="text/css">
/*<![CDATA[*/
@import "Scripts/Widgets/HTMLRegion/Paste.css";
/*]]>*/
</style>
<script type="text/javascript" src="Scripts/iWebSite.js"></script>
<script type="text/javascript" src="Scripts/iWebImage.js"></script>
<script type="text/javascript" src="Scripts/iWebMediaGrid.js"></script>
<script type="text/javascript" src="Scripts/Widgets/SharedResources/WidgetCommon.js"></script>
<script type="text/javascript" src="Scripts/Widgets/HTMLRegion/Paste.js"></script>
<script type="text/javascript" src="Eds_Video_Test_files/Eds_Video_Test.js"></script>
</head>
Questions:
1. Should I put the QT code in the <head> tag anyway, even though it seems to work without it?
2. If I don't put it in, does that mean the choice between the three movies doesn't take place? I don't have a smartphone, but the playback on my 27" screen, my Asus netbook, and on my iPad all look fine without the head code.
3. If I do put it in, where exactly do I put it, and do I need to replace any of the code that is already there?
4. The original iWeb drag and drop method still seems to work fine with movies direct from iMovie (and plays even on my iPad), but obviously you can only put one version of the movie on a page. Is there still a good reason for using the multi-size version which involves manually uploading the movie and opening the page after uploading and inserting code for every movie? For example, I have a very fast internet connection. Maybe it's kind to those with a slower connection to put up the smaller movies also?
And, since I'm here, I have a couple of slightly related questions:
5. I designed my site (it's non-commercial, just a trip report, but with a lot of pages) to not need any scrolling even on quite a small desktop screen (you click on from page to page like a book, but you can also navigate around sections more easily this way; anyway that's how I like it). But on the iPad, held horizontally, the width is resized to take up the full width of the sceen, so you then need to scroll down. It's really annoying me. Is there some code I could put in to tell the iPad not to do this (there are plenty fewer vertical pixels on my website's pages than on the iPad screen)? (I don't care about phones, because the site is photo-based so looking at it on a phone is pointless in my opinion. And netbooks with only 768 vertical pixels are not particularly important to me either, but the iPad screen is plenty big enough for the site to work the way I want it to.)
6. And I want to include slideshows of photos without using the iWeb/iPhoto system (which brings up an external window in a different colour). I want the user to be able to see the thumbnails, to start and stop an on-page slideshow, and for me to be able to put captions (descriptions) with the slides. There seem to be a lot of options, and I still haven't finished looking at all the ones I got from the web. But does anyone have a good recommendation - paid or free?
Thanks for reading this long thread, and for any advice.
