CODEWITHSUNDEEP
javascriptjqueryflowplayer
nerdess
nerdess

Reputation: 10920

Why do I have to evoke the flowplayer twice?

This is totally odd.......

Here is my code:

HTML

   <a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a>

JAVASCRIPT

$(document).ready(function () {
flowplayer('a.video', {
        src: '/swf/flowplayer.commercial-3.2.7.swf',
        clip: {
            autoPlay: false,
            autoBuffering: true
        }
    });
})

Above examaple doesn't work, the player does not get created in the DOM. But below example does (all I am doing is calling the flowplayer twice).....?!

HTML

   <a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a>

JAVASCRIPT

   $(document).ready(function () {
   flowplayer('a.video', {
        src: '/swf/flowplayer.commercial-3.2.7.swf',
        clip: {
            autoPlay: false,
            autoBuffering: true
        }
    });

   flowplayer('a.video', {
        src: '/swf/flowplayer.commercial-3.2.7.swf',
        clip: {
            autoPlay: false,
            autoBuffering: true
        }
    });
})

Why?

Upvotes: 0

Views: 1220

Answers (2)

Dfaussio
Dfaussio

Reputation: 166

I ran into this issue recently when I had a play icon inside the anchor tag. I ended up emptying the anchor tag HTML on click in order to fix this issue. Sample code below.

HTML:

<a id="videoPlayer" class="videoPlayer" href="[VIDEO_URL]" style="background-image: url(VIDEO_THUMB_URL);">
    <img src="/images/icon_video_play.png" width="40" height="40" alt="View video" />
</a>

CSS: 

a.videoPlayer { 
    display: block;
    width: 480px;
    height: 270px; 
    text-align: center; 
    cursor: pointer;
}

a.videoPlayer img {
    margin-top: 115px;
    border: 0px;
}

Javascript:

$(document).ready(function () {
    $("a.videoPlayer").click(function (e) { 
        // Empty anchor tag to avoid having to click twice
        $(this).empty();

        flowplayer("videoPlayer", "/flash/video/flowplayer.swf");               

        e.preventDefault();
    });

});

Upvotes: 1

LeftyX
LeftyX

Reputation: 35587

Try and remove the Test description of your hyperlink and it should work:

<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">**Test**</a>

Try to move the script at the bottom of the page. It's one of the best practices

This is my sample and it works:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Set default value</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script>
    </head>
    <body>
        <a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px"></a>   

        <script type="text/javascript">
            $(document).ready(function () {

            flowplayer('a.video', {
                src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf',
                clip: {
                    autoPlay: false,
                    autoBuffering: true
                    }
                });
            })
        </script>
    </body>
</html>

Upvotes: 2

Related Questions