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

Question

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

这是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

请尝试用 .videoLinks 替换 .contentPad30

这是工作 JS fiddle

$(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 视频播放器只播放第一个视频

js video player in Sitecore only plays the first video

html

javascript

video

jquery

sitecore