;

mia】提问: 在iH5当中,音频和视频要怎么设置~

在H5当中,音频和视频要怎么设置~


2 个回答

mia

视频

视频支持的格式:H.264 MP4,大小控制在50M内

视频在ios系统和安卓系统的H5当中有较大区别,如下:

ios系统

自动播放:首页视频可以,非首页视频不可以

隐藏控制条:默认无进度条

翻页:设置视频结束条跳转页面

安卓系统

自动播放:不可以,只能通过点击触发播放

隐藏控制条:设置微信全屏属性

翻页:设置视频结束、退出微信全屏并跳转页面


在H5中使用视频进行交互时,视频最麻烦的就在于安卓手机对于视频的支持问题。在部分安卓手机,由于QQ浏览器强制使用了全屏视频的行为,这个是无法从根本上去解决的,但还是可以通过以下的方法去解决:

1、使用视频的“微信全屏”

微信的安卓客户端,提供了一种新的视频播放器,只要打开了视频的“微信全屏”属性,就可以在微信中调用微信的视频播放器了。

QQ截图20170701000953.png

(注意,这个属性对ios没有作用,因为微信的ios客户端是没有安装这个播放器的,但视频在ios中是不存在这些问题的,其交互和PC端的体验是一样的。)

视频的常用场景:

(1)全屏视频播放,并跳转页面

案例预览:

视频二维码.png

案例下载链接:

http://www.ih5.cn/editor3/app/workCopy/5739170

由于安卓系统中,视频无法自动播放,因此可以截取视频开始的图片来“伪装”成视频,在图片上添加事件,点击-视频-播放,如图:

视频2.png

视频结束后,设置微信退出全屏,并跳转页面2,如图:

视频3.png


(2)非全屏视频,并在视频下添加其它内容

1497478025933508.png

案例下载链接:

http://www.ih5.cn/editor3/app/workCopy/5594321

以上案例中,我们的视频原本是640*360的,但是为了使用这个微信全屏的效果,我们在视频下面加了一些白色空区域,让视频变成了640*1136, 详细的尺寸大家可以根据手机来调整。然后在视频的白色区域上,加了一个容器来制作滚动效果。


2、使用图片序列代替视频

图片序列的好处是在各浏览器中的体验非常统一,可以使用图片序列和音频配合的方法来模拟视频。同时,图片序列的播放方法非常灵活,编辑起来也和图片类似,比较方便。


但是相对视频,图片序列耗费的资源会比较多。如果必须使用图片序列,建议将图片序列放在画布中,画布中的图片序列,对本地资源的消耗会比较少,播放会相对流畅。同时,开启资源的预加载,3.0版本可以制作基于案例和基于页面的预加载,详见这里。


mia

音频

音频支持的格式:mp3,大小控制在50M以内

非微信浏览器

在手机浏览器中,由于手机系统和浏览器的限制,据说,这样的限制是为了防止用户在打开某个网页的时候不小心耗费太多的流量和手机内存,因此音频是无法自动播放。可通过用户触发事件(点击、手指按下、手指松开等事件)触发音频,而非用户触发的事件(如时间轴结束、动效结束等)无法触发播放音频。

 

微信浏览器

由于微信app内部浏览器提供一种功能,在这些浏览器中的音频能自动播放;也可通过时间轴或计数器等非用户触发事件触发音频播放。

而在iH5中,我们提供了特定的目标动作“播放(使用微信接口)”来解决音频的问题。

如图:

音频.png


音频较常用的场景:

不同的页面(其他对象)切换时,播放不同的背景音乐(音效)

案例预览:

音频1.png

案例下载地址:

http://www.ih5.cn/editor3/app/workCopy/5739176

该案例中有2个页面,且切换页面时播放不同的音乐;而在页面2当中,可通过点击不同的按钮切换音乐。

案例当中的音频触发事件:页面显示时、点击。

同样的道理,大家也可选择合适的事件(如点击、手指按下、手指松开、时间轴结束、动效结束等)去切换音频。

学习地图