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

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