Question

我想知道如何减少我为视频播放器制作的代码。每次添加新视频时，我都需要为每个视频复制该功能，并将其复制到相关视频中。有没有人知道如何减少它，以便当我向列表中添加一个新视频时，它将适合显示它的正确功能，而无需复制，粘贴和只更改链接。

小提琴在这里 - http://jsfiddle.net/olichalmers/44tQM/

  $(document).ready(function(){

        var videoContainer = $('.video-hold');
        var videoOneBtn = $('.one');
        var videoTwoBtn = $('.two');
        var videoThreeBtn = $('.three');
        var videoFourBtn = $('.four');

        var videoOne = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/brFKqr0BZcE?wmode=transparent&controls=0&showinfo=0" frameborder="0" allowfullscreen="true"></iframe>';
        var videoTwo = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/wxrYmYyRMZk?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>';
        var videoThree = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/MaCSd0eD5Rw?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>';
        var videoFour = '<iframe width="100%" height="100%" src="//www.youtube.com/embed/MaCSd0eD5Rw?wmode=transparent" frameborder="0" allowfullscreen="true"></iframe>';


        videoContainer.append(videoOne);


        videoOneBtn.click(function (e) {

            videoContainer.empty().append(videoOne);

                $('.video-hold iframe').each(function () {

                    var url = $(this).attr("src");

                    $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                    return false;

                });

                e.preventDefault();
        });




        videoTwoBtn.click(function (e) {

            videoContainer.empty().append(videoTwo);

            $('.video-hold iframe').each(function () {

                var url = $(this).attr("src");

                $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                return false;

            });

            e.preventDefault();

        });




        videoThreeBtn.click(function (e) {

            videoContainer.empty().append(videoThree);

            $('.video-hold iframe').each(function () {

                var url = $(this).attr("src");

                $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                return false;

            });

            e.preventDefault();

        });




        videoFourBtn.click(function (e) {

            videoContainer.empty().append(videoFour);

            $('.video-hold iframe').each(function () {

                var url = $(this).attr("src");

                $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                return false;

            });

            e.preventDefault();

        });



});

最佳，奥利弗

Answer 1

这是一个可以让你入门的选项：

将src值添加到每个锚标记并使用共享类名：

<li><a href="#" class="videoBtn" src="//www.youtube.com/embed/brFKqr0BZcE?
wmode=transparent&controls=0&showinfo=0">Paper Heart</a></li>

然后你可以简单地绑定到$('videoBtn').click()。

在该功能中，使用$(this).attr("src")以便您可以构建所需的网址：

var video = '<iframe width="100%" height="100%" src="' 
            + $(this).attr("src") 
            + '" frameborder="0" allowfullscreen="true"></iframe>';

将它放在任何你想要的地方。

通过这种方法，只需一个函数就可以完成相同的操作来处理所有链接。

Answer 2

您可以执行以下操作：在HTML中，更改ID中的类，然后添加一个类，如下所示：

        <li><a href="#" class="vidbtn" id="one">Paper Heart</a></li>
        <li><a href="#" class="vidbtn"  id="two">Rumour</a></li>
        <li><a href="#" class="vidbtn"  id="three">Millionaire Transmitter</a></li>
        <li><a href="#" class="vidbtn"  id="four">Another video</a></li>

如果你有这个，你可以像这样执行一次这个函数：

$( ".vidbtn" ).click(function(e ) {
        videoContainer.empty().append(eval(this.id));

            $('.video-hold iframe').each(function () {

                var url = $(this).attr("src");

                $(this).attr("src", url + "&autoplay=1&controls=0&showinfo=0");

                return false;

            });

            e.preventDefault();

        });

希望这会对你有所帮助。

编辑：

这是一个有效的JSFiddle，基于您的代码并进行了一些更改： JSFiddle

减少视频播放列表代码

2 个答案: