简单版本视频播放服务器V3-前端优化-播放器在左，列表在右侧【推荐】【完成】

雨师@

已于 2023-07-17 11:00:58 修改

阅读量438

点赞数

分类专栏： golang语言实战代码文章标签：音视频服务器前端 golang程序应用 golang

于 2023-07-17 09:35:35 首次发布

本文链接： https://blog.csdn.net/wtt234/article/details/131759154

版权

做个家用版本的家庭影院，通过这个服务器可以给电脑，平板，手机等设备提供直接播放电影的作用，通过离线下载电影放入目录里就是就可以给全家提供电影播放了，通过浏览器就是可以访问电脑里面的视频，实现简单的家庭版本服务了。

一、优化后的前端代码

1.0最终代码：【前端以这个为主；后端不变】

解决滚动条不能滚动的问题，本次带有一个滚动条，可以滚动播放列表资源；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #container {
            display: flex;
            flex-direction: row;
            height: 50vh; /* 设置容器高度为视窗高度 */


        }


        /* 视频播放器样式 */
        /*#videoPlayer {*/
        /*    display: flex;*/
        /*    flex-direction: row;*/
        /*}*/

        #video {
            flex: 1;
        }

        /* 播放列表样式 */
        .playlist {
            list-style: none;
            padding: 0;
            width: 200px;

            margin-left: 20px;
            overflow-y: auto; /* 当列表超过容器高度时显示滚动条 */
            height: 100%; /* 设置播放列表高度为容器高度 */

        }

        .playlist-item {
            cursor: pointer;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 5px;
            margin-bottom: 10px;

        }

        .playlist-item:last-child {
            margin-bottom: 0;
        }

        .playlist-item.active {
            background-color: #f5f5f5;
        }
        li{
            display: block;
        }
    </style>
</head>
<body>

<div id="container">

<!--    <video id="video" width="420" height="340" controls="controls" src="http://10.72.1.241:8080/GetFile/a1.mp4"-->
    <video id="video" width="420" height="340" c