1. 您所在位置：
  2. 网站首页
  3. 文档分类
  4. 计算机
  5. 网页设计/UI

HTML5+CSS3网页设计基础教程教学课件9.pptx

HTML5+CSS3网页设计基础教程教学课件9.pptx

    1. 1、本文档共31页，可阅读全部内容。
    2. 2、原创力文档（book118）网站文档一经付费（服务费），不意味着购买了该文档的版权，仅供个人/单位学习、研究之用，不得用于商业用途，未经授权，严禁复制、发行、汇编、翻译或者网络传播等，侵权必究。
    3. 3、本站所有内容均由合作方或网友上传，本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺！文档内容仅供研究参考，付费前请自行鉴别。如您付费，意味着您自己接受本站规则且自行承担风险，本站不退款、不进行额外附加服务；查看《如何避免下载的几个坑》。如果您已付费下载过本站文档，您可以点击 这里二次下载。
    4. 4、如文档侵犯商业秘密、侵犯著作权、侵犯人身权等，请点击“版权申诉”（推荐），也可以打举报电话：400-050-0827(电话支持时间：9:00-18:30)。
    HTML5+CSS3网页设计基础教程;;单元导读 网页上经常会使用视频、音频等多媒体文件，以丰富网页效果，本章主要介绍HTML5视频、音频的使用方法。;学习目标 掌握HTML5视频的使用方法 掌握HTML5音频的使用方法;思政目标 在网页中可以插入各种音频、视频媒体文件，网页的传播力度是相当大、速度相当快的，要教育学生在网页编辑中保证放入的是真实、健康、正能量、促进社会和谐的媒体内容，使学生树立正确的人生观、价值观，培养学生具有良好的道德品质和正确的政治观念，培养学生形成正确的思想方法。 ;在从前的网页中，大部分视频文件是通过插件显示出来的，用户要想看到视频效果，必须先下载和安装相应的插件，而不同的浏览器或不同的设备使用的插件往往不同，这就使用户体验稍显麻烦。HTML5 提供了通过 video 元素包含视频的标准方法，使得播放视频不再依赖外部插件。;video 元素主要支持三种视频格式，Ogg 格式文件、MPEG4 格式文件，WebM 格式文件，目前，大部分常用的新版本的主流浏览器对这几种格式支持的都非常好，相信随着时间的推移，越来越多的浏览器对各种格式的视频文件都能够支持的更好。;video元素的属性，如表9-1：;任务1. video元素的使用——显示视频文件，效果如图9-1：;<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>视频播放</title> </head> <body> <video src="video/flowers.mp4" controls=""> 您的浏览器暂不支持该视频格式，建议升级或更换浏览器 </video> </body> </html>;任务分析 <video src="video/flowers.mp4" controls="">在video的属性中不仅要指出视频文件的路径，还要写上controls属性，否则视频只是停止在页面中，不能播放，controls=””和controls=” controls”同效； 不同的浏览器对各种视频文件支持的程度不同，本例中是mp4格式的视频文件，可以使用IE9+/Chrome/Safari等浏览器浏览，但是如果用户使用的是其它版本较低的浏览器，可能会看不到视频显示，为了提示用户，可以在<video></video>元素中写上一句说明性的文本，此文本会显示在视频文件应该显示的位置；;任务2. video元素其它属性的设置——显示视频文件并控制宽高和其它属性，效果如图9-2：;<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>视频播放</title> </head> <body> <video src="video/peacock.mp4" controls="" width="400" loop="" poster="images/preview.png" preload="metadata"> 您的浏览器暂不支持该视频格式，建议升级或更换浏览器 </video> </body> </html>;任务分析 本例设置了视频的宽度，没有设置高度，系统会按照画面比例自动调整高度到合适的大小，如果同时设置了宽度和高度，又和视频原来的宽高比例不同，系统将在所设置的宽高内保持画面原来的比例，其它区域留白； loop=""设置了循环播放； poster="images/preview.png"设置了预览的图片，最好选用宽高比例和视频的比例相同的图片，以免有留白区域； preload="metadata"设置只加载视频文件的基本信息，如视频的大小、时长。;有些低版本的浏览器对某个视频格式并不支持，怎样使所有的用户尽可能的都看到视频呢？我们使用source元素解决浏览器的兼容问题，source元素是video元素或audio元素的子元素，可以指定多个文件来源，因此能够解决兼容问题，如果子元素中使用了source元素，那么video元素或audio元素就不可以同时设置src属性，否则产生冲突。 任务1和任务2中的视频能在IE9+、Chrome、Safari中显示，却不能在低版本的Firefox、Opera中显示，以任务2为例，下面任务3将解决这个问题。;任务3. 解决浏览器兼容问题——source元素的使用。;任务分析 video后面的src属性要去掉； 利用source元素引入了三种视频格式的文件，这三个视频文件内容相同，只是格式不同，在制作网页之前，先要把这三个文件准备好，浏览器会按照代码顺序依次寻找所支持的格式文件，只要遇到能够支持的就进行显示，后面的就

    您可能关注的文档

    文档评论（0）

    vip
    allen734901 + 关注
    实名认证
    内容提供者

    知识共享

    咨询Ta 进入空间

    1亿VIP精品文档

    更多 >

    相关文档

    更多 >

    最近下载

    相关课程推荐