Question

我无法让我的视频播放器播放超过第一个视频。我有一些html和一个if / else if / else块，它接受每个链接的id，并在每次点击事件时用新的iframe替换旧的iframe。当我点击每个链接时，浏览器会跳转到页面顶部。

这是html：

<div class="videoPlayer">
        <div class="video">
            <iframe width="498" height="280" src="//www.youtube.com/embed/ANewBhf60pM?modestbranding=1" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="videoLinkWrapper">
            <span>Videos:</span>
            <a id="video1" class="videoLinks buttonPrimarySmall active" title="Video #1" href="#">1</a>
            <a id="video2" class="videoLinks buttonPrimarySmall" title="Video #2" href="#">2</a>
            <a id="video3" class="videoLinks buttonPrimarySmall" title="Video #3" href="#">3</a>
            <a id="video4" class="videoLinks buttonPrimarySmall" title="Video #4" href="#">4</a>
        </div>
    </div>

这是javascript：

$(document).ready(function(){
        $('.videoLinks').click(function(e){
            $('.videoLinkWrapper a').removeClass('active');

            if(e.target.id=='video2'){
                 $('.contentPad30 .video iframe').replaceWith('<iframe width="498" height="280" src="//www.youtube.com/embed/gh_hOwRftbo?modestbranding=1" frameborder="0" allowfullscreen></iframe>');
                $('a#video2').addClass('active');
            }
            else if(e.target.id=='video3'){

                 $('.contentPad30 .video iframe').replaceWith('<iframe width="498" height="280" src="//www.youtube.com/embed/EcJ0yvCSvqA?modestbranding=1" frameborder="0" allowfullscreen></iframe>');
                $('a#video3').addClass('active');
            }
            else if(e.target.id=='video4'){

                 $('.contentPad30 .video iframe').replaceWith('<iframe width="498" height="280" src="//www.youtube.com/embed/S9AZSxFsch4?modestbranding=1" frameborder="0" allowfullscreen></iframe>');
                 $('a#video4').addClass('active');
            }
            else {
                 $('.contentPad30 .video iframe').replaceWith('<iframe width="498" height="280" src="//www.youtube.com/embed/ANewBhf60pM?modestbranding=1" frameborder="0" allowfullscreen></iframe>');
                $('a#video1').addClass('active');
            }
        }); 
    });

为什么这不起作用？

Answer 1

请尝试将.contentPad30替换为.videoLinks

这是工作中的JS小提琴

$(document).ready(function(){
        $('.videoLinks').click(function(e){
            $('.videoLinkWrapper a').removeClass('active');

            if(e.target.id=='video2'){
              $('.videoPlayer .video iframe').attr('src','//www.youtube.com/embed/gh_hOwRftbo?modestbranding=1');
                 
                $('a#video2').addClass('active');
            }
            else if(e.target.id=='video3'){

                 $('.videoPlayer .video iframe').attr('src','//www.youtube.com/embed/EcJ0yvCSvqA?modestbranding=1');
                $('a#video3').addClass('active');
            }
            else if(e.target.id=='video4'){

                 $('.videoPlayer .video iframe').attr('src','//www.youtube.com/embed/S9AZSxFsch4?modestbranding=1');
                
                 $('a#video4').addClass('active');
            }
            else {
                 $('.videoPlayer .video iframe').attr('src','//www.youtube.com/embed/ANewBhf60pM?modestbranding=1');
                $('a#video1').addClass('active');
            }
        }); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="videoPlayer">
        <div class="video">
            <iframe width="498" height="280" src="//www.youtube.com/embed/ANewBhf60pM?modestbranding=1" frameborder="0" allowfullscreen></iframe>
        </div>
        <div class="videoLinkWrapper">
            <span>Videos:</span>
            <a id="video1" class="videoLinks buttonPrimarySmall active" title="Video #1" href="#">1</a>
            <a id="video2" class="videoLinks buttonPrimarySmall" title="Video #2" href="#">2</a>
            <a id="video3" class="videoLinks buttonPrimarySmall" title="Video #3" href="#">3</a>
            <a id="video4" class="videoLinks buttonPrimarySmall" title="Video #4" href="#">4</a>
        </div>
    </div>

我已经改变了代码来改变src。试试吧

Sitecore中的js视频播放器只播放第一个视频

1 个答案: