Possible to use html5 video tag with json callback?

Wondering if this is possible.

I am working on a video page with a main screen at the top of the page and some small clickable screens below the main screen. So when you click the small screen at the bottom, the main screen will render the clicked video similar to youtube.

We got the data from ooyala like the one below: data="http://player.ooyala.com/static/cacheable/fc6411f99c3b69d5987fcb94f4f48a94/player_v2.swf

Also, we don't have the php code for the backend, so we can only use javascript, jquery and html to make the page.

So here are my questions. How to use html5 video tag, jquery or javascript and json to render each video if it is possible? Also, if anyone can provide any other possible solution or better solution, it will be greatly appreciated. Thanks in Advance.

Answers


Something like this should work...

jQuery:

$("a").click(function(){
    $(".video").html("");
    var url = $(this).data("url");
    $(".video").append("<video controls=\"controls\"><source src=\"" + url + "\" type=\"video/mp4\" class=\"video\" /></video>"); 
});‚Äč

HTML:

<div class="video">  
</div>
<a class="one" href="#" data-url="VIDEO URL ONE">One</a>
<a class="two" href="#"  data-url="VIDEO URL TWO">two</a>

Example: http://jsfiddle.net/charlescarver/xJ6mz/1/


Once you click on an <a> link, it takes it's data-url attribute, puts it into a variable, then appends a video player to a div with the correct src.


Need Your Help

Log4j - Looking for a good 'Getting started' tutorial or blog

java logging log4j

I downloaded Log4j version 1.2.16 today. I want to enable logging in a simple java console application. I'm looking for a 'quick start' tutorial or blog that allows me to perform file logging w...

Loading Assembly in sandbox Appdomain - SecurityException

c# sandbox appdomain

I would like to invoke method from runtime created assembly. It is partially trusted code, so I want to create a sandbox application domain for it.

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.