javascript - 可以使用带有 json 回调的 html5 视频标签吗？

Question

想知道这是否可能。

我正在制作一个视频页面，其主屏幕位于页面顶部，主屏幕下方有一些可点击的小屏幕。因此，当您点击底部的小屏幕时，主屏幕将呈现类似于 youtube 的点击视频。

我们从ooyala获取了如下数据:data="http://player.ooyala.com/static/cacheable/fc6411f99c3b69d5987fcb94f4f48a94/player_v2.swf

另外，我们没有后端的php代码，所以只能使用javascript、jquery和html来制作页面。

这是我的问题。如果可能的话，如何使用 html5 视频标签、jquery 或 javascript 和 json 渲染每个视频？另外，如果有人可以提供任何其他可能的解决方案或更好的解决方案，我们将不胜感激。提前致谢。

Answer 1

像这样的东西应该有效......

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>

示例:http://jsfiddle.net/charlescarver/xJ6mz/1/

<小时/>

一旦您点击 <a>链接，它需要 data-url属性，将其放入变量中，然后将视频播放器附加到 div正确的src .