整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
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小時內與您取得聯系。
