HTML5作业(五)-----视频播放器设计

简介: 该实验旨在熟悉媒体API和响应式按钮事件,任务是构建一个自定义视频播放器。功能包括:播放/暂停、静音、视频缩放、切换上下文件及快进快退。代码提供了一个HTML结构,包含相应按钮和事件处理函数调用。CSS和JavaScript文件用于样式和功能实现。实验鼓励添加更多功能和美化界面。参考链接:[实验详情](https://blog.csdn.net/javayoungcoolboy/article/details/134275425)

实验目的:1. 熟悉使用媒体API

      2. 熟悉按钮响应事件

实验要求:在网页中设计一款视频播放器,要求不使用自带控制面板,通过自定义按钮,实现以下功能:

播放暂停静音等功能;
视频放大和缩小;
播放上一个和下一个文件;
快进和快退功能。

其它功能可自行设计,界面尽量做到美观大方,可插入背景图片。

代码展示:

<!DOCTYPE HTML>

















        </div>
        <div class="btnRight">

            <button onClick="bigVideo()">
                <img src="../imgs/icon-big.png" />
            </button>
            <button onClick="smallVideo()">
                <img src="../imgs/icon-small.png" />
            </button>
        </div>
    </div>
</div>


原文链接:https://blog.csdn.net/javayoungcoolboy/article/details/134275425

相关文章
|
3月前
|
前端开发
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
这篇文章展示了一个仿大学官网的HTML静态网页设计作业,重点在于使用最少的HTML和CSS代码实现页面效果,并便于后期维护。
HTML静态网页设计作业、仿写大学官网 (力争使用最少的Html 、CSS代码实现)
|
3月前
|
前端开发
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
这篇文章提供了HTML网页作业的完整代码,包括仿写商城首页和学校官网网页的源码,以及如何运行和项目结构等详细信息。
HTML网页作业代码(仿写商城首页、学校官网网页等、源码可直接运行)
|
6月前
|
移动开发 API HTML5
HTML5作业(三)-----问卷调查表设计
该实验旨在通过设计一个问卷调查表来理解和熟悉表单API及各种组件的使用。要求包括使用不同类型的表单组件(如单选、多选、多行输入),设置输入提示,验证表单内容不为空,以及保持文档格式整洁美观。提供的HTML代码展示了一个包含姓名、年龄、性别选择、多选水果和单选颜色问题的问卷,并在提交前进行必要检查。
73 0
|
6月前
|
移动开发 前端开发 HTML5
HTML5作业(六)-----响应式放大悬浮菜单
本实验旨在熟悉CSS3的transition动画和阴影效果,任务是创建一个响应式放大悬浮菜单。当鼠标悬停在菜单上时,菜单会放大并添加立体阴影。代码示例包括设置背景色、字体样式、flex布局以及菜单项的样式和过渡效果。HTML结构包含导航菜单的链接,应用了外部CSS文件中的样式。
64 0
|
6月前
|
移动开发 JSON 前端开发
HTML5作业(四)-----饼状图和柱状图绘制【附源码】
该实验旨在熟悉HTML5 Canvas绘制图形和表单交互。用户需输入统计数据,程序将依据数据绘制饼状图和柱状图。要求验证用户输入有效性,点击按钮可切换图表类型,图上需显示数据标注。提供的代码包含一个表单用于输入JSON数据,两个绘制函数(drawPieChart、drawBarChart)用于生成饼状图和柱状图,以及输入验证和颜色生成辅助函数。
122 1
|
5月前
|
移动开发 前端开发 JavaScript
[初学者来练]用html+css+javascript个人博客作业需求
【6月更文挑战第3天】该项目旨在通过HTML、CSS和JavaScript创建一个响应式个人博客网站,提升前端开发技术理解与实践能力。主要包括设计简洁页面布局、实现主页展示、文章列表、详情页及评论功能。技术要求使用HTML5/CSS3/JavaScript,可选前端框架,强调代码质量和可维护性。提交内容需包括完整网站、开发文档和测试过的代码。评分标准涉及设计、功能实现、技术应用和文档质量。
47 0
|
6月前
|
移动开发 前端开发 JavaScript
HTML5作业(一)-----电子日历
该实验旨在通过创建一个电子日历来教授JavaScript按钮事件、DOM操作和CSS浮动排列。日历显示当前月份所有日期,当天以红色高亮。用户可点击“上个月”和“下个月”按钮切换。HTML结构包含日历头部(含按钮)和主体,CSS定义了样式,JavaScript处理日期显示及按钮事件,初始化并动态更新日历。
98 0
|
6月前
|
移动开发 JavaScript 前端开发
HTML5作业(二)-----扑克牌拖放小游戏
该实验旨在理解元素拖放、CSS定位和DOM操作,任务是创建一个扑克牌拖放游戏。用户需将A框内13张随机扑克牌(背面朝上)按顺序拖至B框,最多存5张。当B框内形成顺子时游戏结束,显示拖动次数。实验提供HTML结构及部分JavaScript代码,包括创建和乱序扑克牌、处理拖放事件等。
139 0
|
6月前
|
移动开发 JavaScript 前端开发
HTML5作业(六)-----贪吃蛇小游戏设计与实现
这是一个JavaScript实现的贪吃蛇小游戏,目标是训练编程能力和熟悉DOM事件。玩家使用上下左右键控制蛇移动,吃食物得分,每次得分后蛇身体变长,游戏速度可调节。当蛇碰到墙壁或自身时,游戏结束。代码包括HTML结构、CSS样式和JavaScript逻辑,实现了游戏画面、分数显示、蛇的移动和碰撞检测等功能。
72 0
|
6月前
|
移动开发 前端开发 JavaScript
15.HTML5视频播放器制作教程
15.HTML5视频播放器制作教程
170 0

热门文章

最新文章