如何从数组获取链接以在youtube Iframe API中播放

How to get link from array to play in youtube Iframe API?

本文关键字:Iframe youtube API 播放 数组 获取 链接      更新时间:2023-09-26

我想从我的数组中获取链接,然后拆分字符串以获取 Youtube 视频 ID :"Dg_0L9jJuoo",以便我可以将其提供给 api。第二个问题是如何使 api 从数组自动播放视频。

这是我的数组:

[{"id":"697f46e3-6426-4177-ac87-6ff1a4d9d6d5","title":"Muusika","link":"https://www.youtube.com/watch?v=Dg_0L9jJuoo"},{"id":"f8107406-f2a6-4ede-9835-fc38766d607e","title":"Muusika","link":"https://www.youtube.com/watch?v=p9j8RGTqju0"}]

提前致谢

这个怎么样?我希望按照你的期望

你可以在jsfiddle中看到它:https://jsfiddle.net/nauvalazhar/vxgwkfdh/2/

*欢呼

<!DOCTYPE html>
<html>
<head>
    <title>Youtube Player</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
        // Your array data
        var youtube = [
            {
                "id":"697f46e3-6426-4177-ac87-6ff1a4d9d6d5",
                "title":"Muusika",
                "link":"https://www.youtube.com/watch?v=Dg_0L9jJuoo"
            },
            {
                "id":"f8107406-f2a6-4ede-9835-fc38766d607e",
                "title":"Muusika",
                "link":"https://www.youtube.com/watch?v=p9j8RGTqju0"
            }
        ];
        // Extract a array
        $.map(youtube, function(value, key) {
            // take the id of youtube link on your array
            var id = value.link.split("?v="),
                id = id[1];
            // and displays embed youtube to element #youtube-video
            $("#youtube-video").append($("<iframe />", {
                src: "https://youtube.com/embed/"+id+"?autoplay=1",
                frameborder: 0,
                width: "100%",
                height: 300
            }))
        });
    });
    </script>
</head>
<body>
    <div id="youtube-video"></div>
</body>
</html>