分享

在网页中插入音视频

 惊讶空间 2011-07-29
第四周(1) 在网页中插入音视频
教学时间 2009-9-21
教学课时 2
教案序号 9
教学目标

1、掌握在网页中插入音视频的技术
2、掌握音视频的录制、转换、分割

教学过程:

素材下载

一、 音频处理技术 教程1下载 教程2下载

  1. 了解常用的音频格式
    WAV格式:未压缩的声音格式,文件体积与声音采样率有关,一般文件都很大
    WMA格式:微软专用的声音格式,可用Windows Media Player播放,压缩率较高
    MP3格式:压缩率较高,网上很流行
    RM格式:Real公司的专用声音格式,压缩率较高,以前网上较流行
    MID格式:只能保存乐器的声音,不能录其它声音,文件超小。一般用于背景音乐
    虽然音频格式很多,常用的播放器有二个,微软公司的媒体播放器(Windows Media Player)可以放除RM格式以外的大多数音频文件;Real公司的RealPlayer或RealOne可以放除WMA格式以外的大多数音频文件。
  2. 在网页中插入音频文件
    ⑴如何在网页中插入背景音乐
     教程下载 实例
      在文件头<head>..</head>之间插入<bgsound src="音乐文件名" loop="-1">语句即可在网页中插入背景音乐,支持wma、mp3、mid、wav格式不支持rm格式,src中放音乐的文件名,loop决定音乐播放的次数,-1表示无限数播放。一般推荐使用mid格式的音乐文件,因为文件比较小,下载比较快。
      用<bgsound>制作的背景音乐有二个特点:
      a、当窗口最小化时,声音就没了
      b、<bgsound>是微软的私有网页标记,只被IE所支持,其它浏览器可能不支持
    ⑵如何在网页中控制音乐的播放 教程下载
      在网页中控制音乐文件的播放使用<embed src="音乐文件名" autostart="false" width="300" height="45" type="audio/x-pn-realaudio-plugin"></embed>标记,支持wma、rm、mp3、mid、wav等全部格式,如果放rm文件,则必须在客户机的电脑中安排realplayer或realone。不同的电脑,可能显示的播放器的界面有所不同。如果在本机显示含有<embed>标记的网页,可能会有一些安全性的警告提示。

二、音频处理软件的应用

  1. 用系统自带的录音机进行简单的录音

    用windows自带的“开始”-“程序”-“附件”-“娱乐”-“录音机”录一个简单的音乐,如下图:

    此录音机的特点:
    1、操作简单,开始只要按红色的按钮,结束也只要按红色的按钮。
    2、一次性只能录60秒。
    3、生成的文件是WAV格式的音乐文件,所以文件比较大

  2. 音频的录制、转换、分割
    用advanced mp3_wma recorder.rar进行音频文件的录制
    用ha_mp3splitterjoiner_v2.90.3MP3.rar进行MP3文件的分割

三、视频处理技术

  1. 了解常用的视频格式
    WMV格式:微软公司的专用视频格式,压缩率高,用媒体播放器播放
    ASF格式:微软公司的专用流视频格式,压缩率高,用媒体播放器播放
    RM格式:REAL公司的专用视频格式,压缩率高,用Realplayer或Realone播放
    RMVB格式:RM的改进格式,压缩率高,图像清晰,用RealPlyer或Realone播放
    AVI格式:由于AVI格式使用的压缩方法没有统一标准,可能还要安装专门的解码器后才能播放,Real公司的微软公司的播放器均可播放
    MPG格式:主要指MPG-1格式,就是VCD格式,可以使用微软或REAL公司的播放器均可播放
    Flash格式:流行的FLASH动画,支持交互,用IE可直接播放
  2. 掌握视频的转换、分割
    用RealEditor进行rm视频文件的分割、合并 
    用Avi_MPG_WMV_ASF分割软件进行视频文件的分割
    用Easy_RealMedia Producer软件把其它格式的视频文件转换为RM、RMVB格式
  3. 在网页中插入视频文件
    支持RM、RMVB、WMV、ASF、AVI、MPG等所有格式的播放,用类似<EMBED src=video/5.rmvb width=400 height=300 type=audio/x-pn-realaudio-plugin autostart="false" controls="IMAGEWINDOW,ControlPanel,StatusBar"></EMBED>的语句即可
  4. 在网页中插入FLASH文件
    插入FLASH动画的方法:a、先把网页保存一遍 b、单击“插入-媒体-FLASH”即可(注意文件名必须不是汉字)

