Определить модель устройства iOS с помощью Javascript или HTML?

Ответ 1

Воспроизвести видео 720p на iPhone 4 - 1080p видео на iPhone 4S

Попробуйте это на 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>

Ответ 2

Вот как это сделать:

1) Извлеките модель устройства с помощью wurfl

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

Вы можете использовать HTTP или HTTPS (оба поддерживаются). Если вы планируете использовать информацию об устройстве, предоставленную script для принятия решений по рендерингу, вы можете захотеть включить в элемент script. В противном случае вы можете загрузить его асинхронно. Теперь у вас есть доступ к объекту WURFL в JavaScript.

Пример ответа выглядит примерно так:

{complete_device_name: "Apple iPhone 5", form_factor: "Смартфон", 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>

супер чистое и читаемое право? Надеюсь, что это поможет.

Ответ 3

У меня есть php script, который делает это. Я получил его здесь - http://detectmobilebrowsers.com/ - и да, есть версии javascript, JQuery и т.д. Для нас это работало достаточно хорошо, и это может показаться, что оно остается достаточно обновленным. Единственная проблема, с которой мы столкнулись, - это iPad, который был преднамеренно установлен, чтобы не идентифицировать себя как мобильное устройство.

Ответ 4

Попробуйте эту ссылку Библиотека должна иметь возможность обнаруживать пользовательский агент, и вы можете соответствующим образом обслуживать соответствующие файлы.

Ответ 5

Я не могу предложить пример кода, так как я не являюсь разработчиком Apple, но могу сказать, основываясь на своем опыте, пытаясь сделать сайты совместимыми между XHTML и HTML5, лучше проверить возможности браузера, чем версию браузера.

Причиной этого является то, что существует слишком много версий браузера для обоснования содержания, а также строка пользовательского агента может быть изменена. Я рекомендую вам написать script, который проверяет возможности видео HTML5 с помощью простого оператора if, а затем отображает либо одно видео, либо другое в зависимости от результатов.

Ответ 6

База данных обнаружения мобильных устройств, таких как WURFL (Wireless Universal Resource File - http://wurfl.sourceforge.net/), или DeviceAtlas может быть переполнена, если видео является единственной возможностью вы проверяете. Но это быстрый способ получить надежное обнаружение возможностей для гораздо большего числа устройств, чем вы могли бы скомпилировать чеки и могли бы пригодиться, если ваш сайт когда-либо понадобится проверить другие возможности, кроме поддержки видео.

Ответ 7

Ваше решение не работает из-за причины, упомянутой уважаемым @Duvrai. Я искал правильный путь для достижения вашей цели, и, похоже, у нас нет выбора, если вы не используете какой-либо код javascript (здесь без учета программирования на стороне сервера), чтобы принять решение о том, какой источник должен быть доставлен. Следующий фрагмент определяет тип браузера и его Версия:

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(' '));
})();

Ответ 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 содержит точно такой же бесполезный обработчик ошибок.

Ответ 9

Это определит версию iOS. Может быть, это может быть полезно:

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

Изменить: У меня есть корректировка и тестирование script.

Ответ 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>

Ответ 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>');
    }