最基础的前端就是HTML+CSS+Javascript。掌握这三项技术算是入门，但也只是入门而已。现在前端开发的定义远不止于此。前端小课堂（HTML/CSS/JS），本着提高技术水平，夯实基础知识的中心思想，开课（每周四）。媒体包括文字、图片（）、声音（）、视频（）等，网络上可以实现的功能越来越多，表现形式也越来越多并且更加丰富。介绍性内容图像标签音频标签元素用于在网络上下文中播放音频。可用于复杂媒体的隐藏目标，或用户控制音频播放的控制器。可以从JavaScriptHTMLAudioElement对象访问。视频标签元素用于在网络上下文中播放视频。可以简单地用于渲染视频，可以作为流式视频的目标。也可用于连接媒体API和其他HTML、DOMAPI，例如（用于抓取当前帧、调整编辑）可以通过JavaScript访问HTMLVideoElement对象。字幕标签。兼容感人，就不多说了。效果地址元素可以放置在或元素内，以在播放媒体时提供对WebVTT格式的字幕或标题轨道的引用。可以通过JavaScriptHTMLTrackElement对象访问。常用图片类型对比后缀支持透明矢量图支持压缩支持动画支持连续支持隔行扫描jpg××√×png√×√×gif××√√bmp××××webp××√×图片所有类型jpg联合照片专家Group（外文简称JPEG，外文全称：JointPhotographicExpertGroup）是一种有损压缩格式，可以在很小的存储空间内压缩图像。图像中重复或不重要的数据会丢失，因此很容易造成图像数据丢失。损害。pngPortableNetworkGraphics（外文简称PNG，外文全称：PortableNetworkGraphics）PNG支持高级无损压缩。PNG支持alpha通道透明度。PNG支持隔行扫描。bmp位图，windows系统的绘图工具，以bmp格式保存。是一种与硬件设备无关，应用广泛的图像文件格式。它使用位图存储格式，除了可选的图像深度外不支持任何压缩，因此BMP文件占用大量空间。BMP文件的图像深度可以是lbit、4bit、8bit和24bit。BMP文件存储数据时，图像是从左到右，从下到上扫描的。gifGraphicsInterchangeFormat（外文简称：GIF，外文全称：GraphicsInterchangeFormat）GIF文件数据是一种基于LZW算法的连续色调无损压缩格式。因此，GIF的图像深度从lbit到8bit不等，最多支持256色的图像。GIF格式的另一个特点是它可以在一个GIF文件中存储多个彩色图像。如果将存储在一个文件中的多幅图像的数据逐一读出并显示在屏幕上，就可以构成最简单的格式。动画片。此外，GIF不支持alpha透明通道。webp（发音为weppy）是谷歌开发的一种图像格式，用于加快图像的加载速度。图片压缩体积仅为JPEG的2/3左右，节省了大量的服务器宽带资源和数据空间。同时提供有损压缩和无损压缩，源自图像编码格式VP8。ico是Windows的一种图标文件格式，可以存储单一图案、多尺寸、多色板的图标文件。svg当前网页首选的矢量图形格式。图片容量小，图片放大不失真，支持透明背景和半透明色，图片边缘平滑。TPG是腾讯音视频实验室基于AVS2内核自主研发的。与其他常用图片格式相比，在相同图片质量下，TPG图片体积比PNG小50%以上，比GIF小90%以上，比JPG/JPEG小40%以上。与谷歌最近推出的WebP格式相比，TPG文件大小可以减少近30%。PCXPCX是许多基于Windows的程序和基于MS-DOS的程序的标准格式。PCX支持内部压缩。PCX不支持网页浏览器TIF标签图像文件格式（中文简称TIF，外文简称TIFF，外文全称：TagImageFileFormat）TGA标签图形（外文全称：TaggedGraphics）TGA结构比较简单，属于是一种图形、图像数据的通用格式，在多媒体领域产生了重大影响，是将计算机生成的图像转换为电视的首选格式。EXIFExchangeableImageFileFormat（外文简称EXIF，外文全称：EXchangeableImagefileFormat）。除了保存图像数据外，它还可以存储拍摄日期、光圈、快门速度和闪光数据等曝光数据，以及附带信息和小尺寸图像。fpxflashphoto（外文简称FPX，外文全称：kodakFlashPiX）psd（Photoshop图像处理软件专用文件格式）可以支持图层、通道、蒙版和不同颜色模式等多种图像特征，是一种非压缩原始文件保存格式。扫描仪不能直接生成这种格式的文件。PSD文件有时容量很大，但由于可以保留所有原始信息，所以对于图像处理中未完成的图像，将图像保存为PSD格式是最佳选择。CDRCorelDRAW的专用图形文件格式PCDPhotoCD（外文简称：PCD，外文全称：kodakPhotoCD）DXF图纸交换格式（外文简称：DXF，外文全称：DrawingeXchangeFormat）AutoCADUFO中的图形文件格式UleadPhotolmapctDedicatedimageformatEPSEncapsulatedPageDescriptionLanguage（外文简称：EPS，外文全称：EncapsulatedPostScript）AIAdob??e'sILLUSTRATOR输出格式HDRIHighDynamicRangeImaging（外文简称：HDRI，外文全称：HighDynamicRangeImaging)RAWRAW文件包含原始图片文件在传感器生成之后，进入相机图像处理器之前的所有照片信息。WMF（WindowsMetafileFormat）是Windows中常见的图元文件格式，属于矢量文件格式。它具有短文件和程式化模式的特点。整张图往往由各种独立成分拼接而成，其图形往往比较粗糙。FlicFLIC是FLC和FLI的统称：FLI是基于320×200分辨率的原始动画文件格式，而FLC采用了更高效的数据压缩技术，因此比FLI有更高的压缩比，其分辨率也有A很多都得到了改善。EMF（EnhancedMetafile）是微软为弥补使用WMF的不足而开发的Windows32位扩展图元文件格式，也是一种矢量文件格式。音频HTMLAudioElement接口提供了一个访问元素的接口。继承了HTMLMediaElement接口。label-propertieslabel-properties-测试地址自动播放默认值为false。如果为真，它将自动播放。自动播放在移动环境中不起作用。控件默认值为false。如果为true将显示一个控制面板（播放、暂停、进度、声音）。loop默认值为false。如果为真，它将循环播放。静音默认为false。如果静音，它将静音播放。preload的默认值是由浏览器定义的（不同的浏览器会选择自己的默认值），即使规范建议将其设置为元数据。none：表示用户可以不播放音频，或者服务器想节省带宽；换句话说，音频不会被缓存；metadata：表示即使用户可能不播放音频，获取元数据（如音频长度）仍然是必要的。auto：表示用户可以播放音频；换句话说，必要时将加载整个音频，即使用户不希望如此。对象属性currentTime当前播放时间，以秒为单位。分配导致媒体跳转到新时间。duration媒体的总长度（以秒为单位），如果媒体不可用则为0。如果媒体可用但持续时间未知，则值为NAN。如果媒体作为流传输并且没有预定长度，则该值为Inf。volumevolumeplaybackRate用于设置或获取当前媒体文件对象的播放速率方法pause()pauseplay()play事件loadstart加载过程已经开始，浏览器正在连接媒体。durationchange当返回准确的时长时，会触发durationchange，我们可以快速显示音频播放时间。loadedmetadata当第一个音频文件字节数据到达时，会触发loadeddata事件。尽管播放头已就位，但尚未准备好播放。canplay可以播放媒体文件时触发canplay事件。canplaythrough当音频文件可以从头到尾播放时触发。这种情况包括音频文件从头到尾都加载完了，或者浏览器认为可以按时下载，缓冲不会停止。timeupdate每次currentTime属性的值更改时都会触发timeupdate事件。volumechange音量变化时触发。包括静音行为。ratechange当播放速率改变时，会被触发。播放事件触发的播放状态必须是从暂停到播放。暂停当状态从播放变为暂停时触发此事件。ended当整个音频文件播放完毕时触发媒体事件。加载顺序如下：loadstart→durationchange→loadedmetadata→loadeddata→progress→canplay→canplaythroughvideoHTMLVideoElement接口提供了用于操作视频对象的特殊属性和方法。继承了HTMLMediaElement接口。标签属性和音频标签属性一样，但是会有一些特殊的。海报（视频标签）封面图片的网址。默认是第一帧的宽度和高度。WebRTCAPIWebRTC（WebReal-TimeCommunications）是一种实时通信技术，允许Web应用程序或站点建立点对点（Peer-to-Peer）连接，实现视频流和（或）音频流的传输或其他任意数据。WebRTC中包含的这些标准使用户无需安装任何插件或第三方软件即可创建点对点（Peer-to-Peer）数据共享和电话会议。webAudio一个简单而典型的web音频过程如下：创建音频上下文在音频上下文中创建源——例如、振荡器、流创建效果节点，例如混响、双二阶、声像和压缩到音频选择一个目的地，例如您的系统扬声器，将源连接到效果器，并将效果输出到目的地。MediaStreamingAPIMediaStreamingAPI（通常称为MediaStreamingAPI或StreamingAPI）描述了音频或视频数据流的WebRTC的一部分。此API基于操作表示音频或视频相关数据流的MediaStream对象。通常MediaStrea创建为简单的URL字符串，可用于引用存储在DOM中的数据文件，或使用window.URL.createObjectURL()创建的Blob对象。MediaStream包含零个或多个MediaStreamTrack对象，代表各种音频和视频轨道。一个MediaStreamTrack可能有一个或多个通道。声道表示媒体流的最小单元，例如对应于相应扬声器的音频信号，例如立体声声道中的左声道或右声道。MediaStream对象只有一个输入和输出。getUserMedia()创建的MediaStream对象是通过用户的摄像头和麦克风在本地获取的。非本机MediaStream表示媒体元素，例如元素或元素，通常是源自网络的流，以及通过WebRTCPeerConnectionAPI或使用WebAudioAPI获得的MediaStreamAudioSourceNode元素。MediaStream对象的输出可以链接到用户。它可以是媒体元素，如或、WebRTCPeerConnectionAPI或WebAudioAPIMediaStreamAudioDestinationNode。微信公众号：前端立农参考Web媒体技术-MDNWeb_Audio_API媒体流处理APIWebRTCAPIHTML音频基础API完全指南
前端实训-中级阶段(17)-多媒体API(2019-09-19期)相关文章
