3

是否可以有一个仅在特定设备中可见的 div 标签？

我们有一个具有 HTML5 后备的视频页面，可以在桌面和 iOS 设备上很好地播放，但在 Android（特别是三星 S3）上却不行

我做了一些研究，其背后的可能原因是 .m3u8 在 android 中不受完全支持，并且 RTSP 有更多成功报告。

我想在我们的视频嵌入代码下放置一个 div 标签，它只会在 android 设备上显示。

就像是...

<div id="androids"><a href="rtsp_url">Android user please click here to watch video</a></div>

这可能吗？

顺便一提。我在我的页面上使用 JW Player。

谢谢

4

3 回答 3

2

尝试这个：

HTML：

<div id="video"></div>

JavaScript：

var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf('android') > -1;

var videoDiv = document.getElementById('video'); 

if(isAndroid) {
  videoDiv.innerHTML = '<a href="rtsp_url">Android user please click here to watch video</a>';
} else {
  //add something else
  videoDiv.innerHTML = '<video>This is HTML 5 video for non-Android users</video>';
}

解释一下：JavaScript 判断用户是否使用 Android。如果用户使用 Android，它会添加<a href="rtsp_url">Android user please click here to watch video</a>到<div id="video">，如果不是，它会添加常规 HTML 5<video>标签。

注意：而不是<video>This is HTML 5 video for non-Android users</video>添加您的视频代码。

于 2012-08-19T16:43:05.713 回答
0

如果您可以使用 JavaScript，您可以navigator.userAgent尝试确定它是否是移动浏览器和 Android 设备，并注入适当的 HTML 元素。

这是一个示例 Android UA 字符串：
Mozilla/5.0 (Linux; U; Android 4.0.2; en-us; Galaxy Nexus Build/ICL53F) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

于 2012-08-19T15:32:00.247 回答
0

如果你使用php，你可以这样：</p> 

function isMobile(){
$useragent_commentsblock=preg_match(’|\(.*?\)|’,$useragent,$matches)>0?$matches[0]:”;

function CheckSubstrs($substrs,$text)
{
foreach($substrs as $substr)
if(false!==strpos($text,$substr))
return true;
return false;
}

$mobile_os_list=array(’Google Wireless Transcoder’,'Windows CE’,'WindowsCE’,'Symbian’,'Android’,'armv6l’,'armv5′,’Mobile’,'CentOS’,'mowser’,'AvantGo’,'Opera Mobi’,'J2ME/MIDP’,'Smartphone’,'Go.Web’,'Palm’,'iPAQ’);

$found_mobile=CheckSubstrs($mobile_os_list,$useragent_commentsblock);

if ($found_mobile) return true;
else return false;

}

如果你只想要android显示，可以编辑$mobile_os_list这个arry。</p>

于 2012-08-19T17:31:15.683 回答