5怎么植入第三方音视频?
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的设计框架,又可以保存素材作为临摹备用。
·
看到这里,会不会发现自己错过了很多实用技能?技术改变世界,弯路请少走!
Builder是一款深度集成Eelipse的IDE编辑器,但其主要集中在Web前端的开发,不能进行Java等后台开发。HBuilder提供了对JavaScrijpt、jQuery、HTML5+、MUI等语法的提示功能,同时包含很多快捷键,让前端开发更加便捷。
访问HBuilder官方网站(http://www.dcloud.io),下载最新版的HBuilder,如下图所示。
在图上图中单击“下载”按钮,会出现下载提示框,如下所示。
在图片中可以看到HBuilder的当前版本、历史版本以及各平台的不同版本,读者在下载时根据自己的设备选择适合的版本即可。
HBuilder下载完成,解压到指定的路径后,双击启动文件HBuilder.exe,会出现一个启动页面,完成用户注册并登录后,便可开始使用HBuilder。HBuilder开发界面如图所示。
在上图中,左侧项目管理器中会出现一个名称为HelloHBuilder的示例项目,右侧会出现一个HBuilder入门的窗口,该窗口中显示的内容是HBuilder官方的使用教程,提供了HBuilder的详细使用方法。
下面以新建项目、新建文件以及运行文件为例简单讲解HBuilder的使用。
首先,在C盘下创建jQuery目录用于保存项目文件。然后选择“文件”一“新建”→“Web项目”命令,打开“创建Web项目”对话框,如下所示。
在上图中,填写项目名称(如chapter01ln,选择项目的保存位置(如C:\jQuery),单击“完成”按钮创建Web项目。
最后,编写项目中默认的文件index.html,利用HBuilder提供的工具完成文件的运行,页面效果如下。
在上图中,单击方框内的图标,即可在浏览器运行此文件,页面效果如下所示。
HBuilder中有很多快捷键,开发者使用这些快捷键,可以更加高效地工作。HBuilder常用快捷键如表所示。
HBuilder 常用快捷键
「油猴脚本」是一段脚本代码,通过它可以让浏览器实现各种各样的扩展功能,和浏览器扩展的作用类似。相当于给浏览器开了个挂,可以说是浏览器的辅助神器了!
Tampermonkey 是一款浏览器脚本管理插件,常见浏览器如 Chrome、Firefox、Safari 等都支持。
结合脚本网站 Greasyfork,能够方便的实现脚本旳一键安装、自动更新、快速启用等便捷功能。
打开 http://tampermonkey.net 官网,安装对应版本的插件。
安装好后自动启用,扩展区域会出现相应扩展图标。
注:Chrome 可以通过网站 http://crx4chrome.com 来下载扩展程序 crx 文件,手动将 crx 文件拖动至扩展页面安装即可。
打开 https://greasyfork.org/zh-CN ,搜索需要的脚本,输入大致名称或用途即可。
小编这里安装的脚本地址:
https://greasyfork.org/zh-CN/scripts/418355
脚本安装完成后,只会在有效的网站上自动启用,而不在 “启用 URL” 站点列表里的网站则不启用。因此不必担心脚本安装过多会影响效率。
在浏览器扩展栏可以快捷查看和管理脚本。点击图标查看详情、开关脚本。
以小编安装的淘宝辅助脚本为例只会在天猫淘宝网站运行
可以在下面两个网站上查找、安装脚本:
greasyfork.org :支持中文,可以按照脚本的安装量、评分等进行过滤排序,有详细的脚本介绍信息。推荐!
openuserjs.org :主要为英文资源,无中文界面。
https://greasyfork.org/zh-CN/scripts/14178
绕过百度、搜狗、谷歌等搜索结果的重定向,直接访问原始网址,加快响应速度; 自动拦截域名;去除百度广告;自定义样式;网址前添加图标显示。
2. 淘宝天猫查隐藏券+历史价格
https://greasyfork.org/zh-CN/scripts/418355
也就是小编刚刚演示的,这里不就单独说明了
3. 搜索引擎快捷跳转
https://greasyfork.org/zh-CN/scripts/27752
快速方便地在多个搜索引擎中跳转搜索。
4. 视频站启用html5播放器
https://greasyfork.org/zh-CN/scripts/30545
视频网站自动启用 Html5 播放器;万能网页全屏;添加播放控制快捷键。
常用快捷键:
更多脚本等你探索...
为了方便以后重新配置油猴脚本时,能够快速安装还原常用脚本,我们可以把脚本备份下来。
进入 管理面板 -> 实用工具 -> 压缩包选项,可以进行脚本的导出和导入操作。也可以选择备份到云盘等。
油猴脚本是个很强大的浏览器辅助工具,而且相比于浏览器扩展,脚本更加轻便,占用资源极小,却可以实现丰富的功能。
在使用上和扩展没有明显区别,极大地提高了我们的浏览和操作体验,十分方便。
*请认真填写需求信息,我们会在24小时内与您取得联系。