Question

我正在为我的女朋友在网站上工作，而且我在多年没有做任何事情之后试图让我的编程方式恢复。

我有div选择一张图片，然后打开一个模态，它会在底部播放相应的视频和缩略图，以选择另一个视频播放。我需要确保在选择视频时暂停所有其他视频。共有4个视频。所以，我想这更像是一个程序问题。我该怎么做呢？我使用html5和javascript进行编码。我想到了一个开关功能，但这对我来说似乎并不合适。我可以使用一大堆if-else-if语句，但必须有更好的方法。所以，基本上：选择视频2：设置1,3和＆amp; 4暂停。选择video1：设置2,3和＆amp; 4暂停。

我应该使用什么样的构造来有效地编码？

Answer 1

我没有使用过视频，所以我不知道可用的功能，但这里有一些JavaScript假设视频对象有播放和暂停方法的示例。

示例JavaScript：

/**
 * Stores all references to the available video objects.
 */
var videos = {
    "1": {...},
    "2": {...},
    "3": {...},
    "4": {...}  
};
/**
 * Called when user clicks on video thumbnail. This will pause all videos expect for the video that needs to be played.
 *
 * @param {String} videoKey    The key that represents the video to play (i.e. "1", "2", "3", "4")
 */
var playVideo = function(videoKey) {
    /**
     * Pause all videos.
     */
    for (var key in videos) {
        videoToPause = videos[key];
        videoToPause.pause();
    }
    /**
     * Play the requested video.
     */
    var videoToPlay = videos[videoKey]; 
    videoToPlay.play();
};

示例HTML：

...
<div class="thumbnail" onclick="playVideo('1')">Video 1</button>
<div class="thumbnail" onclick="playVideo('2')">Video 2</button>
...

选择一个视频，并确保其他视频已暂停

1 个答案: