1

わかりましたので、ここで見つけることができるHTML5ビデオタグを介したビデオの埋め込みに関する優れたチュートリアルに従いました。基本的には、ホバーするとビデオが再生され、ホバーアウトすると再生が停止するという考え方です。

ええと、一種のインタラクティブなマルチタイル ボードを作成できることを期待して、1 つのページに複数のビデオを含めようとしてきました (すべて同じビデオです)。つまり、各ビデオにカーソルを合わせると、各ビデオのどこに到達するかに基づいてさまざまな画像が作成されます。

とにかく、私が尋ねている質問は次のとおりです。私が従ったこのチュートリアルに基づいて、複数のタイル化されたビデオを作成する最良の方法は何ですか? 作業中のコードを貼り付けます。私が抱えている問題は、複数の JavaScript 関数を作成すると、すべてのビデオではなく、最後に作成した関数のビデオのみが表示されることです。

これが理にかなっていることを願っています。ここに私がこれまでに取り組んできたことへのリンクがあります。注: ビデオの読み込みには時間がかかるため、それまでは音声は再生されますが、画像は再生されません。

助けてくれてありがとう！

4

3 に答える 3

2

私が見つけた解決策は次のとおりです。唯一の警告は、ビデオを preload="none" に設定することです。すべてのビデオがロードされると、帯域幅にとって悪夢になるからです。私は自分のものを切り替える必要がありましたが、今はビデオが読み込まれていることを人々に知らせるための解決策を探しています.

var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
    item.addEventListener('mouseover', hoverVideo, false);
    item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e)
{   
    this.play();
}
function hideVideo(e)
{
    this.pause();
}

これが私が答えを得た場所です：http://www.dreamincode.net/forums/topic/281583-video-plays-on-mouse-over-but-not-with-multiple-videos/

于 2012-09-26T12:26:37.053 に答える
0

jQueryを使用してこれを達成しようとしている人のために、動的にロードされるコンテンツに使用するソリューションを次に示します。

        //play video on hover
        $(document).on('mouseover', 'video', function() { 
            $(this).get(0).play(); 
        }); 

        //pause video on mouse leave
        $(document).on('mouseleave', 'video', function() { 
            $(this).get(0).pause(); 
        });

これは、1 ～ N 個のビデオを含むページに使用できます。ホバーされたビデオのみが毎回再生され、それぞれがマウスリーブの現在のフレームで一時停止します。

実際の例を次に示します: http://jsfiddle.net/cc7w0pda/

于 2014-11-16T19:56:46.347 に答える
-1

わかりやすいのでやってみてください

<!DOCTYPE html>
<html>
<video id="vv" width="500" height="500" controls onmouseout="this.pause()" onmouseover="this.play()">
<source src="xx.mp4">
Your browser does not support this file
</video>
</html>

于 2015-03-06T18:30:58.547 に答える