Rumah > Artikel > hujung hadapan web > 如何写一个教学视频播放器

如何写一个教学视频播放器

一个新手asal: 2017-09-11 09:11:401852semak imbas

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

Atas ialah kandungan terperinci 如何写一个教学视频播放器. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：js中replace()赋值时的用法Artikel seterusnya：用Canvas实现时钟转动

Artikel berkaitan

Lihat lagi