Home > Article > Web Front-end > How to write an instructional video player

How to write an instructional video player

一个新手Original: 2017-09-11 09:11:401864browse

    <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>

The above is the detailed content of How to write an instructional video player. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Usage of replace() assignment in jsNext article：Usage of replace() assignment in js

See more

How to write an instructional video player

Related articles