文章频道 - 实用技术贴：手把手教你打造淘宝、腾讯这样的爆款H5 : 经理人分享
文章频道 - 实用技术贴：手把手教你打造淘宝、腾讯这样的爆款H5
在一个H5刷爆朋友圈之前，你得先制作出一个可以刷的爆朋友圈的H5！来源：iH5原标题《淘宝、腾讯H5如何欺骗你的眼睛？你可能没看出大品牌的这些障眼法…》6月是国内现象级H5爆发的时节，也是广告人利用智慧“造假”以实现创意的高峰期，HTML5相关行业的都在转发淘宝造物节的伪VR场景，“外行”的在分享腾讯Next Idea的伪网页动画，最多的疑问就是“到底是怎么做的？！”很多人不知道，造物节其实出了两个H5，除了VR全景是“造”出来的，还有一个三屏互动视频的案例也耍了点障眼法；至于腾讯的“穿越故宫来看你”，策划创意值得借鉴，技术门槛却是最低的，更暗藏着微信不得不提的潜在“行规”。为什么它们能成功欺骗我们的眼睛？怎么用iH5.cn做出这么酷炫的H5？它们又标志着什么发展趋势？1.“假装它是3D”《ZAO》，制作团队：VML扫描二维码，了解更多！（数英网 App 用户需点击放大二维码后，长按识别）淘宝这个H5在业内太火了，通过全景图、分层运动的方式，在网页中构造出动漫VR场景，基本上看过都赞不绝口。因为它在朋友圈的火爆，顺带还宣传了背景音乐——华晨宇的新歌《造物者》。然而，它没有真的构建出3D场景，却带来一场近似的视觉盛宴，究竟耍了什么花招？创作分析（1）360度全景图的搭建淘宝H5的全景图背景淘宝H5分为背景层、前景层、导航菜单三个部分，背景的设计便是实现360度全景的关键。上面是导出淘宝H5的原始素材后进行拼接，还原出来的背景——相信你一眼就能看出一张背景居然被切成了这么多块！淘宝H5的动态效果是的，而且背景层共有两层：靠后的渐变图片基本固定，靠前的是20张带有透明像素的切片，宽度均为129像素。模拟H5的滑动变形过程因为左右边缘的画面连贯，这20张切片可以通过旋转拼接的方式围成一个环形；当我们在手机上上下、左右触摸屏幕时，就是看着这20张切片不停地轮播、变形。（2）前景的分层搭建部分分层素材的分组示例为了让场景变换效果更真实，制作团队还搭建了多层前景，并通过不同层素材的人物大小比例、物体运动速度的区分，让人眼感受出不同层的远近。不过对于大部分门外汉来说，就算懂得怎么用Photoshop切图，没能耐也没工夫堆砌出这么复杂的玩意儿，更拿不出几十万请VML制作，所以还是乖乖用点旁门左道吧！VR场景嵌入方法既然淘宝H5虚构出的3D场景本质上就是全景图，那么我们只需要找一个全景场景制作平台就行，比如720云。使用过程非常简单，上传一张全景图就能自动生成全景场景——以下是我用淘宝造物节全景图直接生成的效果：全景图导入720云的效果把内容嵌入H5也非常简单，使用iH5的“网页”工具，添加新的网页并设置页面大小，在资源位置填写全景场景的网页地址就行。比如下面万达的VR视频、天津美院的VR场景，都是在iH5嵌入第三方全景制作平台网页，自己设计加载页、导航菜单等完成的。嵌入iH5的万达VR视频嵌入iH5的天津美院VR场景2.“假装它是视频”《淘宝造物节》，制作团队：VML扫描二维码，了解更多！（数英网 App 用户需点击放大二维码后，长按识别）“60秒内邀2位好友扫码，用三分之一价格，享百分百造物节。”淘宝三屏互动H5的创意，更偏向于活动策划，限时让好友完成扫码，三部手机就会同时播放三段内容不同、但非常相似的“视频”。跨屏互动实现并不复杂，熟悉iH5的人，可能还看过去年我们用八个屏幕召唤“神龙”的案例。淘宝H5的三个伪视频但这里需要注意的是，淘宝这个H5比较有心机，它看起来播放的是视频（尤其还用了具有欺骗性的“播放”LOGO），其实三段所谓的视频都是图片！造物节H5的资源加载界面上面是这个H5打开时的资源情况，你会看到一整片都是JPG（静态图片）！每张图片控制在10多K、20多K，让它们一张一张连续播放，再加一段音频广告，就以假乱真了。造物节H5同时播放的画面虽然知道很多创意玩的就是套路，但这个套路实在太深，过程如下：1.&制作一段垂直视频；2. 把视频输出为图片序列帧；3. 把图片序列导入H5页面；4. 点击播放按钮，同时播放图片和音频。跨屏互动制作方法用iH5实现跨屏互动很简单，对原理感兴趣的话可以看看下面这个不到5分钟的视频：具体到淘宝造物节这个H5，也不难：1.&在“舞台”下面放三个屏幕；2. 把1号作为扫码的主屏幕，在1号页面放置2号屏幕的二维码；3. 在2号页面放置3号屏幕的二维码；4. 3号屏幕页面显示时，触发三个屏幕中图片、音频的播放。图片轮播制作方法《BMW集团 100周年》如果你看了上一期《10000种H5特效完全制作攻略！》，还会知道宝马100周年也玩过用图片伪造视频这招儿，使用iH5制作只需两步：1.&在画布下加幻灯片，导入英文命名的图片序列帧的压缩包（zip/gif）；2. 设置是否自动播放、时间间隔、图片的预加载比例。12张图片能播放1.2秒的视频图片轮播的最终效果即便我们没能自己拍摄或制作一个视频，照样可以用视频软件把一段电影剪切成垂直视频；然后用After Effects把视频导出为静态图片序列和独立的音频；最后把图片序列打包压缩，并和音乐一起导入iH5，制作出独一无二的伪视频。3.“假装它不是视频”《Next Idea x 故宫》，制作团队：Treedom扫描二维码，了解更多！（数英网 App 用户需点击放大二维码后，长按识别）最后压轴的腾讯，刚好做了一件和上面完全相反的事情：人家要把H5伪装成一个视频，他们却是硬要把视频伪装成一个H5！没有播放进度条的H5界面没错，上面这段在安卓设备里播放也不会出现控制条的动画，是一段视频。你以为控制皇帝的旋转、跳跃，花式自拍背后用了多复杂的技术，其实你只是看了一段垂直视频。《WOW！好久不见》，同样采用垂直视频扫描二维码，了解更多！（数英网 App 用户需点击放大二维码后，长按识别）这不是腾讯第一次这么玩了，魔兽电影上映的时候，他们推出的H5那么燃，其实也是视频。我们还做过一期技术揭秘《抛开代码！iH5十五分钟完美重做腾讯魔兽经典H5！》，做了个高仿版本的H5，效果对比如下：上面是iH5仿制的效果，下面是原开发案例网页视频在安卓设备上播放，就会默认冒出播放器，控制条都出来了肯定就知道是视频了；但一旦强制取消播放器，可能导致各种播放问题。那为什么故宫、魔兽两个H5不会？唉，原因很简单，微信是腾讯自己的，他们在浏览器里做了一些配置，对旗下出品的H5有所“优待”，才能确保视频的顺利“乔装”。&所以同样的故宫视频，我们嵌入就可能变成这样——难以忽视的播放器控制条天无绝人之路，还好我们还能“造”视频。无论是一开头的VR、还是后面奔驰的宝马，其实都巧妙利用了静态的叠加，以实现动态的效果。看了这些作品，我们会发现H5的个性化定制趋势越来越明显，大家开始对简单形式的H5不再那么感冒，而更加期待新鲜的形式。更多精彩内容请访问 数英网 - 文章频道 - 项目频道 - 招聘频道
（下载iPhone或Android应用“经理人分享”，一个只为职业精英人群提供优质知识服务的分享平台。不做单纯的资讯推送，致力于成为你的私人智库。）
作者：佚名
文章相关知识点
评论&&|&& 条评论
畅阅·猜你喜欢2200人阅读
JavaScript（4）
& & & & 在制作网页的时候，经常会遇到一些带音乐播放的场景，作品的右上角有一个音频按钮，会播放音乐，点击切换播放和暂停。下面就讲一讲如何在h5网页上添加音乐播放。
& & & & 其实是很简单的，只需要简单几步就可以完成了
1、加入HTML代码，因为是绑定在每一页的右上方（或者其他位置），所以定位用了fixed，在页面底部/body之前加上html代码
&span id=&musicControl&&
&a id=&mc_play& class=&on& onclick=&play_music();&&
&audio id=&musicfx& loop=&loop& autoplay=&autoplay&&
&source src=&mp3/Dreams.mp3& type=&audio/mpeg&&
这里的source 标签对应的音频链接换为自己的音频连接
2、接下来设置css样式
/* music */
@-webkit-keyframes reverseRotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(-360deg);}
@-webkit-keyframes rotataZ{
0%{-webkit-transform: rotateZ(0deg);}
100%{-webkit-transform: rotateZ(360deg);}
#musicControl { position:right:10top:20margin-top:0;display:inline-z-index:}
#musicControl a { display:inline-width:25height:25overflow:background:url('../img/play.png') no-background-size:100%;}
#musicControl a audio{width:100%;height:56}
#musicControl a.stop { background-position:}
#musicControl a.on { background-position:0px 1-webkit-animation: reverseRotataZ 1.2}
#music_play_filter{width:100%;height:100%;overflow:position:top:0;left:0;z-index:;}
这里添加了1个反转图标的H5动画规则，图标如下
3、接下来加入&script&代码
&!-- music --&
function play_music(){
if ($('#mc_play').hasClass('on')){
$('#mc_play audio').get(0).pause();
$('#mc_play').attr('class','stop');
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
$('#music_play_filter').hide();
event.stopPropagation(); //阻止冒泡
function just_play(id){
$('#mc_play audio').get(0).play();
$('#mc_play').attr('class','on');
if (typeof(id)!='undefined'){
$('#music_play_filter').hide();
event.stopPropagation(); //阻止冒泡
function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)==&micromessenger&) {
var play_filter=document.getElementById('music_play_filter');
play_filter.addEventListener('click', function(){
just_play(1);
play_filter.addEventListener('touchstart', function(){
just_play(1);
play_filter.addEventListener('touchend', function(){
just_play(1);
play_filter.addEventListener('touchmove', function(){
just_play(1);
play_filter.addEventListener('mousedown', function(){
just_play(1);
play_filter.addEventListener('mouseup', function(){
just_play(1);
play_filter.addEventListener('mousemove',function(){
just_play(1);
window.onload=function(){
if (!is_weixn()){
just_play();
注意：这里还加入了一个方法判断是否是在微信内打开，如果不是在微信内就自动播放，在微信内部需要点击按钮才变换为播放状态，如果不需要这个功能的话，注释掉以下代码即可
/*window.onload=function(){
if (!is_weixn()){
just_play();
以上代码就可以实现一个音乐播放了，是不是很简单呀，快上手试试吧。
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：10025次
排名：千里之外
原创：11篇
(1)(2)(6)(4)&>&H5背景音乐自动播放问题
H5背景音乐自动播放问题
上传大小：388KB
H5背景音乐自动播放和暂停
综合评分：5（1位用户评分）
下载个数：
{%username%}回复{%com_username%}{%time%}\
/*点击出现回复框*/
$(".respond_btn").on("click", function (e) {
$(this).parents(".rightLi").children(".respond_box").show();
e.stopPropagation();
$(".cancel_res").on("click", function (e) {
$(this).parents(".res_b").siblings(".res_area").val("");
$(this).parents(".respond_box").hide();
e.stopPropagation();
/*删除评论*/
$(".del_comment_c").on("click", function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_invalid/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parents(".conLi").remove();
alert(data.msg);
$(".res_btn").click(function (e) {
var parentWrap = $(this).parents(".respond_box"),
q = parentWrap.find(".form1").serializeArray(),
resStr = $.trim(parentWrap.find(".res_area_r").val());
console.log(q);
//var res_area_r = $.trim($(".res_area_r").val());
if (resStr == '') {
$(".res_text").css({color: "red"});
$.post("/index.php/comment/do_comment_reply/", q,
function (data) {
if (data.succ == 1) {
var $target,
evt = e || window.
$target = $(evt.target || evt.srcElement);
var $dd = $target.parents('dd');
var $wrapReply = $dd.find('.respond_box');
console.log($wrapReply);
//var mess = $(".res_area_r").val();
var mess = resS
var str = str.replace(/{%header%}/g, data.header)
.replace(/{%href%}/g, 'http://' + window.location.host + '/user/' + data.username)
.replace(/{%username%}/g, data.username)
.replace(/{%com_username%}/g, data.com_username)
.replace(/{%time%}/g, data.time)
.replace(/{%id%}/g, data.id)
.replace(/{%mess%}/g, mess);
$dd.after(str);
$(".respond_box").hide();
$(".res_area_r").val("");
$(".res_area").val("");
$wrapReply.hide();
alert(data.msg);
}, "json");
/*删除回复*/
$(".rightLi").on("click", '.del_comment_r', function (e) {
var id = $(e.target).attr("id");
$.getJSON('/index.php/comment/do_comment_del/' + id,
function (data) {
if (data.succ == 1) {
$(e.target).parent().parent().parent().parent().parent().remove();
$(e.target).parents('.res_list').remove()
alert(data.msg);
//填充回复
function KeyP(v) {
var parentWrap = $(v).parents(".respond_box");
parentWrap.find(".res_area_r").val($.trim(parentWrap.find(".res_area").val()));
评论共有1条
还不错，好用
yangdanbo1975
综合评分：
积分/C币：3
yyd_diablo
综合评分：
积分/C币：3
综合评分：
积分/C币：3
综合评分：
积分/C币：3
综合评分：
积分/C币：3
综合评分：
积分/C币：3
综合评分：
积分/C币：3
综合评分：
积分/C币：3
yangdanbo1975
综合评分：
积分/C币：3
VIP会员动态
CSDN下载频道资源及相关规则调整公告V11.10
下载频道用户反馈专区
下载频道积分规则调整V1710.18
spring mvc+mybatis+mysql+maven+bootstrap 整合实现增删查改简单实例.zip
资源所需积分/C币
当前拥有积分
当前拥有C币
扫码关注并点击右下角获取下载码
输入下载码
为了良好体验，不建议使用迅雷下载
H5背景音乐自动播放问题
会员到期时间：
剩余下载个数：
剩余积分：
为了良好体验，不建议使用迅雷下载
积分不足！
资源所需积分/C币
当前拥有积分
您可以选择
程序员的必选
绿色安全资源
资源所需积分/C币
当前拥有积分
当前拥有C币
(仅够下载10个资源)
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
为了良好体验，不建议使用迅雷下载
资源所需积分/C币
当前拥有积分
当前拥有C币
您的积分不足，将扣除 10 C币
为了良好体验，不建议使用迅雷下载
你当前的下载分为234。
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励5下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
H5背景音乐自动播放问题他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)}