四、视频处理软件介绍

1、AVI/MPEG/ASF/WMV Splitter 是一个可以帮助你分离,切割,修整大型的AVI,MPEG,ASF或者WMV文件的视频转换工具,程序内置播放器,你可以按照时间或者将你喜欢的片断很轻松的截取下来,也可以帮助你将大型的多媒体视频文件分割为一个个小的多媒体视频文件,支持AVI,DIVX,MPEG-1,MPEG-2,MPEG-4,ASF,WMV,WMA等多种常用的视频文件格式,支持超大型视频文件,最高可以达到2G,程序执行速度快,分割后的视频文件没有图像失真,界面友好。

五、设置滚动条
  网页滚动条实例
  网页滚动条本身就是浏览器的一部分,使用它可以方便浏览较大的网页,但是千篇一律的它经常会给整体页面效果拖了不少后腿,我们能不能改变它灰灰的样子呢?能!俗话说:“只有你想不到的,没有做不到的。”
  给滚动条换色
  几乎所有网页的滚动条都是默认的灰色,如果把它的颜色换换,来点另类的,相信一定会使网页更加靓丽。我们只要在网页代码 之间插入下面的代码,即可随心所欲地更改颜色了。

<style>
body {SCROLLBAR-FACE-COLOR:#3333FF;(立体滚动条凸出部分的颜色)
SCROLLBAR-HIGHLIGHT-COLOR:#505050;(滚动条空白部分的颜色)
SCROLLBAR-SHADOW-COLOR:#fc2400;(立体滚动条阴影的颜色)
SCROLLBAR-ARROW-COLOR:#666666;(上下按钮上三角箭头的颜色)
SCROLLBAR-BASE-COLOR:#333333; (滚动条的基本颜色)
SCROLLBAR-DARK-SHADOW-COLOR:#b4fc48} (立体滚动条强阴影的颜色)
</style>
后面的16位颜色值你可以随意更改,括号内是解释说明。
请做出实例

六、网页特效-网页切换效果
   先请大家看效果:茶网
   在这个茶网中,大家可以看到网页之间的切换类似与ppt中的幻灯片切换效果,这样给网页增加了美观及可看性,这个效果大家只要用到以下两句话,并把这两句话放到<head></head>之间:
  设定进入页面时的特殊效果
    <meta http-equiv="Page-Enter" contect="revealTrans(duration=1,transtion=12)">
  设定离开页面时的特殊效果
    <meta http-equiv="Page-Exit" contect="revealTrans(duration=1,transtion=12)">
Duration的值为网页动态过渡的时间,单位为秒。
Transition是过渡方式,它的值为0到23,分别对应24种过渡方式。如下:
0 盒状收缩
1 盒状放射
2 圆形收缩
3 圆形放射
4 由下往上
5 由上往下
6 从左至右
7 从右至左
8 垂直百叶窗
9 水平百叶窗
10 水平格状百叶窗
11垂直格状百叶窗
12 随意溶解
13从左右两端向中间展开
14从中间向左右两端展开
15从上下两端向中间展开
16从中间向上下两端展开
17 从右上角向左下角展开
18 从右下角向左上角展开
19 从左上角向右下角展开
20 从左下角向右上角展开
21 水平线状展开
22 垂直线状展开
23 随机产生一种过渡方式

  希望大家在课外多去了解下这些网页特效,把一些实用的网页特效应用到自己的网站中来。

七、作业:

1、完成下列网页——sina科技时代,并设置滚动条颜色和网页切换效果,完成后链接到作业本第四周。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多