使用Javascript或HTML檢測iOS設備的型號？

Question

所以我在我的網站上提供H.264 .mp4視頻。 我正在使用開源HTML5視頻播放器http://mediaelementjs.com/ 。 一些訪問者正在從Safari for iPhone查看。 iPhone 4僅支持高達720p的視頻播放，因此如果我將視頻設置為小於此值，則可以使用4和4S。 但4S支持高達1080p的視頻。 那么我如何為4S提供更大的視頻，為4提供更小的視頻呢？ 我試過這個：

<video width="640" height="400" id="player" controls="controls" preload="auto">
    <source src="https://s3.amazonaws.com/my-big-1080p-video.mp4" type="video/mp4">
    <source src="https://s3.amazonaws.com/my-small-720p-video.mp4" type="video/mp4">
</video>

但它沒有用。 iPhone 4不夠智能，無法嘗試第二個來源。 如何讓我的網站為不同的設備提供正確的視頻？

Answer 1

在iPhone 4上播放720p視頻 - 在iPhone 4S上播放1080p視頻

在iPhone 4和4S（ jsfiddle ）上試試吧

 <video src="http://file.brow.sr/1080p.mp4" onerror="this.src='http://file.brow.sr/720p.mp4';" controls loop width="320" height="180"> </video> 

說明

加載1080p視頻，然后使用Javascript的onError回退到720p。

Safari將嗅探1080p文件的標題以確定它是否可播放，如果它太大而無法解碼則會引發錯誤。 然后我們捕獲該錯誤以提供720p視頻。

通過使用這種特征檢測，后備不僅可以在一個設備（iPhone 4）上運行，而且可能在許多不同功能的瀏覽器上運行。

為什么多個<source>不起作用

當使用具有相同MIME類型的多個<source>標記時 ，瀏覽器將加載具有兼容MIME類型的第一個源並丟棄其他源，即使該視頻不可播放也是如此。 這是因為source元素有望提供替代視頻編解碼器（例如ogg，webm，mp4）， 而不是替代幀大小/文件大小。

Answer 2

以下是如何進行的：

1）使用wurfl檢索設備模型

<script type='text/javascript' src=“//wurfl.io/wurfl.js"></script>

您可以使用HTTP或HTTPS（兩者都受支持）如果您計划使用腳本提供的設備信息來做出渲染決策，那么您可能希望將腳本包含在元素中。 否則，您可以異步加載它。 現在您可以在JavaScript中訪問WURFL對象。

示例響應類似於：

{complete_device_name：“Apple iPhone 5”，form_factor：“Smartphone”，is_mobile：true}

當然你可以（而且應該）

console.log(WURFL);

找出你可以使用的其他屬性。

2）現在你知道你的用戶究竟在哪個設備型號上，你可以切換視頻播放器的配置。

怎么樣的？

<video width="IPHONE5_VIDEO_WIDTH"
       height="IPHONE5_VIDEO_HEIGHT"
       id="player" controls="controls"
       preload="auto">
       <source src="IPHONE5_VIDEO_URL" type="video/mp4">
</video>

超級干凈，可讀性好嗎？ 希望有所幫助。

Answer 3

我有一個PHP腳本，這樣做。 我在這里得到它 - http://detectmobilebrowsers.com/ - 是的，有一個javascript，JQuery等版本。 它對我們來說效果很好，它的好處似乎是保持相當的更新。 我們遇到的唯一問題是iPad被故意設置為不將自己標識為移動設備。

Answer 4

嘗試此鏈接庫應該能夠檢測用戶代理，您可以相應地提供適當的文件。

Answer 5

我不能提供示例代碼，因為我不是Apple的極客，但我可以根據我的經驗告訴你，嘗試在XHTML和HTML5之間兼容網站，檢查瀏覽器功能比瀏覽器版本更好。

這樣做的原因是有太多的瀏覽器版本來證明維護，並且還可以修改用戶代理字符串。 我建議您編寫一個腳本，使用簡單的if語句檢查HTML5視頻功能，然后根據結果呈現一個視頻或另一個視頻。

Answer 6

如果視頻是您正在檢查的唯一功能，則像WURFL（無線通用資源文件 - http://wurfl.sourceforge.net/ ）或DeviceAtlas這樣的移動設備檢測數據庫可能會過度。 但是，如果您的網站需要驗證除視頻支持之外的其他功能，那么這是一種快速的方法，可以為更大范圍的設備獲得強大的功能檢測，而且可以很方便地編譯檢查。

Answer 7

由於親愛的@Duvrai提到的原因，你的解決方案無效。 我已經搜索到了達到你的目的的正確方法，似乎我們別無選擇，除非使用一些javascript代碼（這里不考慮服務器端編程）來決定應該交付哪個源。 bellow代碼段檢測瀏覽器類型及其版本 ：

 navigator.sayswho= (function(){ var ua= navigator.userAgent, tem, M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\\/))\\/?\\s*(\\d+)/i) || []; if(/trident/i.test(M[1])){ tem= /\\brv[ :]+(\\d+)/g.exec(ua) || []; alert('IE '+(tem[1] || '')); } if(M[1]=== 'Chrome'){ tem= ua.match(/\\bOPR\\/(\\d+)/) if(tem!= null) alert('Opera '+tem[1]); } M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?']; if((tem= ua.match(/version\\/(\\d+)/i))!= null) M.splice(1, 1, tem[1]); alert( M.join(' ')); })(); 

