Dvideo视频播放器播放效果代码-html代码-BFW代码库

Dvideo视频播放器播放效果代码

代码语言：html

所属分类：多媒体

代码描述：Dvideo视频播放器播放效果代码，提供简单的api对播放器进行控制，包括弹出菜单、设置播放速度、调节音量、快进等

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

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/Dvideo.css">

    <style>
        body,html {
            margin: 0;
            padding: 0;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            background-color: #171717;
        }

        .title {
            font: 24px/1.5 weight;
            color: #fff;
            text-align: center;
            margin: 20px 0;
        }

        .centerInfo {
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
        .getFullScreen {
            position: absolute;
            bottom: 100px;
            right: 100px;
            z-index: 1111;
        }
        .ctrl-c {
            width: 500px;
            height: auto;
            margin: 20px auto;
        }

        .btn {
            padding: 6px 10px;
            background: #5C96D8;
            margin: 5px;
            color: #fff;
            cursor: pointer;
            border-radius: 4px;
            display: inline-block;
        }
        #testVideo {
            width: 520px;
            height: auto;
            margin: 0 auto;
            outline: 2px solid #ccc;
        }
        body,html {
            font-size: 16px;
        }
        .btn {
            font-size: 1rem;
            background: rgba(0,0,0,0.3)!important;
        }
    </style>
</head>
<body>
    <div class="centerInfo">
        <h3 class="title">基于原生js的Dvideo.js组件</h3>
        <div id="testVideo"></div>
        <div class="ctrl-c" style="user-select:none">
            <span class="btn" style="background: #B42828" onClick="setFullScreen()">点击全屏</span>
            <span class="btn" style="background: #95487B" onClick="play()">播放 space</span>
            <span class="btn" style="background: #4D5DA6" onClick="pause()">暂停 space</span>
            <span class="btn" style="background: #488BAD" onClick="playpause()">播放暂停</span>
            <span class="btn" style="background: #359961" onClick="setVolume(1)">100的音量大小 up</span>
            <span class="btn" style="background: #547046" onClick="setVolume(0.3)">30的音量大小 down</span>
            <span class="btn" style="background: #767030" onClick="setBackRate(3)">2.0的语速</span>
            <span class="btn" style="background: #B2662E" onClick="setBackRate(1)">正常的语速</span>
            <span class="btn" style="background: #977074" onClick="setVideoRewind(10)">快退 left</span>
            <span class="btn" style="background: #4F1B60" onClick="setVideoForward(10)">快进 right</span>
            <span class="btn" style="background: #4F1B60" onClick="showLoading()">显示进度信息</span>
            <span class="btn" style="background: #4F1B60" onClick="showTopBottomCtrlNotClose()">显示上下菜单且不自动关闭</span>
            <span class="btn" style="background: #4F1B60" onClick="hideTopBottomCtrlLi()">立刻关闭上下菜单</span>
            <span class="btn" st.........完整代码请登录后点击上方下载按钮下载查看