JWPlayer控制栏导致页面回传

Question

JWPlayer控制栏导致页面回传

4

当用户点击播放/暂停、音量或全屏按钮时，页面将进行后退。这在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 将起作用。

- Mike G

3个回答

2

我认为Mike的问题在于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>

- JGood

尝试过这个，但播放器从未加载完成......它只是一直显示“正在加载视频播放器...” - Mike G

嘿，Mike..我犯了一个错误，在jwplayer('my-video')内添加了'#'。实际上我回来修复它并看到了你的评论。感谢你的评论指出了这个问题！ - JGood

嗯...现在div已经渲染并加载了视频（您可以使用开发工具查看），但是没有任何可见的东西 - 只有一个空白区域。将鼠标悬停在上面会显示有东西，但是单击时什么也不会发生。越来越好奇了... - Mike G

以上代码对我完美地起作用了。如果你仍然遇到问题，可以检查一下视频吗？我已经改变了 JW6 中文件的加载方式，这是处理多个格式的适合方法，包括 Flash、MP4 和 Quicktime。 - JGood

啊，我还没有更新。我应该抽时间去做一下。 - Mike G

1

神奇的解决方案

说真的，如果有更好的解决方案，请告诉我。

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

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

所以这就是我最终做的事情。正如所述，这是一个hack-tacular的解决方案，我很讨厌它。希望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>

所以，每当用户点击包含播放器的

时，所有按钮都设置为

 return false; 。NB这适用于页面上的所有按钮。如果您在页面上有其他按钮，它们也会受到影响。我采用@goodwince的建议，仅针对指定中的按钮。

- Mike G

你的解决方案还不错，只需要更改代码，使其更具选择性并针对包含按钮的 div。$('my-video button')。 - JGood

有趣。$('my-video button') 能够工作，但是 JQuery 选择器仍然返回 0 个元素...不确定发生了什么。但它能够工作，所以还好。感谢反馈。 - Mike G

在测试时，请尝试使用 #my-video 按钮。 - JGood

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lando · Accepted Answer

我不能确定这是否真的是一个错误，但你网页中以下代码与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：将主要播放器切换为flash，您可以通过添加primary: 'flash'到设置中来实现此功能，参见下面的代码。

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

当然，这并不能解决Flash不可用的问题。