2

現在、JavaScript を使用して、ユーザーがページで複数のビデオを視聴できるようにしています。ページの上部に 1 つの大きなプレーヤーがあり、その下には他の動画の小さなサムネイルがあります。

理論的には、問題なく動作します。ただし、大きな問題が 1 つあります。ページの読み込みと同時にすべての動画が読み込まれます。

参考までにこちらのページをご覧ください。問題を例示するために、個々の動画 (video1、video2 など) に JavaScript アラートを割り当てました。

ページ全体を書き直すことなく、ページが読み込まれたときではなく、クリックされたときにビデオが読み込まれるようにする簡単な修正方法はありますか? これまでのコードは次のようになります。

ビデオを呼び出す Javascript:

function playVideo(cap, file, streamer, alertmsg) {
    var so = new SWFObject('player/player-licensed_5_2.swf', 'ply1', '586', '330', '9');
    so.addParam('displaywidth', '586');
    so.addParam('displayheight', '330');
    so.addParam('allowfullscreen', 'true');
    so.addParam('allowscriptaccess', 'always');
    so.addVariable('skin', 'player/skins/glow.zip');
    so.addVariable('controlbar', 'over');
    so.addVariable('plugins', 'captions-1');
    so.addVariable('captions.file', cap);
    so.addVariable('dock', 'true');
    so.addVariable('image', 'landing_img/video.jpg');
    so.addVariable('file', file);
    so.addVariable('streamer', streamer);
    so.addVariable('autostart', 'false');
    so.write('player1');
    window.alert(alertmsg);
}

ビデオのサムネイル:

<div class="mini_player1"> <a href="#" class="vidpic" title="">
    <!-- thumbnail-->
    <img src="images/1_panda.jpg" alt="Video 1" class="vidpic"  />
    <span class="play-button"><img src="images/yt.png"  alt="Play"></span>
    </a>
</div>
<div class="content_mini_player1 cmp">
    <script>
        playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
    </script>
</div>

bigplayerコンテンツを新しく選択したビデオに「置き換える」スクリプト:

jQuery(function ($) {
    $(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20").click(function () {
        var player_content_id = "content_" + $(this).attr("class");
        var player_content = $("." + player_content_id).html();
        $(".big_player").html('');
        $(".big_player").html(player_content);
    });
});

助言がありますか？たぶん統合playVideoとjQuery関数？どんな助けでも大歓迎です。

4

2 に答える 2

1

まず、サムネイル コードには、ランダムな終了</a>タグがあります。投稿していないコードがない限り、削除することをお勧めします。

次に、jQuery をさらに単純化できます。現在、次のセレクターを使用しています。

$(".mini_player1, .mini_player2, .mini_player3, .mini_player4, .mini_player5, .mini_player6, .mini_player7, .mini_player8, .mini_player9, .mini_player10, .mini_player11, .mini_player12, .mini_player13, .mini_player14, .mini_player15, .mini_player16, .mini_player17, .mini_player18, .mini_player19, .mini_player20")

わお！それは……わあ。

プレイヤー全員が全面的に関連できる単一のクラスをプレイヤーに割り当て、そのクラスで選択してから、each()メソッドを実行します。

$(".mini-player").each(function() {
    var player_content_id = "content_" + $(this).attr("class");
    var player_content = $("." + player_content_id).html();
    $(".big_player").html('');
    $(".big_player").html(player_content);
});

最後に、スクリプト タグで関数を呼び出すと、次のようになります。

<script>
    playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
</script>

これにより、playVideo()関数が実行されます。統合playVideo()とjQueryコードが最善の策です（上記と同じ構成を使用）：

$(".mini-player").each(function() {
    var player_content_id = "content_" + $(this).attr("class");
    var player_content = $("." + player_content_id).html();
    $(".big_player").html('');
    $(".big_player").html(player_content);
    //Add event handler
    $(this).on('click',function() {
        playVideo('<caption file>', '<videofile>', '<streamer>', 'video1');
    });
});
于 2013-04-24T06:33:31.750 に答える
0

ページが読み込まれると、インライン JavaScript 関数 playVideo が呼び出されます。そこから削除して、次のようにします。

<div onclick="playVideo()" class = "mini_player1">
于 2013-04-24T01:55:02.020 に答える