使用Javascript或HTML检测iOS设备的型号
Detect model of iOS device using Javascript or HTML?
所以我在我的网站上提供H.264.mp4视频。我正在使用开源HTML5视频播放器 http://mediaelementjs.com/。一些访问者正在从 iPhone 版 Safari 观看。iPhone 4仅支持高达720p的视频播放,因此,如果我使视频小于此值,它们可以在4和4S上运行。但4S支持高达1080p的视频。那么,我将如何向 4S 提供较大的视频,向 4S 提供较小的视频呢?我试过这个:
<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不够聪明,无法尝试第二个来源。如何让我的网站向不同的设备提供正确的视频?
播放 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),而不是替代帧大小/文件大小。
以下是操作方法:
1) 使用 wurfl 检索设备型号
<script type='text/javascript' src=“//wurfl.io/wurfl.js"></script>
您可以使用 HTTP 或 HTTPS(两者都受支持) 如果计划使用脚本提供的设备信息来做出呈现决策,则可能需要在元素中包含脚本。否则,您可以异步加载它。现在,您可以访问 JavaScript 中的 WURFL 对象。
示例响应如下所示:
{ complete_device_name:"苹果iPhone 5", form_factor:"智能手机", is_mobile:真 }
当然,你可以(也应该)
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>
超级干净和可读性对吧?希望有帮助。
我有一个php脚本可以做到这一点。 我在这里得到了它 - http://detectmobilebrowsers.com/- 是的,有一个javascript,JQuery等版本。 它对我们来说效果很好,它的好处是似乎保持相当更新。 我们遇到的唯一问题是iPad故意不将自己标识为移动设备。
亲爱的@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编写一些代码行,并决定根据浏览器类型和版本更改视频源。
试试这个链接该库应该能够检测用户代理,您可以相应地提供适当的文件。
由于我不是Apple极客,我无法提供示例代码,但是根据我尝试使XHTML和HTML5之间的站点兼容的经验,我可以告诉您,检查浏览器功能比浏览器版本更好。
这样做的原因是浏览器版本太多,无法证明维护的合理性,并且还可以修改用户代理字符串。我建议您编写一个脚本,使用简单的 if 语句检查 HTML5 视频功能,然后根据结果呈现一个视频或另一个视频。
如果视频是您正在检查的唯一功能,则像 WURFL(无线通用资源文件 - http://wurfl.sourceforge.net/)或 DeviceAtlas 这样的移动设备检测数据库可能会矫枉过正。但是,这是一种快速的方法,可以为比您能够编译检查的更大范围的设备获得强大的功能检测,并且如果您的站点需要验证视频支持以外的其他功能,它将派上用场。
MEJS 播放器无法正确处理错误,我会添加更多支持以检测实际发生的事情。在iPhone上,它甚至有时会引发错误事件,但没有实际错误,您可以正确播放视频。
打开媒体元素和播放器.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包含完全相同的无用错误处理程序。
这将检测iOS版本。也许它可能有用:
if (navigator.userAgent.indexOf('5_0') != -1) {
alert('IOS 5');
} else {
alert('Other');
}
编辑:我已经完成了对脚本的修改和测试。
把它放在你的标签中:
<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>
我使用以下代码:
// 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>');
}
- 如何确定javascript已经完成了某些操作.ios上的
- javascript函数访问ios本机功能
- 如何修复:当javascript更改DOM时,iOS会删除CSS文件
- 如何在ios上将按钮操作捕获到javascript中
- iOS Safari Javascript设置超时问题
- 在WebView iOS中评估Javascript
- 如何使用UI Automation JavaScript Reference for iOS appium获取本机应用程
- Xamarin iOS WKWebView显示JavaScript警报
- Javascript touchend(滚动)事件在ios 4中的UIWebView中不起作用
- 如何用Javascript从Chrome iOS下载blob文件
- css 和 JavaScript 像 iOS 照片应用程序一样滚动
- TCP或WebSockets可以通过Android和iOS设备上的Javascript调用
- iOS Javascript replace "
- iOS JavaScript Pagehide and Unload 无法正常工作
- Cordova iOS Javascript不起作用
- iOS JavaScript bridge
- RNCryptor IOS+Javascript加密/解密AES 256
- iOS JavaScript Video - webkitCancelFullScreen(); does not wo
- iOS JavaScript support for timedMetadata
- WebView中文件的iOS Javascript资源路径