我目前的脚本聪明地解决了吗？ [英] Clever work-around for my current script?

问题描述

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

I'm currently utilizing JavaScript to allow users to watch multiple videos on a page. There is one big player at the top of the page, and below it are smaller thumbnails of more videos.

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

In theory, it works fine. However, there is one major problem: ALL videos load at the same time as the page loads.

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

See this page for reference. I have assigned JavaScript alerts to each individual videos to exemplify the problem (video1, video2, etc.).

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

Is there a easy fix, without having to rewrite the entire page, to have the videos load when they are clicked on, not when the page loads? Here's what the code looks like so far:

调用视频的Javascript：

Javascript that calls the video:

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 使用新选择的视频：

The script that 'replaces' the content in bigplayer with the new selected video:

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函数？任何帮助将不胜感激。

Any suggestions? Maybe consolidate playVideo and the jQuery function? Any help would be greatly appreciated.

推荐答案

首先，在缩略图代码中，随机关闭 < / a> 标记。除非有你没有发布的代码，否则我建议删除它。

Firstly, in the thumbnail code, there is a random closing </a> tag. Unless there is code you didn't post, I'd suggest removing it.

其次，您的jQuery可以进一步简化。目前，您使用以下选择器：

Secondly, your jQuery can be simplified much further. Currently, you are using the following selector:

$(".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")

哇！那就是......哇。

Wow! That is...wow.

为玩家分配一个他们可以全面联系的单一类，按该类选择然后运行 each（）方法即：

Assign the players a single class they can all relate to across the board, select by that class and then run the each() method i.e.:

$(".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);
});

最后，当你在脚本标签中调用函数时，就像你正在做的那样：

Lastly, when you call a function in a script tag like you are doing:

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

这将运行 playVideo（）函数。合并 playVideo（）并且jQuery代码将是您最好的选择，即（使用上面相同的构造）：

This WILL run the playVideo() function. Consolidating playVideo() and the jQuery code would be your best bet i.e. (using the same construct above):

$(".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');
    });
});

这篇关于我目前的脚本聪明地解决了吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！