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 }。

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

1 个答案: