首页 >web前端 >js教程 >如何写一个教学视频播放器
如何写一个教学视频播放器

一个新手原创: 2017-09-11 09:11:401876浏览
    <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">
        <img class="bimg" id="home"src="buttonimg/home.png"  /><br> 
        </p>

        <p id="bimg" style=" height:50%; width: 10%; float:left display:block;" >
            <img class="bimg" id="A2" src="buttonimg/a.png" alt="bimg/a2" /><br>
            <img class="bimg" id="B" src="buttonimg/b.png" alt="bimg/a2" /><br>
            <img class="bimg" id="C1" src="buttonimg/c1.png" alt="bimg/a2" /><br>
            <img class="bimg" id="C2" src="buttonimg/c1c2.png" alt="bimg/a2" /><br>
            <img class="bimg" id="C3" src="buttonimg/c3.png" alt="bimg/a2"/ >
        </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=&#39;none&#39;;"> 
                <p  id="kongge" style="width:2%;height:100% ;float:left;background-color:;display:;" >               </p>

            <img id="playBtn" title="Play" style="height:60%; float:left; display:inline;cursor: pointer;" src="controls/play.png"  alt="播放暂停" />
                                                    <!-- <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" style="">
                    <!-- <img style="height:3em;float:right;margin-top:-1em;margin-bottom:-1em;" src="controls/progress.png" /> -->
                </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;" > -->
            <img id="v1" style="height:40% ;float:left;display:inline; cursor: pointer;" src="controls/v1.png" />

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

            <img id="v2" style="height:40% ;float:left;display:inline; cursor: pointer;" src="controls/v2.png"  />

                <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> -->
        <img style=" position: absolute;top:0;left:0;bottom:0;right:0;width:100%;margin:auto;" src="board/101c1.jpg" />
        <!-- <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> -->
        <img style=" position: absolute;top:0;left:0;bottom:0;right:0;width:100%;margin:auto;" src="board/101c2.jpg" />
        <!-- <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> -->
        <img style=" position: absolute;top:0;left:0;bottom:0;right:0;width:100%;margin:auto;" src="board/101c3.jpg" />
        <!-- <p style="width=100% ; height:15%;"></p> -->
        </p>
        <p id="blacks" >
        <p style="width:100% ; height:28%; float:left"></p>
        <img id="blackboardhiden"  src="buttonimg/bhide.png" />
       </p>
    </p>
</p>
<img  style="z-index: 10000; position: absolute; top:1%; left: 1%; height:20%;" src="buttonimg/logo.png" />

</body>
以上是如何写一个教学视频播放器的详细内容。更多信息请关注PHP中文网其他相关文章！
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
上一篇：js中replace()赋值时的用法下一篇：用Canvas实现时钟转动
查看更多