html JSBin：Outlearn Player Technologies CSS 1 - 解决方案

Posted 2021-05-11

<meta name="description" content="JS Bin for the Outlearn Brightcove Player Technologies Path">
<title>Outlearn CSS module<style id="jsbin-css">
body {
  margin: 2em;
  font-family: sans-serif;
}
</style>
</title>
<h1>Custom Playlist Player</h1>
<video
  width="500"
  height="321"
  data-account="1752604059001"
  data-player="027d9de0-cb4f-4598-a1d4-0d8480d5a154"
  data-embed="default"
  class="video-js" controls></video>
<script src="http://players.brightcove.net/1752604059001/027d9de0-cb4f-4598-a1d4-0d8480d5a154_default/index.min.js"></script>
<!-- a list here -->
<ul class="bcls-playlist">
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/116/1752604059001_4454764366001_4454723119001-th.jpg?pubId=1752604059001&videoId=4454723119001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/1124/1752604059001_4454713920001_4454629913001-th.jpg?pubId=1752604059001&videoId=4454629913001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/124/1752604059001_4454713878001_4454629914001-th.jpg?pubId=1752604059001&videoId=4454629914001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/2572/1752604059001_4454713729001_4454620115001-th.jpg?pubId=1752604059001&videoId=4454620115001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/1572/1752604059001_4454713750001_4454620114001-th.jpg?pubId=1752604059001&videoId=4454620114001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/572/1752604059001_4454712159001_4454620113001-th.jpg?pubId=1752604059001&videoId=4454620113001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/3572/1752604059001_4454712084001_4454620112001-th.jpg?pubId=1752604059001&videoId=4454620112001"></li>
</ul>
<script id="jsbin-source-html" type="text/html"><meta name="description" content="JS Bin for the Outlearn Brightcove Player Technologies Path">
<title>Outlearn CSS module</title>
<h1>Custom Playlist Player</h1>
<video
  width="500"
  height="321"
  data-account="1752604059001"
  data-player="027d9de0-cb4f-4598-a1d4-0d8480d5a154"
  data-embed="default"
  class="video-js" controls></video>
<script src="//players.brightcove.net/1752604059001/027d9de0-cb4f-4598-a1d4-0d8480d5a154_default/index.min.js"><\/script>
<\!-- a list here -->
<ul class="bcls-playlist">
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/116/1752604059001_4454764366001_4454723119001-th.jpg?pubId=1752604059001&videoId=4454723119001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/1124/1752604059001_4454713920001_4454629913001-th.jpg?pubId=1752604059001&videoId=4454629913001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/124/1752604059001_4454713878001_4454629914001-th.jpg?pubId=1752604059001&videoId=4454629914001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/2572/1752604059001_4454713729001_4454620115001-th.jpg?pubId=1752604059001&videoId=4454620115001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/1572/1752604059001_4454713750001_4454620114001-th.jpg?pubId=1752604059001&videoId=4454620114001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/572/1752604059001_4454712159001_4454620113001-th.jpg?pubId=1752604059001&videoId=4454620113001"></li>
  <li class="bcls-playlist-item"><img class="bcls-thumbnail" src="https://bcsecure01-a.akamaihd.net/6/1752604059001/201508/3572/1752604059001_4454712084001_4454620112001-th.jpg?pubId=1752604059001&videoId=4454620112001"></li>
</ul></script>

<script id="jsbin-source-css" type="text/css">body {
  margin: 2em;
  font-family: sans-serif;
}</script>