<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='none';">
<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>登录后复制
以上就是如何写一个教学视频播放器的详细内容，更多请关注Work网其它相关文章！