CODEWITHSUNDEEP
javascriptjqueryhtmlcgiflowplayer
Pingwin Tux
Pingwin Tux

Reputation: 134

Show flowplayer div on anchor click


I have dynamic page in CGI with list of files - count of files is variable, it depends on uploaded content. I want to make preview of video files. Here is piece of HTML code.

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

I can't use thumbnail or splash for each file. I found something like that: http://demos.flowplayer.org/scripting/overlay-jquerytools.html
but I don't know how to change it for my project. Loop iterates over files array. Each row have full info about file: name, size, path, created, MIME type, etc.
Have you any ideas how to make flowplayer usable in my file?

Upvotes: 0

Views: 99

Answers (1)

madhurjya
madhurjya

Reputation: 160

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

Upvotes: 1

Related Questions