我当前脚本的巧妙解决方法？

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

首先，在缩略图代码中，有一个随机关闭的</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');
    });
});

Answer 2

您的内联 JavaScript 函数 playVideo 将在页面加载时被调用。您需要从那里删除它并执行以下操作：

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