网页基础开发教程 5_第1页
网页基础开发教程 5_第2页
网页基础开发教程 5_第3页
网页基础开发教程 5_第4页
网页基础开发教程 5_第5页
已阅读5页，还剩21页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

项目10制作公司视频宣传模块多媒体技术了解视频、音频嵌入技术，能够总结出HITMI5视频、音频嵌入技术的优点。掌握在HTML5中嵌入视频的方法，能够在HTML5页面中添加视频文件。掌握在HTML5中嵌入音频的方法，能够在HTMI5页面中添加音频文件。熟悉调用网络音频、视频文件的方法，能够调用网络中的音频、视频文件。熟悉使用CSS控制视频宽度和高度的方法，能够在网页中设置视频的宽度和高度。任务描述知识准备任务实现任务小结任务测试与考核实训制作首页的视频宣传模块1.HTML结构先用一个div标签定义模块的大小，再用一个div标签定义版心内容的位置，分别用h1标签和p标签定义标题和作者，将内容盒子分为左右两个部分，左边模盒子插入视频，右边盒子分为上下两个部分，上边盒子放视频介绍，下边盒子放播放量。2.CSS样式（1）整体页面的版心宽度设置1200px，并居中显示；（2）设置背景图片；（3）设置视频和简介样式，并自动播放视频。任务描述任务描述知识准备任务实现任务小结任务测试与考核实训嵌入视频和音频设置视频宽度和高度多媒体技术多媒体技术概述在HTML5之前，网页嵌入音视频依赖第三方插件，代码复杂且不易掌握。HTML5新增的<video>和<audio>标签简化了多媒体内容的嵌入，目前已被主流浏览器广泛支持。各浏览器支持情况如表

所示。浏览器支持版本Firefox（火狐浏览器）3.5及以上版本Oprea（欧朋浏览器）10.5及以上版本Chrome（谷歌浏览器）3.0及以上版本Safari（苹果浏览器）3.2及以上版本。IE9.0及以上版本知识准备1：嵌入视频和音频1.嵌入视频在HTML5，<video>标签用于定义视频文件，使用<video>标签嵌入视频的基本语法格式如下：

src属性：用于设置视频文件的路径；

controls属性：控制播放控件显示（可省略属性值）。

标签内文字：浏览器不支持视频标签时的替代显示内容。transition-property:none|all|property;在HTML5中插入视频案例例10-1启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter10文件夹），新建HTML文件，命名为demo10-1.html。部分代码如下：知识准备1：嵌入视频和音频浏览网页效果如图所示，页面中嵌入了一个视频播放器，加载并显示"jiangxin.mp4"视频文件，同时提供播放控制条供用户操作视频，界面底部是浏览器添加的视频控件，用于控制视频播放的状态，当点击“播放”按钮时，即可播放视频。<videosrc="media/jiangxin.mp4"controls="controls">英雄您好视频</video>知识准备1：嵌入视频和音频1.嵌入视频在<video>标签中还可以添加其他属性，进一步优化视频的播放效果，具体如表所示。autoplay属性和loop属性的值可以省略。属性值描述autoplayautoplay当页面载入完成后自动播放视频（加静音）looploop视频结束时重新开始播放preloadauto/meta/none如果出现该属性，则视频在页面加载时进行加载并预备播放。如果使用autoplay，则忽略该属性posterurl当视频缓冲不足时，该属性值链接一个图像，并将该图像按照一定的比例显示出来知识准备1：嵌入视频和音频2.嵌入音频在HTM5中，<audio>标签用于定义音频文件。使用<audio>标签嵌入音频文件的基本语法格式如下：<audio>标签的语法格式与<video>标签类似，src属性用于设置音频文件的路径，controls属性用于为音频提供播放控件。在<audio>标签之间同样可以插人文字，当浏览器不支持<audio>标签时，该文字就会在浏览器中显示。<audiosrc="音频文件路径"controls></audio>在HTML5中插入音频案例例10-2启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter10文件夹），新建HTML文件，命名为demo10-2.html。部分代码如下：知识准备1：嵌入视频和音频浏览网页效果如图所示，页面中嵌入了一个音频播放器，加载并播放"media/snow.mp3"音频文件，同时提供播放控制条供用户操作音频，当音频无法正常播放时将呈现"雪落下的声音"的替代文本。<audiosrc="media/snow.mp3"controls="controls">雪落下的声音</audio>知识准备1：嵌入视频和音频2.嵌入音频在<audio>标签中还可以添加其他属性，进一步优化音频的播放效果，具体如表所示。表中列举的<audio>标签的属性和<video>标签是相同的，这些相同的属性在嵌入音频和视频时是通用的。属性值描述autoplayautoplay当页面载入完成后自动播放视频looploop视频结束时重新开始播放preloadauto/meta/none如果出现该属性，则视频在页面加载时进行加载并预备播放。如果使用autoplay，则忽略该属性CSS设置视频宽和高案例在网页中嵌入视频时，通常为<video>标签设置width和height属性，以便浏览器预先确定视频尺寸并预留空间，从而保证页面布局的统一。例10-3启动VSCode，打开“OpenFolder”对话框，选择已有目录文件夹（例如，chapter10文件夹），新建HTML文件，命名为demo10-3.html。部分代码如下：知识准备2：设置视频的宽度和高度浏览网页效果如图所示，页面顶部显示居中的"视频布局样式"标题，下方灰色边框容器内左右两侧各有一个棕色占位色块，中间区域显示400×400像素的视频播放器，整体形成三栏并排布局，视频区域设置了深灰色背景。video{width:400px;height:400px;background-color:darkgrey;float:left;}p{width:200px;height:400px;background-color:darkkhaki;float:left;}<p>占位色块</p><videosrc="media/Helloheroes.m4v"controls="controls"></video><p>占位色块</p>设置视频的宽度和高度的效果图任务描述知识准备任务实现任务小结任务测试与考核实训制作首页的视频宣传模块1.HTML结构先用一个div标签定义模块的大小，再用一个div标签定义版心内容的位置，分别用h1标签和p标签定义标题和作者，将内容盒子分为左右两个部分，左边模盒子插入视频，右边盒子分为上下两个部分，上边盒子放视频介绍，下边盒子放播放量。2.CSS样式（1）整体页面的版心宽度设置1200px，并居中显示；（2）设置背景图片；（3）设置视频和简介样式，并自动播放视频。任务描述在VSCode中打开chapter10目录，创建CustomerCase项目文件夹。项目结构如下：