現在，您可以在javascript中編寫一些代碼行，並決定根據瀏覽器類型和版本更改視頻源。

Answer 8

MEJS播放器無法正確處理錯誤，我會添加更多支持以便能夠檢測到實際發生的情況。 在iPhone上它甚至有時會拋出錯誤事件，但沒有實際錯誤，你可以正確播放視頻。

打開mediaelement-and-player.js並尋找

        // error handling
        media.addEventListener('error',function() {
            loading.hide();
            controls.find('.mejs-time-buffering').hide();
            error.show();
            error.find('mejs-overlay-error').html("Error loading this resource");
        }, false);

然后使用此代碼：

        // error handling
        media.addEventListener('error',function() {
            var
                videoError = error.closest('.mejs-inner').find('video,audio')[0].error,
                msg = 'Error loading this resource.';

            if (!videoError) { //webkit sometimes throws error event but video has no actual error and can play the video correctly - ignore the event
                console.log('MEJS event: error throws but no error found - ignored');
                return;
            }

            //hide elements visible while loading and playing - cannot play after error
            loading.hide();
            controls.addClass('hidden'); //controls are automatically displayed when mouse hover is detected - must hide it permanently using class with !important
            error.closest('.mejs-inner').find('.mejs-overlay-play').hide(); //also hide overlay with play button
            error.show();

            //get relevant error message
            switch(videoError.code) { //see http://www.w3.org/TR/html5/embedded-content-0.html#error-codes
                case videoError.MEDIA_ERR_ABORTED: //loading stopped (by user, e.g. by pressing ESC or Back)
                    msg = 'Video loading aborted';
                    break;
                case videoError.MEDIA_ERR_DECODE: //invalid format (actually presumed format is OK, but the data does not correspond with the defined format - probably corrupted file of data transfer)
                    msg = 'Video file is broken';
                    break;
                case videoError.MEDIA_ERR_NETWORK: //network problem (was able to connect to the provided URL but could not get the video data)
                    msg = 'Network connection lost';
                    break;
                case videoError.MEDIA_ERR_SRC_NOT_SUPPORTED: //invalid source URL (url provided does not lead to a supported video file)
                    msg = 'Video not supported';
                    break;
            }

            //display error
            console.log('Video error: ' + msg + ', code: ' + videoError.code);
            error.find('.mejs-overlay-error').html(msg);
        }, false);

如果需要，您可以添加自己的處理，如果視頻不受支持，將切換到720p。

並在mediaelementplayer.css中添加（不確定是否實際需要或僅改進我的主題）：

/* Display errors */
.mejs-overlay-error {
    color: white;
    background: black;
    text-align: center;
    font-size: 1.2EM;
}
.mejs-controls.hidden {
    display: none !important;
}
/* End: Display errors */

---

這適用於版本2.13.1，不確定更新版本是否更好。

更新：最新版本2.16.3包含完全相同的無用錯誤處理程序。

Answer 9

這將檢測iOS版本。 也許它可能有用：

if (navigator.userAgent.indexOf('5_0') != -1) {
    alert('IOS 5');
} else {
    alert('Other');
}

編輯：我已經調整並測試了腳本。

Answer 10

把它放在你的標簽中：

<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="width=320.1">    
<script>
if (window.screen.height==568) { // iPhone 5
                    document.querySelector("meta[name=viewport]").content="width=320.1";
                  // your code here
                }
</script>

Answer 11

我用這個代碼：

    // iPhone 3
    if (window.screen.height==480 && window.screen.width==320 && window.devicePixelRatio==1)
    { 
        $('#chartDivWrapper').html('<div id="chartdiv" style="height:300px;width:500px;"></div>');
    } 
    // iPhone 4, this is Retina
    else if (window.screen.height==480 && window.screen.width==320 && window.devicePixelRatio==2) 
    { 
        $('#chartDivWrapper').html('<div id="chartdiv" style="height:300px;width:500px;"></div>');
    } 
    // iPhone 5
    else if (window.screen.height==568 && window.screen.width==320 && window.devicePixelRatio==2) 
    { 
        $('#chartDivWrapper').html('<div id="chartdiv" style="height:400px;width:600px;"></div>');
    } 
    // iPad
    else if (window.screen.height==1024 && window.screen.width==768 && window.devicePixelRatio==1) 
    { 
        $('#chartDivWrapper').html('<div id="chartdiv" style="height:425px;width:680px;"></div>');
    } 
    // iPad Retina
    else if (window.screen.height==1024 && window.screen.width==768 && window.devicePixelRatio==2) 
    { 
        $('#chartDivWrapper').html('<div id="chartdiv" style="height:425px;width:680px;"></div>');
    } 
    // all other, this was before for all 
    else  
    { 
        $('#chartDivWrapper').html('<div id="chartdiv" style="height:400px;width:600px;"></div>');
    }