Video for web and iPhone/iPad – lessons learned (the hard way)

As part of a recent project we have been involved in producing a series of short videos for increasing the awareness of doctors of how to use a physiotherapy referal service. A technical am of this project has been to deliver these videos to both PCs and mobile devices, but without using a video delivery service such as YouTube or Vimeo.  So we wanted to encode one version of the video file into a format that would play in a flash video player embedded in a web page and also be playable on the iPhone/iPad which obviously doesn’t currently have a flash player.

To do this we choose to use the JW Player which offers built in HTML 5 support and encoded the video using H.264

The first thing we learnt was that to get the player to substitute the HTML 5 version for the flash version when viewed with an iPhone/iPad, the video player needs to be embedded within the web page using the JW Player’s own JavaScript embedder (jwplayer.js), rather than HTML embed tags or the generic SWFObject javascript embedder.

Unfortunately it then turned out we had another more significant issue to overcome.  Once we had uploaded our video files and began testing them on-line we encountered serious audio synchronisation issues in the videos when viewing on a PC. This problem did not affect viewing on an iPhone and seemed to disappear if the video was paused and restarted. Initially we thought this must be an intermittant file caching issue. However the same problem was reported by various viewers and we slowly realised this was more serious.

A web search eventually found this forum post by Andrew Wallace which appeared to shed light on this problem:

The H.264 is not a completely “contained” compression method — by this I mean that Audio and Video tracks are still treated as separate entities that only QuickTime can recognize integrated timing information to match each track with one another. Flash, however, can not detect this information and so when it sees a gap of no audio, it shifts the remaining audio to fill in the gap, thus causing a sync issue. Why? Not entirely sure — it’s a Flash issue that has never been addressed by Macromedia/Adobe.

The same post suggests a solution to this problem:

Create a white noise track (generated in a sound program like Soundtrack) that is the complete duration of your video tracks and insert it underneath your currently existing audio track. Set the level to around -70dB thus making it inaudible. This track acts as a binding track to keep things in sync. Export as a self-contained file and compress as you normally would. You can still use H.264 as your compression method.

A subsequent post in the same thread suggests that this solution isn’t necessarily always successful…

So what to do… for this particular project we have now chosen to encode into FLV format for PC delivery and offer a separate H.264 version for iPhone/iPad viewers and provide jQuery tabs to allow selection between the video options available. This is not to suggest that a single video format can’t be used, but we have discovered this is not as simple as it appears and so we opted to use a tried and tested approach that we can have confidence in.

Webducate project wins 2 awards at ALT-C 2009

The LearnHigher making groupwork work resources has been recognised by an unprecedented double award win at the ALT-C 2009 conference.  More details on the development of these resources are available in the related Webducate portfolio entry.

We at Webducate provided technical advice and the web development for these resources as part of a multi-institutional project funded by LearnHigher. We would like to express our particular appreciation to Carol Elston (University of Leeds) who provided enormous energy and vision to the project and without whom this success would not have been achieved.

Details of the awards:

Jorum Learning and Teaching Award

Epigeum Award for Most Effective Use of Video

How to create a video based Dragster activity using an FLV file

In the previous blog post instructions were provided on how to create dragster activities that used a youtube video as the dropzone.  In this post a similar set of instructions and files are provided that demonstrate how to create a video based Dragster 3 drag and drop activity where you have the original video file available and can convert it into an FLV file.

Below is an example activity created using the approach described here:

1. Create your video file

A useful overview of creating digital video is provided by mediacollege.com

To make the most of the dropzone area of a dragster 3 activity you
should try to encode your video with dimensions of 600 by 450 pixels.
Other video sizes will work but these will be resized
within the activity dropzone. The activity will take place on the paused last frame of the video and so it should be edited with this in mind.

2. Publish/Convert your video file into FLV format

In order to display a video within a Dragster 3 activity it needs to be encoded in the flash compatible FLV video format.  There are a variety of tools available for publishing into FLV format or converting from alternative formats (e.g. Adobe Flash, On2 Flix, Sorenson Squeeze, Riva FLV encoder).

Save this video file as video.flv

3. Download the FLV video dragster files

I have provided a set of 4 files to aid your creation of these video Dragster 3 activities.

Download a zip file containing these files

You will need to save these on to your PC and extract them (left click on the downloaded zip file and select Extract all…)

Now copy the video file (video.flv) into this extracted folder overwriting the example video file with the same name already in this folder.

4. Create a dropzone image of the paused video

Within this downloaded folder is a file called video.html Open this file in your web browser to view your video as it will be displayed within the Dragster activity. Play the video until it reaches the end frame and pauses.  At this point you need to create a jpg image file to use as the dropzone image in your activity authoring.

As mentioned in the previous post, I have used two alternative methods to do this:

1. use screen capture software such as TechSmith SnagIt
2. press the PrtScrn button on your keyboard then open image editing software such as Photoshop or Fireworks and use Paste to place a copy of your entire screen into the working area. Then crop this image.

Ultimately you need to create a jpg image which is 600 by 450 pixels in size which just includes the flash file displaying your video. This means the edges of this image should be where the green background meets the edges of the video. Save this image as video.jpg

5. Author and publish the Dragster 3 activity

You should now login to your myWebducate account and author the activity in the usual way using the jpg image created in step 4 as the dropzone. When you are happy with this activity publish it and extract the published files in the usual way.

6. Copy the video related files into the activity folder

Copy your video files into the extracted activity folder (i.e. copy the files: video.flv, video.swf, SteelOverNoVol.swf, video.html into the activity folder).

7. Edit the Dragster 3 activity dragndrop.xml file

