標籤: javascript

微信 in app browser 影片自動播放

Monkianer

iOS 省電模式時，任何影片都不會自動播放

<video id="player" controls autoplay x5-video-player-type="h5" playsinline="true" webkit-playsinline="true" x-webkit-airplay="true" x5-video-orientation="portraint" x5-video-player-fullscreen="true">
    <source src="..." type="video/mp4">
</video>

playsinline="true" webkit-playsinline="true
設定讓 iOS 不會全螢幕影片播放
x5-video-player-type="h5"
Android 設定影片層級為 html5 層級
x5-video-player-fullscreen="true"
Android 全螢幕設置，避免橫向顯示

iOS 微信可以通過 WeixinJSBridgeReady 事件來進行自動播放

document.addEventListener(
    'WeixinJSBridgeReady',
    function() {
        var video = document.getElementById("player");
        video.play();
    },
    false
);

Android 只能使用 touchstart 事件，提醒使用者點擊螢幕播放

document.addEventListener('touchstart', function(){ 
    var video = document.getElementById("player");
        video.play();
}, false);

PreloadJS 進階使用

Monkianer

管理載入順序

var queue = new createjs.LoadQueue();
// 確保 Script 載入順序為優先，預設為 true。所以可以不必特別設定。
queue.maintainScriptOrder = true; 
queue.loadManifest([
    "script1.js",
    "script2.js",
    "image1.png",
    // 使用 maintainOrder 保持其他物件的載入順序
    {src: "image2.png", maintainOrder: true}, 
    "image3.png",
    // 將會等待 image2.png 先行載入(在 XHR 支援的情況下會等待 image2.png 載入完畢)
    "script3.js" 
]);

物件可以一起同時載入的數量

queue.setMaxConnections(3);

如何從 Illustrator 匯出 SVG 使用

Monkianer

See the Pen SVG Animation by Monkianer (@monkianer) on CodePen.

1. 命名及匯出 SVG

先在 Ilustrator 裡命名好每個物件的名稱

選擇 File -> Export -> Export As SVG 依照下圖的選項確認匯出

打開匯出的檔案會發現 SVG 裡圖形的 id 會使用你剛剛命名的圖層名稱，不過 Illustrator 匯出只能將圖層名稱轉為 ids 所以如果你有 20 個 coin 圖層名稱就會被變成 coin-1, coin-2 …..。這樣對統一使用樣式或動畫並不方便，所以可以使用 SVGO 幫助我們。

2. 使用 SVGO 將 id 轉為 class

下載有 illustratorLayerIdsToClasses plugin 的 SVGO 版本，使用 npm 安裝。安裝時加上 -g 全域參數使你在任何地方都可以呼叫 SVGO

npm install -g path/檔案位置

輸入以下指令。 -i 為輸入從 path/test.svg，-o 為輸出檔案為 path/test.min.svg，–enabled=illustratorLayerIdsToClasses 為使用該 plugin。

svgo -i path/test.svg -o path/test.min.svg --enable=illustratorLayerIdsToClasses

最後得到結果。就可以使用 class 來指定動畫效果了。

感謝參考網址：1,  2