页面文件：Case.html

资源目录：images（存放图片），media（存放视频）

样式文件：css/style.css任务实现1.创建项目在index.html文件的<body></body>标签中如下代码：任务实现2.设置“海量企业

通过努力而成功”模块网页结构<divclass="box"><divclass="container"><h1>海量企业

通过努力而成功</h1><pclass="author">萨达萨达萨达</p><divclass="content"><divclass="left"><videosrc="media/jiangxin.mp4"controls="controls"autoplayloop></video></div><divclass="right"><divclass="top"><h3>行业定制开发方案：赋能企业数字化转型</h3><pclass="brief">

在当今数字化时代，企业面临着前所未有的机遇与挑战。为了在激烈的市场竞争中脱颖而出，企业必须加速数字化转型，提升运营效率，优化业务流程，并增强核心竞争力。行业定制开发方案应运而生，致力于为企业提供量身定制的数字化解决方案，精准满足特定行业需求，助力企业实现高效、智能的业务运作。<br></p></div><divclass="bottom">

线索成本<imgsrc="images/down.png"alt="">

点击率<imgsrc="images/up.png"alt="">

咨询量<imgsrc="images/up.png"alt=""></div></div></div></div></div>在style文件中输入如下代码：任务实现2.设置“海量企业

通过努力而成功”模块网页样式*{margin:0;padding:0;}.box{width:100%;height:660px;padding:70px;background-image:url(../images/R-C.jfif);background-repeat:no-repeat;background-size:100%100%;}.container{width:1200px;height:100%;margin:0auto;/*background-color:aqua;*/}h1{height:120px;line-height:120px;text-align:center;}.author{height:50px;line-height:50px;text-align:center;}.content{width:1200px;height:428px;margin:30pxauto;color:white;}.left{width:760px;height:428px;float:left;}.leftvideo{width:100%;}.right{width:440px;height:100%;float:left;/*margin-left:20px;*//*background-color:aquamarine;*/}.top{width:100%;height:260px;padding-top:48px;background-color:rgba(0,0,0,.5);}h3{text-align:center;}.brief{padding-left:20px;padding-right:20px;margin-top:30px;font-size:18px;}.bottom{width:100%;height:120px;/*margin-top:18px;*/text-align:center;line-height:120px;font-size:18px;background-color:rgba(0,0,0,.5);}.bottomimg{width:20px;}然后，将style.css文件引入index.html文件，打开index.html文件,在<head></head>标签中输入如下代码：

<linkrel="stylesheet"href="css/style.css">效果如图所示任务描述知识准备任务实现任务小结任务测试与考核实训新媒体技术任务描述知识准备任务实现任务小结任务测试与考核实训一、单选题1.在HTML中，用于嵌入视频文件的标签是：（

）A.<audio> B.<video> C.<media> D.<embed>2.在HTML中，用于指定音频文件自动播放的属性是：（

）A.autoplay B.cont

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论