如何写一个教学视频播放器-js教程-PHP中文网

如何写一个教学视频播放器
一个新手
发布： 2017-09-11 09:11:40
原创
2122人浏览过
    <script type="text/javascript" src="1_main.js"></script>
    <script type="text/javascript">
        function displayButton(){
            document.getElementById("d2").style.opacity="1";
        }

        function hideButton(){
            document.getElementById("d2").style.opacity="0"; 
        }

        //鼠标2s悬停不动隐藏d2
        <!-- var timer; -->
        <!-- function h_Button(){ -->
            <!-- timer != null && clearTimeout(timer); -->
            <!-- timer = setTimeout(function(){ -->
                <!-- document.getElementById("d2").style.opacity="0"; -->
            <!-- }, 2000) -->
        <!-- } -->

        <!-- function s_Button(){ -->
            <!-- if (document.getElementById("d2").style.opacity="0") { -->
                <!-- document.getElementById("d2").style.opacity="1"; -->
                <!-- h_Button(); -->
            <!-- } -->
        <!-- } -->
    </script>
    <style type="text/css">
    </style>
    <title>多姿多彩的泡泡</title>
</head>
<body style="height: 100%;"   >
<p id="D">
    <p id="d1" >
        <video id="video"  style="height: 100%; width:100%">
        </video>
    </p>
    <p id="d2"  onmouseenter="displayButton()" onmouseleave="hideButton();" onmouseover="h_Button();" onmousemove="s_Button();" onclick="s_Button();">
        <p style="width:100% ; height:30%;">
        </p>
        <p style=" height:10%;width: 6.5%; float:left" align="center">
        @@##@@<br> 
        </p>

        <p id="bimg" style=" height:50%; width: 10%; float:left display:block;" >
            @@##@@<br>
            @@##@@<br>
            @@##@@<br>
            @@##@@<br>
            @@##@@
        </p>

        <p id="videoControls" style="margin: 0 auto;position:fixed;width: 100%;height:13%;left:0;bottom: 0px;justify-content:center;align-items:center;display:-webkit-flex; display='none';"> 
                <p  id="kongge" style="width:2%;height:100% ;float:left;background-color:;display:;" >               </p>

            @@##@@
                                                    <!-- <p style="width=5%;height:100% ;float:left;background-color:transparent;display:inline;;" >  </p>     -->
            <!-- <p id="showProgrestime"  style="font-weight: 600;line-height: 2px;width=10% ;height: 25px;float:left ;display:inline;background-color:transparent; color: DarkGray ;">0:00/0:00</p> -->
                                                    <!-- <p style="width=5%;height:100%;float:left;background-color:;transparent;display:inline;" >            </p> -->
                <p style="width:5%;height:100% ;float:left;background-color:;transparent;display:inline;" >        </p>

            <p id="progressWrap" style=" ">  
                 <p id="playProgress" >
                    <!-- @@##@@ -->
                </p>
            </p>

                <p style="width:5%;height:100% ;float:left;background-color:;transparent;display:inline;" >        </p>
            <!-- <p style="width:18%;height:100% ;float:left;display:inline;" > -->
            @@##@@

                <p style="width:5%;height:100% ;float:left;background-color:;transparent;display:inline;" >        </p>

            @@##@@

                <p style="width:5%;height:100% ;float:left;background-color:;transparent;display:inline;" >        </p>



                <p style="width:2%;height:100% ;float:left;background-color:;transparent;display:inline;" >                    </p>

        </p> 

    </p>

    <p id="d3">
    <!-- <button  id="blackboardhiden" type="button"><</button> -->
        <p id="black1"style="width:100%;height:100%; margin: auto 0; ">
        <!-- <p style="width=100% ; height:15%;"></p> -->
        @@##@@
        <!-- <p style="width=100% ; height:15%;"></p> -->
        </p>
        <p id="black2"style="width:100%;height:100%; margin: auto 0; ">
        <!-- <p style="width=100% ; height:15%;"></p> -->
        @@##@@
        <!-- <p style="width=100% ; height:15%;"></p> -->
        </p>
        <p id="black3"style="width:100%;height:100%; margin: auto 0; ">
        <!-- <p style="width=100% ; height:15%;"></p> -->
        @@##@@
        <!-- <p style="width=100% ; height:15%;"></p> -->
        </p>
        <p id="blacks" >
        <p style="width:100% ; height:28%; float:left"></p>
        @@##@@
       </p>
    </p>
</p>
@@##@@

</body>
登录后复制
以上就是如何写一个教学视频播放器的详细内容，更多请关注php中文网其它相关文章！