H5怎么植入第三方音视频？
H5怎么设置文件加密下载？
如何“盗取”别人的H5素材？
以下和H5干系的隐秘技能，是我回顾这半年多在iH5.cn做H5的履历，总结出8个不随意马虎被人发觉，在微信H5上却十分实用的技巧。
·
【1】植入音频
制作一个包含很多音视频的H5，上传素材很耗韶光，文件的大小也有限定，但这种问题通过外链就可以办理。
什么外链？必须是音视频的资源地址，也便是下载地址才行。由于HTML5能对音视频供应原生支持，MP3、MP4格式文件一样平常能在海内浏览器直接播放。
怎么获取这个链接？以虾米音乐为例，感谢有高人破解了它加密的音乐资源地址！
方法如下：http://link.hhtjim.com/xiami/1769962750.mp3（把左边这串标识歌曲的数字换成虾米对应歌曲的ID，就得到这首歌的资源位置）。
那歌曲ID在哪里看？点进歌曲名进入内容页，比如上面的《由于爱情》，在地址页中song/后面那串数字1769962750便是ID。
【2】植入视频
利用“网页”功能，可以在H5中嵌入第三方页面。如下，在H5中加入一个“网页”，资源位置写网页地址即可（比如这里是m.baidu.com）。
这和视频有半毛钱关系？别激动，由于海内视频利润空间比音乐大得多，腾讯优酷等网站为防止下载，各种戒备手段无所不用其极，“视频”功能播不了非资源类型的视频。还好嵌入地址是有的！
要不然微信"大众号什么的怎么推送视频？
如下，把这个地址作为网页的资源位置，问题就办理了。
http://player.youku.com/player.php/sid/XMTU0OTY0MTE4NA/v.swf（更换XMTU0OTY0MTE4NA为所需视频ID即可）
https://v.qq.com/iframe/preview.html?vid=l0187ggnc7d（更换l0187ggnc7d为所需视频ID即可）
上面是优酷和腾讯的视频嵌入地址，由于都采取了HTML5网页的相应式设计，能自适应屏幕，以是调度网页长宽也浸染于视频。
【3】植入舆图导航
舆图导航的植入也不繁芜，比如百度舆图的话，先打开百度舆图移动版网页：http://map.baidu.com/mobile/webapp，搜索你的目标地点。
这里用的是“南方传媒大厦”，点击右上角的“舆图”，天生一个详情页。复制这个页面的链接，设为网页的资源位置就OK了，效果如下：
【4】一键下载文件
既然说到外链便是下载链接，前面能植入第三方音频，也能直接下载这首歌。如下，设置一个事宜，在手机中轻触按钮就能下载音频。
利用“文件”功能，可以上传所有格式的文件，只是为避免做事器过载，文件大小有一定限定。
有时只想上传个大略的PDF，但百度云、金山网盘等玩意儿老要登录烦得很！
如果文件不大，可以利用iH5上传文件天生的资源地址，产生一个能点击下载的链接（根据多次实践，我可以偷偷见告你原始地址是file.ih5.cn+资源位置）。
【5】设置加密下载
当然，百度云这些网盘还有一个好处是能规定密码。可不要鄙视H5，HTML5有一个上风是能在浏览器验证表单信息，给文件加个密还不大略！
如上，只须要加一个输入框，设置输入的值是你规定的密码，匹配成功时下载文件就行。
【6】锁位置、加书签
H5在不同设备的自适应一贯是个麻烦，但如果只是为避免某个按钮超出屏幕，可以加一个横幅，勾选“固定位置”来锁定它。
如上，在页面加一个横幅，设置底部对齐（bottom），纵向偏移-150，就能担保横幅和它包含的按钮一贯保持在页脚往上150个像素的位置——即便在电脑上缩放页面比例也能保持。
这样一来，滚动页面时按钮位置也不受影响！
还能做在页面顶端放个透明按钮，设置点击横幅时，就对“舞台”做“跳至工具”的动作，跳到透明按钮——相称于把透明按钮当做书签，跳到对应书签的位置。
【7】监测页面打开率
H5页面的打开情形，事理上实在和实时投票差不了多少，只是触发的事宜变成了页面显示与否，编辑效果如下：
为了方便理解，我设计了如下逻辑图进行表达：
（1）用数据库整形变量保存页面1的打开次数（或显示次数）；
（2）页面1每显示一次，上面的变量就加1；
（3）页面2放计数器，绑定整形变量，来显示次数的大小；
（4）舞台放韶光轴，用来掌握打开次数的刷新，每隔三秒更新一次变量。
【8】临摹作品的捷径
末了一个技巧是压轴的。当你看到特殊好玩的H5要临摹怎么办？怎么在桌面仿照移动页面布局？可以利用开拓者工具（Chrome浏览器快捷键Ctrl+Shift+I）。
比如腾讯TGideas的《移动页面用户行为报告》，打开开拓者工具后激活右侧代码上方的设备标识（Toggle device mode，切换设备模式）。
回到左侧页面上方，选择得当的设备（比如iPhone 6S），再刷新页面就可以仿照移动端效果了。
末了点击菜单中的“Source”（源），就可以在目录下翻找图片等缓存出来的原始素材。从素材既可以看出H5的设计框架，又可以保存素材作为临摹备用。
·
看到这里，会不会创造自己错过了很多实用技能？技能改变天下，弯路请少走！
