如何在 PlyrJS 中添加两个视频答案

【问题标题】：How can I add two videos in PlyrJS如何在 PlyrJS 中添加两个视频
【发布时间】：2021-06-05 06:31:35
【问题描述】：

我遇到了 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>

【问题讨论】：

标签： javascript html css plyr.js

【解决方案1】：

在 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', {
        title: 'Example Title',
        quality: {
            default: 576,
            options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240]
        }

    });
</script>

【讨论】：