1

video タグを使用してページに多数のビデオをロードしています。問題は、すべてのビデオをロードするのに時間がかかることです。また、特定のビデオをロードしようとすると、非常に多くのビデオがあるため、他のビデオがロードされるまで待機する場合があります。

私の解決策は、これらすべてのビデオのサムネイルをページにロードし、サムネイルをクリックすると、ビデオに切り替えてビデオをロードすることです。

どうすればいいのかわかりません。私はjQueryを使用するつもりで、ユーザーが画像をクリックするとビデオが表示されますが、ビデオが非表示に設定されている場合でもロードしようとするかどうかはわかりませんか?

ユーザーがjQueryで画像をクリックした後、ビデオタグでビデオを表示する最良の方法は何ですか?

4

3 に答える 3

2

これが、interfectの答えのおかげで私が思いついたものです。

$(document).ready(function() {
    $(".thumb").click(function() {
        var value;
        value = $(this).data("video");
        $(this).replaceWith('<video src="'+value+'" controls autoplay></video>');
    });
});
于 2013-06-27T02:25:51.200 に答える
2

一般に、ブラウザーは、CSS によって非表示になっている要素内にリソースをロードするため、非表示をすばやく解除できます。コマンドでのみロードする場合は、要素を動的に構築し、必要な場合にのみページに追加する必要があります。何かのようなもの：

var video = $("<video/>"); 
video.append($("<source/>").attr("src", "video.mp4").attr("type", "video/mp4");
$("#placeholder").html(video);

これを複数の動画に拡張する最も簡単な方法は、jQuery .data() メソッドを使用して各画像に動画 URL をデータとして配置し、画像のデータから適切な動画 URL を 1 つのユニバーサル クリック ハンドラーに読み込むことです。

于 2013-06-27T00:02:17.730 に答える
0

HTML5 では、jQuery を使用せずに poster 属性を使用したサムネイル プレビューが既にサポートされています。ビデオを非表示にする必要はありません。例えば

<video height="200" width="480" poster="http://somesite.com/thumbs/pathtoimage.jpg" preload="none" controls>
    <source src="http://somesite.com/pathto.mp4" type="video/mp4">
    <p class="warning">Your browser does not support HTML5 video.</p>
</video>

たくさんのビデオがある場合は、必要に応じて、またはユーザーがスクロールするなどして ajax でロードすることをお勧めします。

于 2013-06-27T00:24:01.450 に答える