在锚点击上显示flowplayer div

时间:2014-07-31 11:40:25

标签: javascript jquery html5 cgi flowplayer


我在CGI中有动态页面,文件列表 - 文件数量是可变的,它取决于上传的内容。我想预览视频文件。这是一段HTML代码。

    <TMPL_LOOP files>
    <tr>
        <td>
            <a class="video_link" id="video_<TMPL_VAR file_id>" href="<TMPL_VAR file_path>"><TMPL_VAR file_name></a>
        </td>
        <td>
            File info here
        </td>
    </tr>
    </TMPL_LOOP>
    ...
    <div id="overlay">
        <a class="close" title="close"></a>
        <div id="overlay-player">
            <video>
            <source type="video/mp4" src="path to file derived by JS">
            </video>
        </div>
    </div>
    <script type="text/javascript">
    $('.video_link').click(function(event) {
        var filePath = getFilePath((event.target.id).substr("video_".length));
        show video here 
    });
    </script>

我无法为每个文件使用缩略图或启动画面。我发现了类似的东西: http://demos.flowplayer.org/scripting/overlay-jquerytools.html
但我不知道如何为我的项目改变它。 循环遍历文件数组。每行都有关于文件的完整信息:名称,大小,路径,创建,MIME类型等 您有任何想法如何使流媒体在我的文件中可用吗?

1 个答案:

答案 0 :(得分:1)

$('.video_link').click(function(event) {
       event.preventDefault();// add this line.
        var filePath = getFilePath((event.target.id).substr("video_".length));
        show video here 
    });