javascript - Hide HTML element if user is on an iOS device?

I want the code to check if a user is on an iOS device, and then, if they are not, hide the HTML input type "Play" button.

So, in my code, I'm sure if my iOS checking is wrong, of the code to hide the "Play" button, or both:

<!DOCTYPE html>
<html>    
<head>
<script type="text/javascript" src=".9.1.min.js"></script>                               

<script type="text/javascript">             
    var iOS = false,
    p = navigator.platform;

    if( p === 'iPad' || p === 'iPhone' || p === 'iPod' ) {
      iOS = true;
    }               
    if (iOS === false) {                    
      $("input").hide();
    }
</script>

<script type="text/javascript">
    function load() {
        var vid = document.getElementById('vid');
        vid.addEventListener('ended', function() {
          /*    alert('video ended'); */
          /*   vid.load(); */
        },false);
    }
</script>

<title>NEW ENTRY TEST</title>
</head>

<body>

<body onload="load();">

<video id="vid" src=".mov" width="640" height="480" autoplay></video>
<br>
<input type="submit" value="Play" onclick="document.getElementById('vid').play();">

</body>

</body>

</html>

Basically I just want this play button to display, only if the user is on an iOS device.

I know it's not working because the play button still displays on a regular (non-iOS) puter.

Curious to hear anyone's thoughts on this.

I want the code to check if a user is on an iOS device, and then, if they are not, hide the HTML input type "Play" button.

So, in my code, I'm sure if my iOS checking is wrong, of the code to hide the "Play" button, or both:

<!DOCTYPE html>
<html>    
<head>
<script type="text/javascript" src="http://code.jquery./jquery-1.9.1.min.js"></script>                               

<script type="text/javascript">             
    var iOS = false,
    p = navigator.platform;

    if( p === 'iPad' || p === 'iPhone' || p === 'iPod' ) {
      iOS = true;
    }               
    if (iOS === false) {                    
      $("input").hide();
    }
</script>

<script type="text/javascript">
    function load() {
        var vid = document.getElementById('vid');
        vid.addEventListener('ended', function() {
          /*    alert('video ended'); */
          /*   vid.load(); */
        },false);
    }
</script>

<title>NEW ENTRY TEST</title>
</head>

<body>

<body onload="load();">

<video id="vid" src="http://awp.diaart/ali/test/movies/testmovie.mov" width="640" height="480" autoplay></video>
<br>
<input type="submit" value="Play" onclick="document.getElementById('vid').play();">

</body>

</body>

</html>

Basically I just want this play button to display, only if the user is on an iOS device.

I know it's not working because the play button still displays on a regular (non-iOS) puter.

Curious to hear anyone's thoughts on this.

Share Improve this question edited Jun 4, 2013 at 22:56 dsgriffin 68.6k17 gold badges140 silver badges138 bronze badges asked Jun 4, 2013 at 21:49 shadowmoses 3433 silver badges18 bronze badges

How doesn't it work? Have you checked the value of p? Tried it on an iOS device and non-iOS device? – dsgriffin Commented Jun 4, 2013 at 21:52
Hey Zenith, thanks for the response. The "play" button still loads on a regular puter, so it can't be working. – shadowmoses Commented Jun 4, 2013 at 21:54
Also, I'm terribly new to Javascript. How would I check the value of p? I cobbled the code together after hours of research. – shadowmoses Commented Jun 4, 2013 at 21:56

Add a ment |

2 Answers 2

Sorted by: Reset to default 5

jsFiddle example here.

Firstly, it should be wrapped inside a $(document).ready:

$(document).ready(function(){  
  var iOS = false,
  p = navigator.platform;
  if( p === 'iPad' || p === 'iPhone' || p === 'iPod' ) {
     iOS = true;
  }
  if (iOS === false) {
     $("input[type=button]").hide();
  }
});

Now, the only potential problem you have left is your check case case using navigator.platform.

According to the specification, navigator.platform returns one of the following values: "Win32", "Linux i686", "MacPPC", "MacIntel" - none of which match your check case.

However, other sources on the internet seem to suggest that it does indeed return "iPhone", "iPad" etc. on the respective devices. As I don't own one of these devices, I can't test that theory out. But if it doesn't work as suggested, there are other documented ways to detect the iPhone, iPad and iPod - see Detect iPad users using jQuery?.

Once you've tested a solution that detects all three iOS products, store it in your p variable and your code should function as you wish.

Side Notes:

You should only have one <body>, and can merge the two seperate <script>'s into one.
You don't need both <!DOCTYPE html> and <html>. Remove the <html>.
<input>'s are supposed to be used in <form>'s.
I've also changed the type of the input from submit to button.
As @better_use_mkstemp mentioned, I don't see the need for the autoplay attribute on your <input> in this use-case (especially as you don't want it to be playable on iOS devices anyway).

Updated HTML:

<body onload="load();">
 <video id="vid" src="http://awp.diaart/ali/test/movies/testmovie.mov" width="640" height="480" autoplay></video>
  <br>  
  <input type="button" value="Play" onclick="document.getElementById('vid').play();"> 
</body>

Try taking out the if (p =='iPad') statement, and see if it hides it then. If it does, that means it's reading the platform as an iOS device.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Hide HTML element if user is on an iOS device? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)