没有合适的资源?快使用搜索试试~ 我知道了~
首页HTML5媒体入门:编码、元素与音频处理详解
"《初级HTML5媒体》第二版是一本全面介绍HTML5音频和视频的指南。该书涵盖了HTML5标准如何让浏览器支持原生的音频和视频元素,极大地简化了网页开发者在发布多媒体内容时的工作,包括将其融入网页布局、使用CSS进行样式定制、在移动设备上观看以及通过Canvas或音频滤波器图进行交互。书中特别关注了媒体元素的无障碍性,提供了一致处理媒体资源替代版本的技术。 本书内容深入到浏览器对媒体元素支持的标记语言,包括浏览器提供的默认用户界面和用于控制其行为的JavaScript API。作者指导读者如何处理H.264、WebM和Ogg Theora编码格式,这些都是现代视频的重要组成部分。此外,还介绍了新兴的Web Audio API,这是一个强大的硬件加速音频处理标准,使得专业级别的音频信号在浏览器中的操作变得可能,以前这主要局限于音频专业人士的领域。 章节内容涵盖了视频编码的基本艺术,强调了创建MPEG4、WebM和Ogg文件时的主观决策过程,这些决策直接影响视频和音频的质量和播放性能。为了确保流畅的播放体验,理解文件创建流程及其关键决策至关重要。此外,书中还涉及使用HTML5视频和Canvas技术,以及通过Web Audio API对音频进行高级操作,帮助读者实现丰富的多媒体体验。 《初级HTML5媒体》不仅提供了实用的编码技巧,还包括了对现代浏览器技术的深入解析,是前端开发者和Web开发人员提升HTML5多媒体能力的宝贵资源。"
资源详情
资源推荐
CHAPTER 1 ■ ENCODING VIDEO
13
• Framerate: If you leave this section blank, the encoding video’s framerate will
be used. A common framerate is 30 frames per second (fps). If there is not a lot
of motion in the video, reducing the fps to 15 will not have a noticeable effect on
playback quality. We enter 30 as the value, since our example video is of road traffic
and thus has a lot of motion.
• Aspect Ratio: If the video is standard definition, enter 4:3. If it is HD, enter 16:9. Our
example video is 4:3.
• Bitrate: In many respects this is where the “rubber hits the road.” There is no
magic number here but studies have shown the average US broadband speed is
6.6 megabits per second (Mbps). Don’t become attached to that number because
those same studies have shown the average mobile broadband speed is 2.7 Mbps.
If you are streaming HTML5 video, you may want to target the lowest common
denominator, so a good place to start is 2,000. Even then this choice could be
dangerous. Bitrate for any video is the sum of the audio and video bitrates. If you
decide to use 2,700 Kbps for the video and 700 Kbps for the audio you can pretty well
guarantee that the user experience on a mobile device will involve video that starts
and stops. In our case, because the physical dimensions of the video are small, we
decided to use 1,200 Kbps for the video track which leaves plenty of bandwidth for
the audio track.
• Quality: Your choices are any number between 0 and 10. The choice affects file size
and image quality. If the video was shot using your smartphone, a value between
4 and 6 will work. Save 10 for high-quality studio productions. Our video was shot
using a Flip video camera so we chose 6 for our quality setting.
• Keyframe interval: This is the time interval between two full-quality video frames.
All frames in between will just be difference frames to the previous full video
frame, thus providing for good compression. However, difference frames cannot be
accessed when seeking, since they cannot be decoded by themselves. By default,
Firefogg uses 64 frames as a keyframe interval, which—at 30 fps—means you can
basically seek to a 2-sec resolution. That should be acceptable for almost all uses.
Leave this blank and let the software do the work using its default setting.
• 2 pass encoding: We always select this option. This feature, also called “2 pass
variable bitrate encoding,” always improves the output quality. What it does is to
hunt through the video on its first pass looking for abrupt changes between the
frames. The second pass does the actual encoding and will make sure to place
full-quality keyframes where abrupt changes happen. This avoids difference frames
being created across these boundaries, which would obviously be of poor quality.
For example, assume the video subject is a car race. The cars will zip by for a few
seconds and then there is nothing more than spectators and an empty track. The first
pass catches and notes these two transitions. The second pass will reset the keyframe
after the cars have zoomed through the frame and allow for a lower bitrate in the
shot that has less motion.
• Denoise: This filter will attempt to smooth out any artifacts found in the input video.
We won’t worry about this option.
• Deinterlace: Select this only if you are using a clip prepared for broadcast. We won’t
worry about this option.
CHAPTER 1 ■ ENCODING VIDEO
14
The audio choices, as you may have noticed, are a bit limited. Our video contains nothing more than the
noise of the traffic on the street and the usual background street noise. With this in mind, we weren’t terribly
concerned with the audio quality. Still some choices had to be made.
• Quality: This slider is a bit deceiving because it actually sets the audio bitrate. We
chose a value of 6. If audio quality is of supreme importance select 10. If it is simply
unimportant background noise a value of 1 will do. Other than that, only trial and
error will help you get the number set to your satisfaction.
• Channels: Your choices are stereo and mono. We choose mono because of the
nature of the audio. If this file were professionally produced and only destined for
desktop playback then stereo would be the logical choice. Also keep in mind that
choosing stereo will increase the file size.
• Sample rate: The three choices presented determine the accuracy of the audio file. If
accuracy is a prime consideration then 48 kHz or 44.1 kHz are the logical choices. We
chose 22 kHz since our audio is not that important to be reproduced exactly.
4. With our choices made we clicked the Encode button. You will see the Progress
Bar twice as it completes its two passes and the video, Figure1-7, will launch in
the Firefox browser.
Figure 1-7. The Ogg Video file plays in the Firefox browser
CHAPTER 1 ■ ENCODING VIDEO
15
The previous options are almost identical when encoding WebM. This is because these are rather
typical options of any video encoder. There are many more options that you can use in Firefogg when using
the Firefogg Javascript API (application programming interface) (see www.firefogg.org/dev/). It allows you
to include the encoding via the Firefogg Firefox extension in your own Web application.
COMpreSSION SCOre CarD FOr FIreFOGG
• Original file: 190.3 MB.
• WebM (VP8/Vorbis): 14.4 MB.
• WebM (VP9.Opus): 7.6 MB.
• Ogg Theora (default settings): 11.4 MB.
• Ogg Theora (our custom encode): 4.2 MB.
Encoding an MP4 File with the Adobe Media Encoder CC
Encoding an MP4 file involves many of the same decisions around bitrate, audio quality, and so on, as those
encountered in the previous example. Though there are a number of products out there that will encode an
.mp4, ranging in complexity from video editors to Miro—they are all remarkably similar in that you will be
asked to make the same decisions regardless of the product. In this example we are using the Adobe Media
Encoder to present those decisions. As well, the Media Encoder adds another degree of complexity to the
process outlined to this point in the chapter. So let’s get started.
1. When the Media Encoder launches, drag your video into the queue area on the
left, as shown in Figure1-8. Over on the right side of the interface are a number
of preset encoding options. We tend to ignore them, preferring, instead, to set
our own values rather than use ones that may or may not fit our intention.
CHAPTER 1 ■ ENCODING VIDEO
17
The left side of the dialog box allows you to set the In and Out points of the video and not much else.
The right side of the dialog box is where you make some fundamental decisions.
3. The first decision is which codec to use. We clicked the format pop-down and
selected the H.264 codec from the list. You don’t need to select a preset but make
sure the output name includes the .mp4 extension.
■ Note Any output created by the Adobe Media Encoder is placed in the same folder as the source file.
4. Select Export Video and Export Audio if they are not selected. Leaving these
unchecked will have the obvious consequences.
5. Click the Video tab to edit Basic Video Settings. This is where we set the values
for the video part of the MP4 container.
6. Clicking a check box will allow you to change the values in the Basic Video
Settings area. If you do need to change the physical dimensions, be sure the
chain link is selected and the width and height values will change proportionally.
7. Click the check mark beside “profile” and, as pointed out earlier in this chapter,
select the “High” profile, which is used for Web video. If our target included iOS
devices, then “Baseline” would be the profile choice.
Figure 1-9. The Export Settings dialog box is where the magic happens
剩余294页未读,继续阅读
南风以南
- 粉丝: 430
- 资源: 40
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 前端面试必问:真实项目经验大揭秘
- 永磁同步电机二阶自抗扰神经网络控制技术与实践
- 基于HAL库的LoRa通讯与SHT30温湿度测量项目
- avaWeb-mast推荐系统开发实战指南
- 慧鱼SolidWorks零件模型库:设计与创新的强大工具
- MATLAB实现稀疏傅里叶变换(SFFT)代码及测试
- ChatGPT联网模式亮相,体验智能压缩技术.zip
- 掌握进程保护的HOOK API技术
- 基于.Net的日用品网站开发:设计、实现与分析
- MyBatis-Spring 1.3.2版本下载指南
- 开源全能媒体播放器:小戴媒体播放器2 5.1-3
- 华为eNSP参考文档:DHCP与VRP操作指南
- SpringMyBatis实现疫苗接种预约系统
- VHDL实现倒车雷达系统源码免费提供
- 掌握软件测评师考试要点:历年真题解析
- 轻松下载微信视频号内容的新工具介绍
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功