Nearly done now… Open the published activity dragndrop.xml file in a text editor such as Notepad and edit the line <target targetImage=”video.jpg“
/> replacing video.jpg with video.swf. Save the amended dragndrop.xml file.

8. Test the activity

You can now test this activity by opening the index.html file within the activity folder with your web browser.

Have fun using these two approaches to embed video in your activities. If/when you develop an activity you are proud of and are happy to share please do let me know!

How to create a YouTube based Dragster 3 activity

In the blog post titled Youtube videos in Dragster activities – demo, an activity was demonstrated (youtube heart mri activity) that used a youtube video as the dropzone for the activity (see screenshot below).

This approach opens up enormous possibilities for activities based on interpreting moving rather than static images. The instructions below describe how to go about creating such an activity:

1. Get the youtube video id code

Identify the youtube video on which you wish to base your activity and make a note of the youtube video id code. This is the code in the youtube web address after the ?v= (for example for the youtube video viewed at the web address of http://www.youtube.com/watch?v=UDqvg26jK9s the id code you need to note is UDqvg26jK9s).

2. Identify the video pause time

Watch this video and pause it at the appropriate moment for the drag and drop activity to take place. Make a note of the time displayed in the youtube player bar (in the example screen shot below this time is 42 seconds).

3. Download the youtube dragster files

I have provided a set of 3 files to aid your creation of youtube based Dragster 3 activities.

Download a zip file containing these files

You will need to save these on to your PC and extract them (left click on the downloaded zip file and select Extract all…)

4. Edit the youtube.xml file

Open the youtube.xml file in a text editor such as Notepad (right click on the file and select Open with > Notepad) This is a very simple file in which you will need to edit only two sections.

Replace the UDqvg26jK9s with you youtube video id code identified in step 1 (i.e. change id=”UDqvg26jK9s” to id=”your youtube id code“).

Replace the 42 with your video pause time in seconds (i.e. change pause=”42″ to pause=”your video pause time in seconds“)

Save the amended youtube.xml file.

NB there are two other settings in yourtube.xml which set the video volume (values 0-100) and a background colour (a hex code prefixed by 0x), you should be able to work out how to amend these if necessary)

5. Create a dropzone image of the paused video

Now the tricky bit… Within this downloaded folder is a file called youtube.html If you open this file with your browser it will attempt to display a flash movie that contains the youtube video. However because you are opening this file on your PC, a security message will be displayed and the video will not appear.  The easiest way to get around this problem is to upload this folder of three files on to a webserver (e.g. by FTP) and then open the youtube.html file. This should then display the youtube video which can be played and will pause at the appropriate time. The alternative is to amend your flash player security settings as instructed by the pop-up security message, but this approach is not recommended.

When you are viewing youtube.html with the video paused at the appropriate moment, you need to create a jpg image file of this to use as the dropzone image in your activity authoring.  I said this bit was a bit tricky!

I have used two alternative methods to do this:

1. use screen capture software such as TechSmith SnagIt
2. press the PrtScrn button on your keyboard then open image editing software such as Photoshop or Fireworks and use Paste to place a copy of your entire screen into the working area.

Ultimately you need to create a jpg image which is 600 by 450 pixels in size which just includes the flash file displaying your youtube video. This means the edges of this image should be where the green background meets the faded background of the flash file. Save this image as youtube.jpg

6. Author and publish the Dragster 3 activity

You should now login to your myWebducate account and author the activity in the usual way using the jpg image created in step 5 as the dropzone. When you are happy with this activity publish it and extract the published files in the usual way.

7. Copy the youtube related files into the activity folder

Copy your edited youtube files into the extracted activity folder (i.e. copy your amended youtube.xml file, and the youtube.swf and youtube.html files into the the activity folder).

8. Edit the Dragster 3 activity dragndrop.xml file

Nearly done now… Open the published activity dragndrop.xml file in a text editor such as Notepad and edit the line <target targetImage=”youtube.jpg“
/> replacing youtube.jpg with youtube.swf. Save the amended dragndrop.xml file.

9. Publish the activity on to a webserver

Now if you view this activity by opening the related index.html file, you will encounter the same security message mentioned in step 5. So to test this activity you will need to publish it onto a webserver and then navigate to the activity index.html file.

That’s it.  I hope you can work your way through this process and create some exciting video based activities using youtube.  Soon I will publish files and instructions for creating activities based on video files encoded in FLV format. Watch this space! (view this blog post on creating activities based on flv video files)

Youtube videos in Dragster activities – demo

For a while now I have been thinking about and working on integrating Dragster with Youtube to allow drag and drop activities to be based on video and animations rather than just static images. This approach is particularly appropriate where movement and context plays an important part in the recognition of parts of an image.

The key aspects of this integration are:

• The Youtube video is displayed as the activity dropzone image.
• The video is played and automatically stops at a specified point in the video.
• At this point the drag and drop activity is based on the static frame of the video being displayed.

To illustrate this I have put together a demonstrator activity which is based upon an animated MRI scan of a heart (view youtube demonstrator). In this example the identification of the structures of the heart is aided by observing their movements in the video. As this is a demonstrator I am very interested in feedback on this approach. Please feel free to contact me in the usual way.

Free FLV encoder

Using AMP just got cheaper!

Being flash based AMP requires video to be encoded into FLV (Flash Video) format.  There are a number of tools available for converting other video file formats into FLV but many of them are quite expensive (e.g. Flash 8, Sorenson).  There is now a free option which seems to perform as well as the alternatives and has been successfully tested with the AMP player.

So check out Riva FLV Encoder…