CODEWITHSUNDEEP
javascriptjwplayer
User1000547
User1000547

Reputation: 4301

JWPlayer control bar causing post-backs

When a user clicks on play/pause, volume, or the full-screen button, the page does a post-back. This has been seen in Chrome 23, IE 9, Safari 5, both for Windows and Mac. Firefox 17 and Opera 12 are okay. The best one probably has to be the full-screen in Safari.

Here's the code I'm using to embed the video:

<div id='my-video'></div>
<script type='text/javascript'>
    jwplayer('my-video').setup({
         file: '/videos/Penultimate_Md.mp4',
         image: '/videos/penultimate_first.png',
         width: '480',
         height: '270',
         });
</script>

How can this be resolved? Is this just a bug that has nothing to do with me?

Confirmed

It's a bug in the HTML5 video player. The control bar inputs are all html buttons, which cause the ASP validators to fire (thanks to @Lando for pointing that out). Longtail says it'll be fixed in the next release. Adding primary: flash, will work provided the user has flash installed.

Upvotes: 4

Views: 2306

Answers (3)

JGood
JGood

Reputation: 522

I believe Mike's issue is that the jwplayer has not finished loading. Just add it to the event after the loading of the player. This worked in my code

    <div id="my-video">Loading the player...</div>
    <script type='text/javascript'>
        $(document).ready(function () {
            jwplayer('my-video').setup({
                playlist: [{
                    sources: [{ file: 'SampleVideo.mp4' }]
                }]
            });
            jwplayer().onReady(function (event) {
                $('#my-video button').on('click', function (event) { return false; });
                alert('Ready');
            });
        });
    </script>

Upvotes: 2

User1000547
User1000547

Reputation: 4301

The Hack-tastic solution

Seriously. If anyone has a better solution, please tell me.

When JWPlayer detects an HTML 5 compliant browser, it renders the HTML 5 version of the video player. The control-bar buttons are <button> elements, which by default cause the ASP.NET validators to fire, which in turn causes a post-back.

Using Javascript/JQuery, I attempted to set the onclick attribute of all buttons to return false; in the window.onload event. However, for some reason, the player hasn't been rendered at that point in the page's life cycle - the JQuery selector $("button") returned 0 elements.

So here's what I ended up doing. As noted, this is hack-tacular and I hate it. Hopefully Longtail fixes this soon.

<div onclick="disableButtons(); return false;" >                
    <div id='my-video'></div>
    <script type='text/javascript'>
        jwplayer('my-video').setup({
            file: '/videos/Penultimate_Md.mp4',
            image: '/videos/penultimate_first.png',
            width: '480',
            height: '270'
            });

function disableButtons() {
    var buttons = $("my-video button");
    buttons.attr('onclick', 'function () { return false; }');

    </script>
</div>

So, whenever a user clicks on the <div> containing the player, all buttons are set to return false;. NB This applys to ALL buttons on the page. If you have any other buttons on your page, it will affect them as well. I incorporated @goodwince's suggestion, which only targets buttons within the specified div.

Upvotes: 1

Lando
Lando

Reputation: 715

I can't tell you if it is really a bug, but the following code in your page is conflicting with your JWPlayer setup.

<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>

Somehow the html version of the player is triggering the __doPostBack which in turn triggers theForm.submit() and finally the page reload.

Workaround 1

Put the player outside the form.

Workaround 2

Switch to flash as primary player, you can do that by adding primary: 'flash' to your setup, see the code bellow.

jwplayer('my-video').setup({
     file: '/videos/Penultimate_Md.mp4',
     image: '/videos/penultimate_first.png',
     width: '480',
     height: '270',
     primary: 'flash'
});

Of course this will not solve the issue when flash is not available.

Upvotes: 2

Related Questions