Question

我目前正在使用JavaScript来允许用户在一个页面上观看多个视频。页面顶部有一个大玩家，下面是更多视频的缩略图。

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

请参阅this页面以供参考。我已经为每个单独的视频分配了JavaScript警报，以举例说明问题（video1，video2等）。

是否可以轻松修复，无需重写整个页面，以便在点击时加载，而不是在页面加载时加载？以下是目前代码的样子：

调用视频的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="">  <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">

我目前的脚本聪明地解决了吗？

2 个答案: