supervideo实现一个自带弹幕画中画的视频播放器代码-html代码-BFW代码库

supervideo实现一个自带弹幕画中画的视频播放器代码

代码语言：html

所属分类：多媒体

代码描述：supervideo实现一个自带弹幕画中画的视频播放器代码，可调节播放速度和音量。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

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

<head>
    <link href="css/main-css.css" rel="stylesheet">
</head>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title></title>
    <style>
        html,body {
            width: 100%;
            height: 100%;
            background-color: #292929;
          }
          * {
            padding: 0;
            margin: 0;
          }
           /* 设置视频外部容器样式 */
          #videoContainer {
            width: 800px;
            height: 500px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 80px;
          }
          @font-face {
        font-family: 'iconfont';  /* project id 1867770 */
        src: url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.eot');
        src: url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.eot?#iefix') format('embedded-opentype'),
        url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.woff2') format('woff2'),
        url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.woff') format('woff'),
        url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.ttf') format('truetype'),
        url('https://at.alicdn.com/t/font_1867770_5pzef3csvso.svg#iconfont') format('svg');
      }
    
    .sv-target video {
        background-color: #000000;
        object-fit: fill;
        cursor: pointer;
    }
    
    .sv-font {
        font-family: 'iconfont';
    }
    
    .sv-pic-pic {
        color: #ffffff;
        font-size: 20px;
        margin-right: 6px;
    }
    
    .sv-play {
        color: #ffffff;
        font-size: 20px;
    }
    
    .sv-fontBtn {
        color: #ffffff;
        font-size: 20px;
    }
    
    .sv-next {
        color: #ffffff;
        font-size: 20px;
    }
    
    .sv-fullScreen {
        color: #ffffff;
        font-size: 20px;
    }
    
    .sv-cancelFull {
        color: #ffffff;
        font-size: 20px;
    }
    
    .sv-target {
        position: relative;
    }
    .sv-control {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background-color: rgba(0, 0, 0, 0.5);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }
    .sv-play-container {
        height: 100%;
        /* background-color: royalblue; */
        display: flex;
        flex-direction: row;
        padding-right: 10px;
    }
    .sv-control-r {
        height: 100%;
        /* background-color: royalblue; */
        display: flex;
        flex-direction: row;
        padding-left: 10px;
        padding-right: 10px;
    }
    .sv-play-container button.sv-playBtn {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0 10px;
        outline: none;
        color: inherit;
        text-align: inherit;
        font: inherit;
        line-height: inherit;
        margin-left: 10px;
    }
    
    .sv-control-r .showMute {
        background: none;
        border: none;
        cursor: pointer;
        padding: 0 10px;
        outline: none;
        color: inherit;
        text-align: inherit;
        font: inherit;
        line-height: inherit;
        position: relative;
    }
    .showMute span:nth-child(1) {
        display: block;
        padding: 20px 0;
    }
    
    .sv-time {
        height: 100%;
        color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 12px;
    }
    
    .sv-time-split {
        padding: 0 4px;
    }
    
    .sv-mutePanel {
        position: absolute;
        top: -120px;
        left: 0;
        width: 20px;
        height: 80px;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        flex-direction: column;
        padding: 16px 6px;
        border-radius: 4px;
    }
 .........完整代码请登录后点击上方下载按钮下载查看