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 に答える