android - 仅在 android 上显示的 div

Question

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

我们有一个具有 HTML5 回退的视频页面，该页面在桌面和 iOS 设备上播放良好，但在 Android(特别是三星 S3)上播放不佳

我做了一些研究，这背后的可能原因是 .m3u8 在 android 中没有得到完全支持，而 RTSP 有更多的成功报告。

我想在我们的视频嵌入代码下放置一个仅在 Android 设备上显示的 div 标签。

有点像...

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

这可能吗？

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

谢谢

Answer 1

试试这个:

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>添加您的视频代码。