Question

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.

Answer 1

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.