html页面实现视频播放器,实现简易html视频播放器的方法

body{

text-align: center;

}

#content-wrap{

margin-top: 50px;

display: inline-block;

}

#content{

display: flex;

}

/* 播放器 */

#video{

display: inline-block;

margin: 0;

border: 12px solid #eee;

box-sizing: border-box;

}

.video-list-wrap{

background-color: #eee;

border-right: 1px solid #fff;

}

/* 视频列表 */

.video-list{

display: inline-block;

box-sizing: border-box;

margin: 0;

width: 150px;

list-style: none;

padding: 0;

overflow: auto;

font-size: 12px;

}

/* 列表项 */

.video-item{

cursor: pointer;

width: 150px;

box-sizing: border-box;

text-align: left;

padding: 5px 0 5px 1