5

昨日、ユーザーがYouTube動画をリクエストしたときにのみ埋め込むことで、ウェブサイトがYouTube動画を読み込む方法を改善することにしました。1ページに30本もの動画が含まれている場合があり、これには読み込みに長い時間がかかります。

何かの「遅延読み込み」方法を試したのはこれが初めてであり、質問する価値があると思いました。

これを改善するために何ができますか？

どうすればもう少し優雅にすることができますか？

これは、遅延ロードのポイントを完全に見逃していますか？

JSFiddle。

ここでは関係ないので、スタイリングは無視してください。

これが機能する方法は、最初にビデオのIDを含むページにアンカーを配置することです。

<a href="#" data-video="FzRH3iTQPrk" class="youtube-video">

次に、背後にあるjQueryがすべてをループa.youtube-videoし、ビデオのサムネイルを背景として透明なスパンを作成します。

$('a.youtube-video').each(function() {
    var videoId = $(this).attr('data-video');
    var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";

    var videoBackground = $('<span class="youtube-thumbnail"></span>');

    videoBackground.css({
        background:"#fff url('"+videoThumbnail+"') no-repeat"
    })
    ...

次に、アンカータグのスタイルを変更します（これは、JavaScriptが無効になっているブラウザーに影響を与えないようにするためにここで行われます）。

    $(this).css({
        height:315,
        width:460,
        position:"relative",
        display:"block",
        textAlign:"center",
        color:"#fff",
        fontSize:26
    });

次に、アンカーにスパンを追加してループを終了します。

    $(this).text('Click to load video');
    $(this).append(videoBackground);
});

埋め込まれたYouTubeビデオオブジェクトの読み込みは、アンカークリックで行われます。

$('a.youtube-video').click(function(e) {
    e.preventDefault();
    var videoId = $(this).attr('data-video');
    var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
    var videoEmbed = $('<object> ... </object>');      
        ...

これは、埋め込みコードをアンカーの親に追加し、アンカーを削除することで終了します。

    $(this).parent().append(videoEmbed);
    $(this).hide();
});
4

2 に答える 2

4

何をロードするのかがわかるように、hrefを設定する必要があります。これは、ページが生成されるときに要素で実行することも、JSで実行することもできます。Javascriptが無効になっているユーザーに対してページを機能させるには、要素上にある必要があります。

var url = "http://www.youtube.com/watch?v=" + videoId;
$(this).attr('href', url);

また、タイトルを設定して、クリックするとどうなるかを伝える必要があります。 

$(this).attr('title', "Click to play video");

または、 SMHのようなオーバーレイを作成して、画像をクリックするとビデオが再生されることをより明確にします。または両方。

また、ユーザーがCtrlキーまたはコマンドキーを押したときに、新しいウィンドウで物事を開くのを中断しないでください。フィドルを更新しましたが、基本的にクリックイベントで必要なものは次のとおりです。

 var isCtrlPressed = e.ctrlKey || e.metaKey;
 if (isCtrlPressed == true){
    return;
 }

スタイルを無視するとおっしゃっていたと思いますが、プレースホルダーの背景色がページの背景と明らかに異なる場合は、このスタイルをお勧めします。ページの読み込みが遅い場合は、ページの空白部分ではなく、何かがそこに読み込まれることがわかります。

これは、遅延ロードのポイントを完全に見逃していますか？

完全ではありませんが、この場合は少し無意味です。遅延ロードは通常、ロードされるものが非常に複雑な場合（たとえば、巨大なテーブル）に使用されるため、ページサイズが大幅に増加し、ユーザーがリンクをたどった後のページの初期レンダリングに時間がかかります。 。

YouTube動画の読み込みは遅いかもしれませんが、その間にページの残りの部分の読み込みとレンダリングを実際にブロックするべきではないため、動画の読み込みを延期すると、かなりの作業にわずかなメリットしかありません。

誰かがページを表示できる速度を測定し、一番下までスクロールしてからクリックして最後のビデオを再生する必要があると思います。他のビデオフラッシュプレーヤーがロードされていないため、遅延ロードで高速になった場合でも、それだけの価値がある可能性があります。

于 2013-02-25T15:48:13.717 に答える
1

以下のコードの jsfiddle がここにあります。(プレーヤーが正しく表示されません。jsfiddle は「embed メソッド」ではうまく機能しないと思います。iframe メソッドを使用して jsfiddle で機能することは知っていますが、iframe を避けたいとおっしゃいました)。

すでに述べたように、大きな改善点の 1 つは、swfobjectを使用してプレーヤーの埋め込みを生成することです。このメソッドを使用する場合、プレーヤー要素のプレースホルダーを作成する必要があります。リンクをクリックすると、プレースホルダーが削除され、埋め込みに置き換えられます。リンクとプレーヤーの親 div を作成することを強くお勧めします。埋め込みの生成時に要素のサイズ変更を防ぐために、コンテナー要素の幅/高さも明示的に設定する必要があります。

これは遅延読み込みの良い使い方だと思います。フラッシュ プレーヤーはロード時にブロックしませんが、それでも多くのリソースを使用するため、最初にサムネイル セットとして表示されるページを歓迎します。

マークアップ

<script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js">
</script>

<div class="container">
    <div id="placeholder_FzRH3iTQPrk"></div>
    <a href="#" data-video="FzRH3iTQPrk" class="youtube-video"></a>
</div>
<div class="container">
    <div id="placeholder_go43XeW6Wg4"></div>
    <a href="#" data-video="go43XeW6Wg4" class="youtube-video"></a>
</div>

JavaScript

$(document).ready(function() {
    $('a.youtube-video').each(function() {
        var videoId = $(this).attr('data-video');
        var videoThumbnail = "http://img.youtube.com/vi/" + videoId + "/0.jpg";
        var videoBackground = $('<span class="youtube-thumbnail"></span>');
        videoBackground.css({
            background:"#fff url('"+videoThumbnail+"') no-repeat"
        });

        // also set the parent container size to prevent flicker
        $(this).add($(this).parent()).css({
            height:315,
            width:460,
            position:"relative",
            display:"block",
            textAlign:"center",
            color:"#fff",
            fontSize:26
        });
        $(this).text('Click to load video');
        $(this).append(videoBackground);
    });

    $('a.youtube-video').click(function(e) {
        e.preventDefault();
        var videoId = $(this).attr('data-video');
        var params = { allowScriptAccess: "always", allowFullScreen: "true" };
        var atts = { id: 'player_'+videoId };
        $(this).hide();
        swfobject.embedSWF(
            "http://www.youtube.com/v/"+videoId+"?enablejsapi=1&playerapiid=ytplayer&version=3", 
            'placeholder_'+videoId, "460", "315", "8", null, null, params, atts);

    });
});
于 2013-02-26T02:11:52.307 に答える