iframe视频列表

Question

我正在尝试从不同来源创建视频列表。来自不同来源的视频列表也包括youtube。以下代码将创建视频列表。我的问题是当前视频结束后列表没有更改源。 我需要实现自动下一个功能。

<iframe  id="videoarea" controls="controls" allow="autoplay" autoplay="true" 

    poster="" src="" onended="nexxt()"></iframe>
    <ul id="playlist">
        <li movieurl="https://www.youtube.com/embed/v0kOcitjuRw" moviesposter="">Happy Fit</li>
        <li movieurl="https://www.youtube.com/embed/nWHpU7H7Clc">see</li>
        <li movieurl="https://anyothersite.com/embed/urlvedio">other</li>
    </ul> 
 <script>
    $(function () {
        $("#playlist li").on("click", function () {
            $("#videoarea").attr({
                "src": $(this).attr("movieurl"),
                "poster": "",
                "autoplay": "autoplay"
            })
        })
        $("#videoarea").attr({
            "src": $("#playlist li").eq(0).attr("movieurl"),
            "poster": $("#playlist li").eq(0).attr("moviesposter")
        })
    })
    function nexxt()
    {

            $("#videoarea").attr({
                "src": $(this).attr("movieurl"),
                "poster": "",
                "autoplay": "autoplay"
            })
            $("#videoarea").attr({
                "src": $("#playlist li").eq(0).attr("movieurl"),
                "poster": $("#playlist li").eq(0).attr("moviesposter")
            })
    }



</script>