Question

我设计了一个包含我的YouTube视频的页面。当您单击标题时，嵌入的视频会在右侧分区上更改。但问题是网址，我希望用户分享他们想要的视频。如果他们按下后退按钮，他们可以返回上一个视频。我知道我们可以通过html 5历史api拥有所有这些，但我是新手，经过我所有的努力，我无法解决这些问题。请帮忙。

以下是代码：

Youtube视频页面

<style type="text/css">

    body{
        margin: 0px;
    }

    #leftdiv{
        background-color: #A9F5D0;
        float: left;
        height:100%;
        width: 30%;

    }

    #rightdiv{
        background-color: #F8E0F1;
        float: left;
        height: 100%;
        width: 70%;
    }

    #lectname{
        padding:10px;
        font-family: "comic sans ms";
    }


</style>

<div id="container">

    <div id="leftdiv">

        <div id="lectname">
            <p id="lectname1">Lec 01: What is Signal?</p>
            <p id="lectname2">Lec 02: What is an Analog Signal?</p>
            <p id="lectname3">Lec 03: What is Digital Signal?</p>
            <p id="lectname4">Lec 04: Need of Digital Signal</p>
            <p id="lectname5">Lec 05: Introduction to Digital Electronics</p>
            <p id="lectname6">Lec 06: Switch and Bits Intuition</p>
        </div>          

    </div>

    <div id="rightdiv">
        <iframe width="480" height="270" src="https://www.youtube.com/embed/M0mx8S05v60" frameborder="0" allowfullscreen></iframe>
    </div>  

</div>

<script type="text/javascript">

    var lectureVideos = {
    lectname1: "https://www.youtube.com/embed/M0mx8S05v60",
    lectname2: "https://www.youtube.com/embed/F5h3z8p9dPg",
    lectname3: "https://www.youtube.com/embed/jRL9ag3riJY",
    lectname4: "https://www.youtube.com/embed/izBaDRyqnBk",
    lectname5: "https://www.youtube.com/embed/2xXErGeeb_Q",
    lectname6: "https://www.youtube.com/embed/RF9I6UzI4Rc"
}

var videoLinks = document.getElementsByClassName("videoLink");
for(var i=0; i<videoLinks.length; i++){
    videoLinks[i].onclick=function(){
        document.getElementById("videoFrame").src=lectureVideos[this.id];
    }
}
</script>

Answer 1

你应该使用history API，这是对的。阅读docs here会有所帮助。

基本想法是，当您点击其中一个链接时，您应该只拨打history.popState。

然后设置window.onpopstate功能来处理视频更改。这样，无论用户点击链接，后退还是前进按钮，都会调用视频更改功能。

Here is demo code（尽管网址更改在jsfiddle中无效，因为它在iframe中）

这是一个working example。

// when a video link is clicked, change the URL
var onVideoLinkClick = function(e){

    // did we click on a link with class "video"?
    if( e.target.tagName == 'A' && e.target.classList.contains('video')){

    var videoID = e.target.getAttribute('href');

    // change the url
    history.pushState(
        {videoID: videoID}, // data
      e.target.innerText,   // title
      'video-'+videoID      // url path
    )

    changeVideo(videoID)

    e.preventDefault();
  }

}

// change the playing video to a new video ID
var changeVideo = function(videoID){
    var src = 'https://www.youtube.com/embed/'+videoID;
    document.getElementById("videoFrame").src = src;
}

// triggered when clicking on a video using the back/forward browser button 
var onUrlChange = function(e){
  changeVideo(e.state.videoID)
}

// bind the event listners
window.addEventListener('click', onVideoLinkClick);
window.onpopstate = onUrlChange;

使用以下HTML

<div id="container">

    <div id="leftdiv">

        <div id="lectname">
            <p><a class="video" href="M0mx8S05v60">Lec 01: What is Signal?</a></p>
            <p><a class="video" href="F5h3z8p9dPg">Lec 02: What is an Analog Signal?</a></p>
            <p><a class="video" href="jRL9ag3riJY">Lec 03: What is Digital Signal?</a></p>
            <p><a class="video" href="izBaDRyqnBk">Lec 04: Need of Digital Signal</a></p>
            <p><a class="video" href="2xXErGeeb_Q">Lec 05: Introduction to Digital Electronics</a></p>
            <p><a class="video" href="RF9I6UzI4Rc">Lec 06: Switch and Bits Intuition</a></p>
        </div>          

    </div>

    <div id="rightdiv">
        <iframe id="videoFrame" width="480" height="270" frameborder="0" allowfullscreen></iframe>
    </div>  

</div>

如何在不刷新页面的情况下更改点击URL？

1 个答案:

Here is demo code（尽管网址更改在jsfiddle中无效，因为它在iframe中）

这是一个working example。