Question

我需要弄清楚如何结合目标链接和iframe。我使用iframe托管视频，并使用目标链接供观众更改在iframe中播放的视频，有时我们有很多不同的问题，页面可能会很长，因此我需要弄清楚如何在iframe中滚动到iframe链接被单击。我曾尝试结合锚标签，但我不知道。任何帮助表示赞赏！

<div class="c-sponsored-landing__main-video">
    <div class="embed-responsive embed-responsive-16by9">
        <iframe name="video" src="https://player.vimeo.com/video/274107021?rel=0&amp;autoplay=1&amp;showinfo=0"
            webkitallowfullscreen mozallowfullscreen allowfullscreen class="embed-responsive-item"></iframe>
    </div>
</div>

<div class="c-sponsored-landing__thumbnails">
    <div class="row">
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274107021?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg1.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q1:</strong> Why is monitoring intermediate AMD important?</p>
        </div>
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274107111?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg2.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q2:</strong> What impact does early Wet AMD detection have on visual outcomes?</p>
        </div>
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274107379?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg3.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q3:</strong> If the goal is early Wet AMD detection to help prevent vision loss,
                then how are we doing?</p>
        </div>
        <div class="col-sm-3">
            <a href="https://player.vimeo.com/video/274133949?rel=0&autoplay=1&showinfo=0" target="video"><img src="https://www.visioncareprofessional.com/digital/notalvision/1/seg4.png"
                    class="img-thumbnail img-responsive center-block"></a>
            <p><strong class="green">Q4:</strong> What impact does severe vision loss have on a patient's quality of
                life? </p>
        </div>
    </div>
</div>

实时链接：https://www.visioncareprofessional.com/digital/notalvision/1/index3.html

Answer 1

您可以获取视频的引用，并在链接上收听click事件，一旦触发click事件，请阻止其正常行为并使用 scrollIntoView 来显示视频。

const video = document.getElementById("video")
const links = document.querySelectorAll("a")

links.forEach(link => {
    link.addEventListener("click", (e) => {
    e.preventDefault()
    // LOGIC TO CHANGE THE VIDEO
    video.scrollIntoView({ block: 'end',  behavior: 'smooth' });
  })
})

https://jsfiddle.net/dupftwqa/1/

Answer 2

滚动条正常工作，但是现在iframe不再使用新视频进行更新。

    <div class="c-sponsored-landing__main-video" id="video">
        <div class="embed-responsive embed-responsive-16by9"><iframe allowfullscreen="" class="embed-responsive-item" mozallowfullscreen="" name="video" src="https://player.vimeo.com/video/303509941?rel=0&amp;autoplay=1&amp;showinfo=0" webkitallowfullscreen=""></iframe></div>
    </div>

    <div class="c-sponsored-landing__thumbnails">
        <div class="row">
            <div class="col-md-6">
                <div class="row grey-box1">
                    <div class="col-sm-6">
                        <a href="https://player.vimeo.com/video/303509941?rel=0&amp;autoplay=1&amp;showinfo=0" target="video"><img class="img-responsive center-block" src="https://www.visioncareprofessional.com/digital/aerie/1/1-simmons.png" /></a>
                        <p class="text-center small"><strong>Steve Simmons, MD</strong></p>
                    </div>

                    <div class="col-sm-6">
                        <a href="https://player.vimeo.com/video/303547792?rel=0&amp;autoplay=1&amp;showinfo=0" target="video"><img class="img-responsive center-block" src="https://www.visioncareprofessional.com/digital/aerie/1/1-singh.png" /></a>
                        <p class="text-center small"><strong>Inder Paul Singh, MD</strong></p>
                    </div>

                    <h4>How does Rhopressa<sup>&reg;</sup> address some of the key considerations in the medical management of glaucoma?</h4>
                </div>
            </div>

            <div class="col-md-6">
                <div class="row grey-box3">

                    <div class="col-sm-6">
                        <a href="https://player.vimeo.com/video/303547723?rel=0&amp;autoplay=1&amp;showinfo=0" target="video"><img class="img-responsive center-block" src="https://www.visioncareprofessional.com/digital/aerie/1/1-singh.png" /></a>
                        <p class="text-center small"><strong>Inder Paul Singh, MD</strong></p>
                    </div>

                    <div class="col-sm-6">
                        <a href="https://player.vimeo.com/video/303349557?rel=0&amp;autoplay=1&amp;showinfo=0" target="video"><img class="img-responsive center-block" src="https://www.visioncareprofessional.com/digital/aerie/1/1-radcliffe.png" /></a>
                        <p class="text-center small"><strong>Nathan Radcliffe, MD</strong></p>
                    </div>
                    <h4>Why does the mechanism of action of Rhopressa<sup>&reg;</sup> make it a significant addition to the therapeutic armamentarium for glaucoma?</h4>

                </div>
            </div>
        </div>
    </div>
<script type="text/javascript">
const video = document.getElementById("video")
const links = document.querySelectorAll("a")

links.forEach(link => {
    link.addEventListener("click", (e) => {
    e.preventDefault()
    // LOGIC TO CHANGE THE VIDEO
    video.scrollIntoView({block: 'nearest',  behavior: 'smooth' });
  })
})
</script>

使用目标链接时滚动到iframe

2 个答案: