如何解决如何在 PlyrJS
我遇到了plyr.io库的问题,不知道是我自己还是同一个库的问题,
我想要什么? 我想添加两个视频,但是当我添加两个视频时,一个是格式化的,另一个不是,请问有解决办法吗?
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.4/plyr.css" integrity="sha512-bMLolM8mWTXYQSC2gQOLyDdkmodSAbbRFbDoISUCRS7mFJrP3fBHJo3YR8+2Yy9n7+iVGawVpCe6KVd/E5+TNA==" crossorigin="anonymous" />
<style>
.mydiv {
width: 500px;
height: 200px;
margin-top: 200px
}
</style>
<div class="mydiv">
<div class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/K1QICrgxTjA&t" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
</div>
<div class="mydiv">
<div class="plyr__video-embed" id="player">
<iframe src="https://www.youtube.com/embed/K1QICrgxTjA&t" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.4/plyr.js" integrity="sha512-M/AUlH5tMMuhvt9trN4rXBjsXq9HrOUmtblZHhesbx97sGycEnXX/ws1W7yyrF8zEjotdNhYNfHOd3WMu96eKA==" crossorigin="anonymous"></script>
<script>
const player = new Plyr('#player',{
title: 'Example Title',quality: {
default: 576,options: [4320,2880,2160,1440,1080,720,576,480,360,240]
}
});
</script>
解决方法
在 PlyrJS 中,您需要为每个视频添加它,例如:
<div class="mydiv">
<div class="plyr__video-embed" id="player1">
<iframe src="https://www.youtube.com/embed/K1QICrgxTjA&t" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
</div>
<div class="mydiv">
<div class="plyr__video-embed" id="player2">
<iframe src="https://www.youtube.com/embed/K1QICrgxTjA&t" allowfullscreen allowtransparency allow="autoplay"></iframe>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/plyr/3.6.4/plyr.js" integrity="sha512-M/AUlH5tMMuhvt9trN4rXBjsXq9HrOUmtblZHhesbx97sGycEnXX/ws1W7yyrF8zEjotdNhYNfHOd3WMu96eKA==" crossorigin="anonymous"></script>
<script>
const player1 = new Plyr('#player1',{
title: 'Example Title',quality: {
default: 576,options: [4320,2880,2160,1440,1080,720,576,480,360,240]
}
});
const player2 = new Plyr('#player2',240]
}
});
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。