如何写一个教学视频播放器-js教程-PHP中文网

首页

web前端

js教程

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

一个新手

Sep 11, 2017 am 09:11 AM

播放器教学视频

    <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

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr