Maison > Article > interface Web > Comment écrire un lecteur vidéo pédagogique
Comment écrire un lecteur vidéo pédagogique
- 一个新手original
- 2017-09-11 09:11:401859parcourir
<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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Utilisation de l'affectation replace() dans jsArticle suivant：Utilisation de l'affectation replace() dans js
Articles Liés
Voir plus- Une analyse approfondie du composant de groupe de liste Bootstrap
- Explication détaillée du currying de la fonction JavaScript
- Exemple complet de génération de mot de passe JS et de détection de force (avec téléchargement du code source de démonstration)
- Angularjs intègre l'interface utilisateur WeChat (weui)
- Comment basculer rapidement entre le chinois traditionnel et le chinois simplifié avec JavaScript et l'astuce permettant aux sites Web de prendre en charge le basculement entre les compétences en chinois simplifié et traditionnel_javascript