20

所以我在我的网站上提供 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 不够聪明，无法尝试第二个来源。如何让我的网站为不同的设备提供正确的视频？

4

11 回答 11

9

在 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 视频，然后使用 JavascriptonError回退到 720p。

Safari 会嗅探 1080p 文件的标题以确定它是否可播放，如果文件太大而无法解码，则会抛出错误。然后我们捕获该错误以提供 720p 视频。

通过使用这种特征检测，回退不仅适用于一个设备（iPhone 4），而且可能适用于许多不同的浏览器。

为什么多个<source>'s 不起作用

当使用具有相同 MIME 类型<source>的多个标签时，浏览器将加载具有兼容 MIME 类型的第一个源并丢弃其他源，即使该视频不可播放。这是因为元素应提供替代视频编解码器（例如 ogg、webm、mp4），而不是替代帧大小/文件大小。source

于 2014-02-11T10:55:31.027 回答
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>

超级干净和可读对吗？希望有帮助。

于 2015-01-21T00:52:12.110 回答
1

由于亲爱的@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(' '));
})();

现在您可以在 javascript 中编写几行代码，并根据浏览器Type和Version决定更改视频源。

于 2015-01-20T09:19:17.980 回答
1

我有一个执行此操作的 php 脚本。我在这里找到了 - http://detectmobilebrowsers.com/ - 是的，有一个 javascript、JQuery 等版本。它对我们来说工作得很好，它的好处是似乎保持相当更新。我们遇到的唯一问题是 iPad 被故意设置为不将自己标识为移动设备。

于 2012-09-24T19:17:09.283 回答
0

I cannot offer sample code since I am not an Apple geek, but I can tell you based off of my experience trying to make sites compatible between XHTML and HTML5 that it is better to check for browser capability than browser version.

The reason for this is that there are too many browser versions to justify the upkeep, and also the user agent string can be modified. I recommend that you write a script that checks for HTML5 video capabilities with a simple if statement, and then render either one video or the other depending upon the results.

于 2012-09-10T05:46:54.490 回答
0

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 包含完全相同的无用错误处理程序。

于 2015-01-20T14:56:35.057 回答
0

如果视频是您要检查的唯一功能，那么像 WURFL（无线通用资源文件 - http://wurfl.sourceforge.net/）或 DeviceAtlas 之类的移动设备检测数据库可能会过大。但它是一种快速的方法，可以为比您能够编译检查的更大范围的设备获得强大的功能检测，并且如果您的站点需要验证除视频支持之外的其他功能，它会派上用场。

于 2013-02-14T06:16:39.230 回答
0

试试这个链接 该库应该能够检测到用户代理，您可以相应地提供适当的文件。

于 2012-06-07T12:49:43.127 回答
-1

我使用这段代码：

    // 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>');
    }
于 2014-05-26T10:17:05.793 回答
-1

把它放在你的标签中： 

<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>
于 2013-02-17T05:26:03.087 回答
-1

这将检测 iOS 版本。也许它可能有用：

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

编辑：我已经调整并测试了脚本。

于 2012-11-09T16:07:44.863 回答