Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inserting HTML5 video using JavaScript for iPad

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

like image 469
VDP Avatar asked Jun 15 '10 15:06

VDP


People also ask

Does Safari support HTML5 video?

Safari supports HTML5. If YouTube video doesn't play, try either disabling or uninstalling extensions like ClickToFlash.

Does iOS Safari support HTML5?

HTML5 semantic elements is Fully Supported on Safari 13, which means that any user who'd be accessing your page through Safari 13 can see it perfectly.

Can you put videos in JavaScript?

4 Create audio / video elements with JavaScriptThe video tag can be treated like any other tag in the DOM, so you can easily create one with the document. createElement("video") and then set the video's attributes like source, controls, and so on. Here's an example that adds a video inside a div with id = "myVideo" .


2 Answers

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();
like image 171
ampt Avatar answered Sep 29 '22 13:09

ampt


Re ampts answer: please note calling load() on the video element only works if your code is triggered by a user action, like a click handler.

For me this didn't work as apple doesn't seem to think that the history handler (hash change) is a user triggered handler.

For more details see apples documentation on javascript and the video element

like image 30
user132837 Avatar answered Sep 29 '22 13:09

user132837