经典JS视频播放器代码

陪你听风

于 2024-10-07 18:38:46 发布

阅读量31

点赞数

分类专栏：前端 JS 文章标签： javascript 音视频开发语言

本文链接：https://blog.csdn.net/modaner/article/details/142744356

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    #mse {
      width: 600px;
      height: 300px;
      background-color: antiquewhite;
    }

    .player {
      width: 800px;
      height: 337.5px;
      background-color: rgb(236, 232, 226);
      display: inline-flex;

    }

    .list ul {
      list-style: none;
      padding: 0;
      margin: 2px 0 0 0;
      cursor: pointer;
      width: 186px;

      line-height: 30px;
      border-bottom: 1px solid #ecd9d9;
    }

    .list ul h2 {
      text-align: center;
    }

    .list ul li {

      margin-left: 10px;
    }

    .list ul li:hover {
      background-color: #f5f5f5;
      color: blue;
    }

    .active {
      background-color: #f5f5f5;
      color: blue;
    }

    .pre {
      margin-left: 10px;

    }



    .btn {
      width: 100%;
      height: 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;

    }

    .btn button {


      cursor: pointer;
      color: blue;


    }
  </style>
</head>

<body>
  <div class="player">
    <div id="mse"></div>
    <div class="list">
      <ul>
        <h2>视频列表</h2>
      </ul>
      <div class="btn">
        <button class="pre" disabled>上一个</button>
        <button class="next">下一个</button>
      </div>

    </div>
  </div>
  <link rel="stylesheet" href="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.css" />
  <script charset="utf-8" src="https://unpkg.byted-static.com/xgplayer/3.0.10/dist/index.min.js"></script>
  <script>
    const config = {
      "id": "mse",
      "url": "//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4",
      "playsinline": true,
      "poster": "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
      "plugins": [],
      "autoplay": true
    }

    let player = new Player(config)


    const datas = [{

        "id": 1,
        "name": '宣传视频1222',
        "url": '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4',
        "poster": "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
      }, {

        "id": 2,

        "name": '宣传视频2w11221',
        "url": '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4',
        "poster": "https://gimg3.baidu.com/rel/src=https%3A%2F%2Fgips0.baidu.com%2Fit%2Fu%3D1857003897%2C3029955%26fm%3D3028%26app%3D3028%26f%3DPNG%26fmt%3Dauto%26q%3D75%26size%3Df1138_640&refer=http%3A%2F%2Fwww.baidu.com&app=2010&size=w560&n=0&g=0n&q=100&fmt=auto?sec=1701968400&t=d86d8a0034b5ce4f5ba5e5bdcbc5456b",

      },
      {

        "id": 3,
        "name": '宣传视频312',
        "url": '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4',
        "poster": "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
      }, {

        "id": 4,
        "name": '宣传视频122222224',
        "url": '//lf3-static.bytednsdoc.com/obj/eden-cn/nupenuvpxnuvo/xgplayer_doc/xgplayer-demo.mp4',
        "poster": "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/poster.jpg",
      }
    ]
    const list = document.querySelector('.list ul')
    // list.innerHTML = '暂无视频'
    for (let i = 0; i < datas.length; i++) {

      list.innerHTML += "<li " + " data-id=" + datas[i].id + " οnclick='playerList(" + datas[i].id + ")'>" +
        datas[i].name +
        "</li>";
      if (i == 0) {
        list.children[1].classList.add('active')
      }

    }
    let id = 0
    document.querySelector('.pre').addEventListener('click', function () {
      let id = +document.querySelector(".active").dataset.id
      playerList(id - 1)
    })
    document.querySelector('.next').addEventListener('click', function () {
      let id = +document.querySelector(".active").dataset.id
      playerList(id + 1)
    })

    function playerList(id) {
      config.url = datas[id - 1].url
      config.poster = datas[id - 1].poster
      let player = new Player(config)
      document.querySelector(".active").classList.remove('active')
      document.querySelector(`.list ul li:nth-child(${id+1} )`).classList.add('active')
      if (id == 1) {
        document.querySelector(".pre").setAttribute("disabled", true)
      } else {
        document.querySelector(".pre").removeAttribute("disabled")
      }
      if (id == 4) {
        document.querySelector(".next").setAttribute("disabled", true)
      } else {
        document.querySelector(".next").removeAttribute("disabled")
      }
    }
  </script>
</body>

</html>