Question

is it possible to have a div tag that is visible only in specific devices?

We have a video page that has HTML5 fallback that plays well on desktop and iOS devices but not on Android (specifically samsung S3)

I did some research and the probable reason behind it is that .m3u8 is not fully supported in android and RTSP has more success reports.

I’d like to put a div tags under our video embed code that will only show on android devices.

Something like…

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

Is this possible?

By the way. i am using JW Player on my page.

Thanks

Answer 1

Try this:

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

To explain: JavaScript finds out if user use Android or not. If users use Android it adds <a href="rtsp_url">Android user please click here to watch video</a> to <div id="video">, if not it adds regular HTML 5 <video> tag.

Note: Instead of <video>This is HTML 5 video for non-Android users</video> add your video code.