html5播放器卡住,格式工厂音频mp3「html5技巧」那些卡顿到打不开的H5，

随着HTML5的发展，诸如快闪、3D、全景、交互视频等酷炫的效果都开始逐渐应用在在移动端H5中，这也导致在H5中，许多刚入门的H5小白，甚至多数老鸟都会碰到这样那样的问题：

H5卡的要死？H5一直闪退？H5老打不开？

H5的加载时间超过5秒，就会有74%的用户离开页面。而卡顿、闪退等问题，极大可能导致用户体验不佳，最终流失。

所以除了核心的策划与创意，如何优化一支H5，使页面与交互更加流畅，给用户创造更良好的用户体验，对于H5项目的成功来说是至关重要滴。格式工厂音频mp3

H5一般多大

一般来说，一支H5的大小最好控制在10m以内。

当然，这是为了适配绝大多数手机而言的，如果里面有嵌入本地视频的话，则可以提升到20m以上。如江苏卫视某综艺节目的宣传H5案例，就是一支交互型的视频H5，近两分钟的视频大小在20m左右。

H5如何优化

1、压缩图片

在制作H5之前，切记切记要把各种素材压缩一遍。

JPG/JPEG：可选用大尺寸&大有损压缩比的文件，这样去除了图片中的部分信息和色彩，从而得到更小的图片文件。格式工厂音频mp3

PNG：多彩图片的话可用PNG-24格式，低彩图片的话推荐PNG-8格式，最大限度保证图片质量(p.s.留白部分必须裁掉先！)

2、压缩音频

目前意派Epub360可上传MP3格式的音频文件，WMA、WAV格式直接转成MP3即可，背景音乐一般500k左右，其他音频音效50k左右。

通常一支H5的停留时间不会太长，所以背景音乐的时长可以尽量压缩在1分钟之内，有些上传了2-3m音乐的派友可以切掉一半了...

另外，关于音量大小之类的，可以提前用的音频软件(如Au)调整完毕，再进行上传。

3、压缩视频

目前意派Epub360可上传H.264的MP4格式的视频文件，其他格式直接转成MP4即可，上传视频并没有限制，但是一般都不应超过20m。

p.s.关于压缩工具，推荐专门用来压缩图片的tinypng；压缩音视频的格式工厂，绝对的万能工具；最后就是adobe全家桶什么滴设计工具，不用说，派友们都早就已经下好了吧！

4、巧用预先加载

如果H5作品里素材实在太大，无法把当前页面的图片素材一次加载到位、这样就容易碰到卡顿缺图或者图片没有加载完整的情况，给用户带来不甚满意的体验。

在意派Epub360里，可以采用预加载页面的触发动作，在合适的时机，对后续页面的素材预先加载，确保H5播放的体验完整性。

5、尽量少的页面

页面数量也需要合理控制住，一般都在10-20页左右。小编也曾碰到过有个别派友直接做了哗哗地100页电子杂志，移动端基本是没可能打得开这个H5...

------

关注意派号：epub360，获取更多H5设计、案例、资讯

本文来自电脑杂谈，转载请注明本文网址：

http://www.pc-fly.com/a/ruanjian/article-72007-1.html