如何写一个教学视频播放器
<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>以上是如何写一个教学视频播放器的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
视频文件存储在浏览器缓存中的位置在哪里？
Feb 19, 2024 pm 05:09 PM
浏览器缓存视频在哪个文件夹在日常使用互联网浏览器时，我们经常会观看各种在线视频，比如在YouTube上看音乐视频或在Netflix上观看电影等。而这些视频在加载过程中会被浏览器缓存下来，以便日后再次播放时能够快速加载。那么问题来了，这些缓存的视频实际上存储在哪个文件夹中呢？不同浏览器的缓存视频文件夹保存位置是不同的。下面我们将分别介绍几种常见的浏览器以及它们
抖音发布他人视频侵权吗？它怎样剪辑视频不算侵权？
Mar 21, 2024 pm 05:57 PM
随着短视频平台的兴起，抖音成为了大家日常生活中不可或缺的一部分。在抖音上，我们可以看到来自世界各地的有趣视频。有些人喜欢发布他人的视频，这就引发了一个问题：抖音发布他人视频侵权吗？本文将围绕这个问题展开讨论，告诉大家怎样剪辑视频不算侵权，以及如何避免侵权问题。一、抖音发布他人视频侵权吗？根据我国《著作权法》的规定，未经著作权人许可，擅自使用其作品，属于侵权行为。因此，在抖音上发布他人视频，如果未经原作者或著作权人许可，就属于侵权行为。二、怎样剪辑视频不算侵权？1.使用公共领域或已授权的内容：公共
Wink如何去视频水印
Feb 23, 2024 pm 07:22 PM
Wink如何去视频水印?winkAPP中是有去除掉视频水印的工具，但是多数的小伙伴不知道wink中如何去除掉视频中的水印，接下来就是小编为玩家带来的Wink视频去水印方法图文教程，感兴趣的用户快来一起看看吧！Wink如何去视频水印1、首先打开winkAPP，在首页面专区中选择【去水印】功能;2、然后在相册中选择你需要去除水印的视频;3、接着选择视频之后，剪辑视频之后点击右上角【√】;4、最后点击如下图所示的【一键去印】之后点击【处理】即可。
VLC Chromecast无法在Windows PC上运行
Mar 26, 2024 am 10:41 AM
VLCChromecast功能在您的WindowsPC上不起作用吗?此问题可能是由Chromecast设备与VLC的铸造功能之间的兼容性问题引起的。在这篇文章中，我们将告诉你在这种情况下你可以做什么，以及如果VLC渲染器找不到你的Chromecast该怎么办。如何在Windows上使用ChromecastVLC?要使用VLC将视频从Windows投射到Chromecast，请遵循以下步骤:打开媒体播放器应用程序，转到播放菜单。导航到Renderer选项，您将能够看到检测到的Chromecast设
抖音发布视频如何赚收益？新手小白怎么在抖音上赚钱啊？
Mar 21, 2024 pm 08:17 PM
抖音，这个全民短视频平台，不仅让我们在闲暇时间享受到各种有趣、新奇的短视频，同时也给了我们一个展示自我、实现价值的舞台。那么，如何在抖音发布视频赚取收益呢？本文将详细解答这个问题，帮助你在抖音上赚取更多的收益。一、抖音发布视频如何赚收益？发布视频在抖音上获得一定的播放量后，可以有机会参与广告分成计划。这一收益方式是抖音用户最为熟悉的之一，也是许多创作者主要的收入来源。抖音根据账号权重、视频内容以及观众反馈等多种因素来决定是否提供广告分成的机会。抖音平台允许观众通过发送礼物来支持自己喜欢的创作者，
从 iPhone 上的视频中删除慢动作的 2 种方法
Mar 04, 2024 am 10:46 AM
在iOS设备上，“相机”应用程序允许您拍摄慢动作视频，如果您使用的是最新款的iPhone，甚至可以以每秒240帧的速度录制视频。这种功能让您能够捕捉到丰富细节的高速动作。但有时候，您可能希望将慢动作视频以正常速度播放，这样可以更好地欣赏视频中的细节和动作。在这篇文章中，我们将解释从iPhone上的现有视频中删除慢动作的所有方法。如何从iPhone上的视频中删除慢动作[2种方法]您可以使用“照片”App或iMovie剪辑App从设备上的视频中删除慢动作。方法1：使用“照片”应用在iPhone上打开
如何发布小红书视频作品？发视频要注意什么？
Mar 23, 2024 pm 08:50 PM
随着短视频平台的兴起，小红书成为了许多人分享生活、表达自我、获取流量的平台。在这个平台上，发布视频作品是一种非常受欢迎的互动方式。那么，如何发布小红书视频作品呢？一、如何发布小红书视频作品？首先，确保准备好一段适合分享的视频内容。你可以利用手机或其他摄像设备进行拍摄，需要注意画质和声音的清晰度。2.剪辑视频：为了让作品更具吸引力，可以对视频进行剪辑。可以使用专业的视频剪辑软件，如抖音、快手等，添加滤镜、音乐、字幕等元素。3.选择封面：封面是吸引用户点击的关键，选择一张清晰、有趣的图片作为封面，让
微博发视频怎么不压缩画质_微博发视频不压缩画质方法
Mar 30, 2024 pm 12:26 PM
1、首先打开手机微博，点击右下角【我】(如图所示)。2、接着点击右上角【齿轮】打开设置(如图所示)。3、然后找到并打开【通用设置】(如图所示)。4、随后进入【视频随着】选项(如图所示)。5、再打开【视频上传清晰度】设置(如图所示)。6、最后选择【原画质】就能不压缩了(如图所示)。
