Plyr.io:用JS版本2020加载youtube播放器...?

问题描述 投票:0回答:1

编辑:问题已解决...好吧,我终于在iframe中成功使用了“长”版本。它确实不是很干净,但是可以先验地起作用,并且很容易拒绝Vimeo的相同原理。

这里是小提琴,只包含了Plyr CDN和Jquery。

https://jsfiddle.net/sLy14tu5/


我想用Javascript动态添加Plyr播放器(youtube和vimeo)。

我选择了缩短的格式:

<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="Sno53X2M4ak"></div>

而且我创建了一个非常简单的功能来动态添加阅读器

整个代码:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Plyr</title>
        <meta name="author" content="Sam Potts" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    </head>
    <body>
        <script>
            function addYoutubePlayer(url){
                var ct = '<div id="player" data-plyr-provider="youtube" data-plyr-embed-id="'+url+'"></div>';
                $("body").append(ct);
                const player = new Plyr('#player');
            }

            $(document).ready(function(){
                addYoutubePlayer("https://www.youtube.com/watch?v=Sno53X2M4ak");
            });
        </script>
        <script src="https://cdn.plyr.io/3.5.6/plyr.polyfilled.js"></script>
    </body>
</html>

我没有收到任何控制台错误,但似乎并没有照顾到播放器。然后,我希望能够完全在JS中对其进行控制,从而使代码具有动态性。我在文档上看到这是可能的,但是我找不到运行中的读者的简单而具体的示例。所有示例均始于2016年(codepen,jsfiddle等),并且不再有效。

我实际上尝试不使用JavaScript进行简化,仅使用基本的声明性代码:

甚至那样我也无法唤起读者。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Plyr</title>
        <meta name="author" content="Sam Potts" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />

        <link rel="stylesheet" href="https://cdn.plyr.io/3.5.6/plyr.css" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.plyr.io/3.5.6/plyr.polyfilled.js"></script>
    </head>
    <body><div id="player" data-type="youtube" width="500" height="500" data-video-id="bTqVqk7FSmY"></div>

        <script>
            const player = new Plyr('#player');
        </script>
    </body>
</html>

非常感谢您的帮助

javascript plyr youtubeplayer
1个回答
0
投票

问题已解决...好吧,我终于成功地将“ long”版本用于iframe。它确实不是很干净,但是可以先验地起作用,并且很容易拒绝Vimeo的相同原理。

这里是小提琴,只包含了Plyr CDN和Jquery。

demo [1]:https://jsfiddle.net/sLy14tu5/

© www.soinside.com 2019 - 2024. All rights reserved.