2

我目前正在使用 JavaScript 来允许用户在一个页面上观看多个视频。页面顶部有一个大播放器，其下方是更多视频的较小缩略图。

从理论上讲，它工作正常。但是，有一个主要问题：所有视频在页面加载的同时加载。

请参阅此页面以供参考。我已将 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 功能？任何帮助将不胜感激。

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 回答