View Full Version : Solving video preload issue in my popup

2 Feb 2012, 6:40 AM
I’ve had success with custom markers on a map, with different videos in a popup depending on which marker is clicked. One thing that doesn’t work as expected is the preloading of videos, due to Apple’s restrictive policy on preloading due to excess data charges.

I’ve found a workaround here though, that I think would work for my needs....providing the user interacts i.e. clicks a link it can initiate some javascript that can load a movie and play. This works on my iPad with iOS 5. Take a look:


I’m sure this can be adapted to clicking on thumbnails, the problem I am having is adapting this to my Sencha Touch app. In the example above, some javascript swaps the video source and autoplays depending on which link is clicked. Each link has a unique classname e.g.

<a class="videoLauncher tester" href="#video1" style="color: black; margin: 0px 5px;">Play video no. 1</a>

The above plays the movie ‘tester.mp4’. You can download a test file with a few small MP4s here:
I’ve worked out that for this to work for me, I would need to create a dynamic class name for all the markers on my map, which when clicked would initiate the javascript and play the movie in the popup.

I’m a bit stumped though how to create a dynamic class name around all my markers on my map. I think I would need to create a dynamic class name of something like ‘videolauncher this.videoPath’ but I’m not sure how to do it!

Here’s some of my Sencha Touch code:

// Add custom marker images to the Google Map

function addMarker(country)
if (true)
var image = new google.maps.MarkerImage(country.image48Path);
var marker = new google.maps.Marker({
map: map.map,
title: country.title,
position: country.position,
//draggable: true,

//this is done for adding handler function if it has parameter

var goToCountryWrapper = function (button, event)
goToCountry(country, this.popup);

// Click listener to activate popup with video related to certain marker

google.maps.event.addListener(marker, 'click', function() {

// would need to somehow add a dynamic class name around here, which would vary depending on which marker is clicked. Something like '<a class="videoLauncher' + countryInfo.videoPath + '

if (!this.popup) {
this.popup = new Ext.Panel(
floating: true,
modal: true,
centered: true,
width: 800,
height: 600,
style: 'background-color:#373737; color:white;',
styleHtmlContent: true,
scroll: 'vertical',
items:[(new countryOverlay(country)).overlayPanel,{
margin: 200,
text:'Click here to view more promo videos',
scope : this

layout: {
type: 'auto',
padding: '55',
align: 'left'
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'light',
title: country.title

//code cut for readability
//the custom popup...countryoverlay

this.overlayPanel = new Ext.Panel({
items:[ {html: '<div style="float:left"><video width="750" height="460" controls="controls"><source src="' + countryInfo.videoPath + '"></video></div>'

Any tips would be appreciated


2 Feb 2012, 9:53 AM
The markers are a google class so extending them wouldn't be like extending a Sencha Touch class.

2 Feb 2012, 1:44 PM
Thanks Mitchell, I will do some more reading about Google maps :-)

I think I will try to make a simple example using a thumbnail image leading to a popup and go from there, avoiding google maps then as a 'proof of concept' that this can work.

It's a shame we are a bit limited on storing video files in the cache manifest or similar...I'm thinking a better way might be just to host the videos somewhere on Vimeo and then try and e them to local storage, like the Just One More example.