0

サイトに属性を持つ html5video要素があります。poster次のことを行うjQuery関数があります。

$('video').click(function(){
    $(this).get(0).play();
});

これは問題なく動作します。ポスターをクリックすると、ビデオの再生が開始されます。ただし、埋め込みビデオのコントロールで再生ボタンをクリックすると、ポスターは表示されますが、ビデオの再生は開始されません。jQuery の click-poster-to-start 関数をコメントアウトすると、コントロールが機能します。

両方を機能させるにはどうすればよいですか？

ありがとう

4

1 に答える 1

0

なぜそれが発生するのかはわかりませんが、おそらくこれはあなたにとって代替オプションです.

video タグの下に div を配置します。

<video id="video" controls="controls">
 <source src="../video/IMG_0699.mp4.mp4" type="video/mp4" />
 <source src="../video/IMG_0699.webmhd.webm" type="video/webm" />
 <source src="../video/IMG_0699.oggtheora.ogv" type="video/ogv" />
Your browser does not support the video tag.
</video>
<div id="poster"></div>

位置を絶対に設定:

#poster
{
    position: absolute;
    width: 320px;
    height: 213px;
    border: 2px solid #000000;
    margin-left: 10px;
}
#video
{
    position: absolute;
width: 320px;
height: 251px;
    margin-left: 10px;
}

そしてjqueryを追加します

$(document).ready(function() {
controlVideo();
function controlVideo(){
    $('#poster').click(function() {
        $('#video').get(0).play();
        $(this).click(function() {
            $('#video').get(0).pause();
            controlVideo();
        });
    });
}   
});

お役に立てば幸いです。それは私にとってはうまくいきます。もちろん、ページに合わせて高さ、幅、位置を設定する必要があります。

于 2013-05-12T12:49:02.610 に答える