微信 in app browser 影片自動播放

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);

電話號碼連結使用

基本使用方式

0800-080-090

<a href="tel:0800-080-090">0800-080-090</a>

服務電話

<a href="tel:0800-080-090">服務電話</a>

 

自訂樣式

跟其他的 <a> 一樣,你可以使用CSS

a {
  color: green;
  text-decoration: none;
}

來自定所有 <a> 的樣式,或是使用 pseudoe 選擇來只樣式化 tel: 的內容

a[href^="tel:"]{
  color: green;
  text-decoration: none;
}

 

不同瀏覽器對 tel: 的處理狀況

瀏覽器是否可以連結?連結動作
SafariYes詢問撥打電話
Chrome (OSX)Yes啟動程式詢問視窗跳出
Firefox (OSX)Yes啟動程式詢問視窗跳出
Safari (iOS)Yes詢問撥打電話
Line 內置瀏覽器 (iOS)Yes詢問撥打電話或傳送簡訊
Chrome (iOS)Yes詢問撥打電話

 

避免 iOS 自動偵測電話號碼

<meta name = "format-detection" content = "telephone=no">

參考至:

https://css-tricks.com/the-current-state-of-telephone-links/