Inserting HTML5 video using JavaScript for iPad

Question

Hello, I am trying to insert a video into HTML using jQuery for iPad but all I see is a black screen. If I add the video tag directly to the HTML page all seems to work fine.

Here is what I have in my JavaScript and I call this using a function for onClick event.

var html = "";
html += '<video id="someVideo" width="'+settings.width+'" height="'+settings.height+'" controls="controls">';
html += '<source src="'+url+'"  type="video/mp4" />';
html += '</video>';
$("#videoDiv").html(html); 

If I create a video tag right inside the body everything seems to be working fine

<video width=708px height=300px controls="controls"><source src="video.mp4" type="video/mp4"></video>

The reason I am planning a JavaScript is that I have few videos on the same page and wanted the user to select a video to be viewed as oppose to a single video on a page... Any idea around that will also help

Any help will be greatly appreciated Thanks

Answer 1

"The reason I am planning a JavaScript is that I have few videos on the same page and wanted the user to select a video to be viewed as oppose to a single video on a page... Any idea around that will also help"

Place all the videos on the page, each with a style "display: none". Then .show() the appropriate div on the click event.

Answer 2

There is a bug in iPad's webkit that prevents dynamically created video elements from loading properly.

To get around this set the source attribute and call the video elements load method after you have set the html

var html = "";
html += '<video id="someVideo" width="'+settings.width+'" height="'+settings.height+'" controls="controls">';
html += '<source src="'+url+'"  type="video/mp4" />';
html += '</video>';
$("#videoDiv").html(html);

$('#someVideo').attr('src', url);
$('#someVideo')[0].load();