编辑:问题已解决...好吧,我终于在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>
非常感谢您的帮助
问题已解决...好吧,我终于成功地将“ long”版本用于iframe。它确实不是很干净,但是可以先验地起作用,并且很容易拒绝Vimeo的相同原理。
这里是小提琴,只包含了Plyr CDN和Jquery。
demo
[1]:https://jsfiddle.net/sLy14tu5/