Question

I have the following code to insert a flowplayer with playlist via javascript on my page. Now I need the player to start at video[playing], this means at a predefined position in the playlist. The console tells me that the object (v.flowplayer) has no method play... what am I doing wrong?

Thanks to the source of the video element, the player starts at the right video, but using the .prev() and .next() functions, messes up the playlist order by playing the second video after using .next(), even if the initial video was the 5th video in the playlist.

var v = videos.eq(2);
            var p = $('<div class="fp-playlist"></div>');
            var vt = $('<video>');
            var s = $("<source>");
            var a;



            vt.attr({poster: playlist[playing].poster});
            s.attr({src: playlist[playing].url, type: "video/" + playlist[playing].videotype});
            v.append(vt.append(s));
            for(var i = 0; i < playlist.length; i++){
                a = $('<a href="{0}"></a>'.compose(playlist[i].url));
                p.append(a);
            }
            v.append(p);
            v.flowplayer().play(playing);

The HTML looks like this, after the javascript has run:

<div class="video flowplayer no-volume fixed-controls no-toggle no-time is-mouseover video0 is-muted is-ready is-paused is-poster" data-embed="false" data-keyboard="false" data-fullscreen="false" style="background-image: url(somepic.jpg);">
<video poster="poster.jpg" class="fp-engine" src="somevid.webm"></video>
<div class="fp-playlist">
    <a href="somevid.mp4" data-index="0" class="is-active"></a>
    <a href="somevid.mp4" data-index="1"></a>
    <a href="somevid.mp4" data-index="2"></a>
    <a href="somevid.mp4" data-index="3"></a>
    <a href="somevid.mp4" data-index="4"></a>
    <a href="somevid.mp4" data-index="5"></a>
    <a href="somevid.mp4" data-index="6"></a>
    <a href="somevid.mp4" data-index="7"></a>
    <a href="somevid.mp4" data-index="8"></a>
    <a href="somevid.mp4" data-index="9"></a>
    <a href="somevid.mp4" data-index="10"></a>
    <a href="somevid.mp4" data-index="11"></a>
    <a href="somevid.mp4" data-index="12"></a>
    <a href="somevid.mp4" data-index="13"></a>
    <a href="somevid.mp4" data-index="14"></a>
    <a href="somevid.mp4" data-index="15"></a>
    <a href="somevid.mp4" data-index="16"></a>
    <a href="somevid.mp4" data-index="17"></a>
    <a href="somevid.mp4" data-index="18"></a>
    <a href="somevid.mp4" data-index="19"></a>
    <a href="somevid.mp4" data-index="20"></a>
    <a href="somevid.mp4" data-index="21"></a>
    <a href="somevid.mp4" data-index="22"></a>
    <a href="somevid.mp4" data-index="23"></a>
    <a href="somevid.mp4" data-index="24"></a>
    <a href="somevid.mp4" data-index="25"></a>
    <a href="somevid.webm" data-index="26"></a>
    <a href="somevid.mp4" data-index="27"></a>
    <a href="somevid.mp4" data-index="28"></a>
</div>
<div class="fp-ratio" style="padding-top: 56.25%;"></div>
<div class="fp-ui">
    <div class="fp-waiting">
        <em></em>
        <em></em>
        <em></em>
    </div>
    <a class="fp-unload"></a>
    <p class="fp-speed"></p>
    <div class="fp-controls">
        <a class="fp-play"></a>
        <div class="fp-timeline">
            <div class="fp-buffer" style="width: 100%;"></div>
            <div class="fp-progress"></div>
        </div>
        <div class="fp-volume">
            <a class="fp-mute"></a>
            <div class="fp-volumeslider" style="">
                <div class="fp-volumelevel" style="width: 0%;"></div>
            </div>
        </div>
    </div>
    <div class="fp-time">
        <em class="fp-elapsed">00:00</em>
        <em class="fp-remaining">00:12</em>
        <em class="fp-duration">00:12</em>
    </div>
    <div class="fp-message">
        <h2></h2>
        <p></p>
    </div>
</div>
<a href="http://flowplayer.org"></a>
<div class="fp-context-menu" style="left: 489.21875px; top: 179px; display: block;">
    <ul>
        <li class="copyright">© 2013</li>
        <li><a href="http://flowplayer.org">About Flowplayer</a>
        </li>
        <li><a href="http://flowplayer.org/license">GPL based license</a>
        </li>
    </ul>
</div>

Was it helpful?

Solution

The last javascript line with v.flowplayer().play(playing) should be like:

v.data('flowplayer').play(playing);
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top