0

我正在尝试使用 jQuery show() 和 hide() 分别显示和隐藏包含 HTML5 视频播放器播放指示器的 div。我可以使用父 div (#video) 来播放和暂停视频，但是一旦我隐藏了包含播放图标 (#play) 图像的 div，点击功能不再响应，使我无法暂停视频。

有任何想法吗？

我有以下javascript：

$(document).ready(function(){

var currentVideo = $('video').get(0);
var playIndicator = $('#play');

$('#video').click(function() {
    if(currentVideo.paused)
    {
        playIndicator.hide();
        currentVideo.play();
        return false;
    } else {
        currentVideo.pause();
        playIndicator.show();
        return false;
    }
})

});

和 HTML：

<!DOCTYPE html>
<html>

<head>
    <title>Video Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>

<div id="container">

<div id="video">
<div id="play"></div>
<video id="remoteVideo" poster="redacted" src="redacted" />
</div><!-- #video -->

</div><!-- #container -->

</body>

</html>

该文件旨在包含在 iPad 出版物中，因此是奇怪的视口，我已经编辑了海报和视频文件链接，但两者都按预期工作。

4

2 回答 2

0

为什么不把点击事件放在#playas上$('#play').click(function() {？

于 2012-09-22T00:44:30.267 回答
-3

我投票改为尝试 jquery .on

$('#video').on('click', function(){

//logic goes here

});
于 2012-09-21T22:51:40.320 回答