CODEWITHSUNDEEP
videohtml5-video
Jeremy
Jeremy

Reputation: 973

Video runs in webpage but not in smartphone

I have a script that works perfectly in a webpage (to play a video) but it doesn't work when seen in a smartphone. Can anyone help ?

Probably the way how videos are played in a webpage is different than when they are played in a smartphone ?

Here is the complete code for the popup that is running the video :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="//vjs.zencdn.net/4.11/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.11/video.js"></script>
</head>
<body>

    <video id="video_53" class="video-js vjs-default-skin vjs-big-play-centered"
      controls preload="none" width="600" height="300" poster="filei.php?img=1440519095-AIDACTIV-presentation-des-cours-MASTER-DYNAMIQUE-DEFINITIF-" data-setup='{"example_option":true}'>
     <source src="filep.php?f=53&t=t&type=mp4&time=1443210646" type="video/mp4" />
     <p class="vjs-no-js">Veuillez utiliser un navigateur moderne et mettre à jour pour pouvoir visualiser la vidéo</p>
    </video>

    <script>
  jQuery( document ).ready(function() {
      if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
          jQuery('#video_53 video source').attr( {
                src : 'filep.php?f=53&t=t&type=webm&time=1443210646', 
                type : 'video/webm', 
          });
      }
  });
</script></body>
</html>

The working code can be seen at http://www.domain.com/. On the right column, we have two videos, one below another, that opens in a popup.

Probably it has something to do with the vjs.zencdn code or simply there an issue with the type of video (video/mp4 and video/webm here) for the smartphones ?

Thanks for any help.

Upvotes: 0

Views: 141

Answers (1)

Mick
Mick

Reputation: 25471

Firstly, just to note that the second video is not actually playing at all on either Chrome or Safari on a MAC, on Safari on an iPhone or on a Samsung Android tablet - the issue is not with the format/browser, rather that the link to the video source is returning a blank html doc rather than a video.

In other words src link in the HTML5 video tag below is not actually returning a video:

<video id="video_0_html5_api" class="vjs-tech" preload="none" poster="filei.php?img=" data-setup="{&quot;example_option&quot;:true}" src="filep.php?f=0&amp;t=t&amp;type=mp4&amp;time=1443304042">
 <source src="filep.php?f=0&amp;t=t&amp;type=mp4&amp;time=1443304042" type="video/mp4">
 <source src="filep.php?f=0&amp;t=t&amp;type=mp4&amp;time=1443304042" type="video/webm">
 <p class="vjs-no-js">Veuillez utiliser un navigateur moderne et mettre à jour pour pouvoir visualiser la vidéo</p>
</video>

The first video does work on all the above including the mobile devices.

However, playback is problematic on an Android device with either the default browser or chrome and it appears to require the video play/pause button to be hit multiple times. It may be that this is what you are seeing, rather than the video not playing at all. It does play if you do the above so the video format is fine.

There is some discussion on this problem in various Android Video forums and it appears it may be related to an Android Web 'double' click problem - when you hit the play button it actually generates two clicks, playing and immediately pausing the video. See this discussion here specifically around video.js:

Upvotes: 1

Related Questions