針對當前腳本的巧妙解決方法？

Question

我目前使用JavaScript來允許用戶在頁面上觀看多個視頻。頁面頂部有一個大玩家，下面是更多視頻的縮略圖。

理論上，它工作正常。但是，有一個主要問題：所有視頻在加載頁面的同時加載。

請參閱this頁面供參考。我已將JavaScript警報分配給每個單獨的視頻以舉例說明問題（視頻1，視頻2等）。

有沒有一個簡單的修復，而不必重寫整個頁面，讓他們點擊而不是當頁面加載時加載？下面的代碼是什麼樣子至今：

的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功能？任何幫助將不勝感激。

Answer 1

您的內嵌JavaScript函數playVideo將在頁面加載時調用。你會想從那裏刪除它，然後做這樣的事情：

<div onclick="playVideo()" class = "mini_player1"> 

Answer 2

首先，在縮略圖代碼，還有一個隨機結束</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'); 
    }); 
});