Question

当用户点击播放/暂停，音量或全屏按钮时，页面会进行回发。这在Chrome 23，IE 9，Safari 5中已经出现，适用于Windows和Mac。 Firefox 17和Opera 12都没关系。最好的一个可能是Safari中的全屏。

以下是我用来嵌入视频的代码：

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

如何解决这个问题？这只是一个与我无关的错误吗？

确认

这是HTML5视频播放器中的一个错误。控制栏输入都是html按钮，这会导致ASP验证器触发（感谢@Lando指出它）。 Longtail说它将在下一个版本中修复。如果用户安装了Flash，则添加primary: flash,将起作用。

Answer 1

我无法告诉您它是否真的是一个错误，但您页面中的以下代码与您的JWPlayer设置相冲突。

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

播放器的html版本以某种方式触发__doPostBack，然后触发theForm.submit()，最后重新加载页面。

解决方法1

将播放器放在表单之外。

解决方法2

切换为闪存作为主播放器，您可以通过在设置中添加primary: 'flash'来实现，请参阅下面的代码。

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

当闪存不可用时，这当然无法解决问题。

Answer 2

我相信迈克的问题是jwplayer尚未完成加载。只需在加载播放器后将其添加到事件中即可。这在我的代码中起作用

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

Answer 3

Hack-tastic解决方案

严重。如果有人有更好的解决方案，请告诉我。

当JWPlayer检测到符合HTML 5的浏览器时，它会呈现视频播放器的HTML 5版本。控制栏按钮是<button>元素，默认情况下会导致ASP.NET验证器触发，从而导致回发。

使用Javascript / JQuery，我尝试在onclick事件中将所有按钮的return false;属性设置为window.onload。但是，由于某种原因，播放器尚未在页面的生命周期中的那个点上呈现--JQuery选择器$("button")返回了0个元素。

所以这就是我最终做的事情。如上所述，这是非常苛刻的，我讨厌它。希望Longtail很快解决这个问题。

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

因此，每当用户点击包含播放器的<div>时，所有按钮都会设置为return false;。 ~~NB 这适用于页面上的所有按钮。如果您的页面上有任何其他按钮，它也会影响它们。~~我合并了@ goodwince的建议，该建议仅针对指定div内的按钮。

JWPlayer控制栏导致回发

确认

3 个答案:

Hack-tastic解决方案