Question

好吧，我尝试制作自己的视频播放器（添加按钮滚动条等）当我启动网站时，它只显示图片

这是我的主要html文件和css：

<!DOCTYPE html>
<head>

  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">

  <!-- jQuery -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

  <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
     {% load staticfiles %}
    <link rel = "stylesheet" type = "text / CSS" href = "video-player.css">
</head>
<body>
<img src="{% static 'accounts/image/gogi.jpg' %}" class="img-responsive center-block">
<div id="video-player">
            <video poster="image/127.jpg" width="1280" height="720" controls>
                <source src="{% static 'accounts/vid/1224.mp4' %}" type="video/mp4">
            </video>
<div id="progress-tree">
    <div id="progress"></div>

</div>
<div id="button-tree">
    <img id="play-button" src="{% static 'accounts/image/2712.png' %}" width="100" height="100">
        <div id="time-factor">
            0:00 / 0:00
        </div>
    <img id="backward-button" src="{% static 'accounts/image/backward.png' %}" width="100" height="100">

    <div id="soundbar-tree">
        <div id="soundbar" width="100" height="100"></div>
    </div>
    <img id="forward-button" src="{% static 'accounts/image/forward.png' %}" width="100" height="100">
</div>
</div>

这是css文件

 #video-player{
        background-color: aquamarine;
        display: inline-block;
    }
    img{
        background-color: Aqua;

    }
    #video-tree{
        width: 640px;
        height: 640px;
    }
    video{
        height: 100%;
        width: 100%
    }
    #progress-tree{

        background-color: CadetBlue;
    }
    #progress{
        height: 5px;
        width; 50%;
        background-color: Black;
    }
    #button-tree{
        height: 50px;
    }
    #button-tree > * {
        display: inline-block;
        height: 50px;
        width: 50px;
        vertical-align: middle;
    }

我把那个css文件放在了html文件中，请像c / mysite / site / templates / site / html和css文件一样帮助我，是的，我在mainfile中打开了css文件，是的，我称css文件为视频播放器。 css

我对HTML视频播放器有问题

0 个答案: