3

我目前有一个 div，我们称它为#videodiv包含 HTML5 视频播放器（SublimeVideo，但这可能是不相关的信息）。在页面加载时，#videodiv只有 100 像素。当用户单击 内的任何位置时#videodiv，我希望 jQuery 将 div 扩展为 250px。

你可能会说——这就像一个 jQuery 函数一样简单，只需使用点击然后动画！你是对的，除了...

这就是问题所在：包含在#videodiv其中并填充整个 div 的 HTML5 视频播放器会捕获所有发生的点击。这样做是为了触发播放器的播放/暂停功能，但随后不允许任何程序员为包含的 div 设置 jQuery 单击功能。

幸运的是，在这种情况下，#videodiv它是一个 100% 全身宽度的 div，并且具有 100 像素的精确高度。因此，考虑到上述问题，另一种方法是确定我们是否可以捕获HTML 文档（而不是 div）中发生在页面前 100 个像素中的任何点击，然后触发该函数。

换句话说，我们如何使用 jQuery 来检测页面前 100 像素内的任何地方的鼠标点击，然后将 div 动画设置videodiv为 250 像素？

替代/更好的解决方案绝对受欢迎，但 jQuery 是首选方法。

4

2 回答 2

1

像这样的东西应该可以工作 - 更改宽度和高度值以满足您的需求。pageX是横向的并且pageY是垂直的，所以我只是在左上角映射了一个 100x100 的空间。更改它以适应您的需求：

// Bind the click event to the body - any static parent container will do
$('body').on('click', function(e) {

    // Fire the callback if the click was in the top 100px by 100px
    if (e.pageX <= 100 && e.pageY <= 100) {

        // Prevent crazy animations and redundant handling
        $(this).off('click'); 

        // Scale the video to the appropriate size
        $('#videodiv').animate({
            width  : '250px',
            height : '250px'
         }, 1000);
    }
});

这是一个演示：http: //jsfiddle.net/bKm4U/

于 2013-02-20T19:02:58.130 回答
0

我已经通过一个单独的 StackOverflow 问题提供的以下答案解决了这个问题，位于此处：检测 HTML5 视频何时完成

只需两步：

  1. onplay用 jQuery检测
  2. 运行 jQuery 函数

如您所见，HTML5 极其简单。我只希望文档更易于访问/搜索。

于 2013-02-21T01:43:53.177 回答