Video.js: issue to play video on ios with videojs API

[mat3000]

I have some trouble to play a video with videojs API on ios 9.2. It work perfectly on desktop.

Steps to reproduce :

1. run the source code on an ipad or an iphone
2. click on "action" button
   

   Results :

loading animation appear and after black screen, the video don't playing.

source code :

<video id="my-video" class="video-js" controls="" data-setup="{}" width="640" height="264" >
    <source src="medias/videos/film_1080p.mp4" type='video/mp4'>
</video>

<button id="action">action</button>

<script src="http://vjs.zencdn.net/5.9.2/video.js"></script>
<script type="text/javascript">

    var video = videojs( 'my-video');

    document.getElementById('action').onclick = function(){
        video.play();
    }

</script>

versions

Video.js 5.9.2
ipad air on ios 9.2
iphone 6 on ios 9.3.1

[gkatsev]

That should work, especially since that's what the videojs play button does anyway.
Do you happen to have a live example? Also, have you tried playing back your mp4 directly in the video element without videojs or even directly in the browser?
Based on the result, it sounds like iOS could just be having trouble playing that mp4 in the first place.

[mat3000]

Hello gkatsev,

Thanks for your help !

i have an example here : http://public.matdev.fr/videojs

To test the issue, you just need to turn user agent on iPad (tested with chrome and safari)

[hartman]

I suspect this has something to do with the option: movingMediaElementInDOM, which is on by default for iOS and detected by useragent.

[gkatsev]

One weird thing I'm seeing is a doubly-nested player div. videojs should be able to handle that, though, but can you try removing the data-setup={} attribute from the video element and seeing whether that fixes it?

[mat3000]

yes, it work.

thanks !

[gkatsev]

Interesting, I wonder why it does that double wrapping in this case. I'll investigate.

[sccorby]

@gkatsev Running into the same issue here.

If you setup the player automatically with 'data-setup', and then in your own javascript reference the player with videojs('myplayer').play() or any call along those lines, it actually initializes the player a second time on ios (it does not do that on other platforms). This causes all sorts of errors and issues, as you have two html5_api elements nested within each other.

[gkatsev]

I remember investigating this. I don't remember anything happening from it.
I'll put it on my TODO again.

[jeremyckahn]

I was able to fix this by initializing video.js with the controls property:

var myVideo = videojs(videoEl, { controls: true });

Importantly, I did not include the controls or data-setup attributes on the <video> element itself. So mine looks like this:

<video class="video-js vjs-default-skin vjs-big-play-centered" poster="img/video-poster.jpg">
  ...
</video>

I have not dug into the video.js code, but my guess would be that the library is not properly adding the controls attribute to the <video> element that gets inserted onto the page. iPads (specifically iPads but _not_ iPhones, for some reason), appear to require that attribute for videos to work at all. It must be a platform-specific browser bug.

[hscissors]

I can confirm that the nested data-setup tags cause the video player to silently die on the latest version of Safari on iOS. Not sure about the controls.

[gkatsev]

Finally got time looking into this. Turns out the issue is that we aren't recognizing that the player has been created for that element if videojs is called more than once, either by calling videojs multiple times or if both data-setup is used in addition to calling videojs manually. This is because on iOS, we cannot move the video element in the DOM so we re-create the element but doing so we lose the flag that tells us that a player has been created for that element.
Going to have a PR forthcoming.

[gkatsev]

Fixed in stable, release imminent.

[inoas]

Thank you very much. We got exactly this issue as well, iPad not working (Chrome with User Agent iPad, iOS Simulator iOS 10 iPad Air, HW iPad 4) but iPhone 5S with iOS 9 and 10 was working.

After the stable release was updated it fixed our issue.

[gkatsev]

@inoas thanks for the confirmation!

[kaatt]

I'm stuck on video.js v4. Does anyone know a workaround for fixing this? Or maybe can someone point me in the right direction to fix this by editing some file in video.js v4?

[maykbrito]

I'm with this issue too
someone has discovered how to resolve this?

I can't play in iOS
here is an example dvd.shekina.mus.br

[vaishnavravi33]

Hi,

I'm facing the same issue.
Videos are playing well in Chrome and Firefox on windows desktop.
But in iPad3 and iPhone6+ videos not working shows message written in a div inside video tag.

Dynamic HTML is generating from the server and Literal Control(ASP.NET) used to render the HTML.
I used both ways of VideoJS to initialize the video. Used Ways are -

Way 1.

HTML

<video id="my-video" class="video-js" controls preload="auto" width="640" height="264"
  poster="MY_VIDEO_POSTER.jpg" data-setup="{}">
    <source src="MY_VIDEO.mp4" type='video/mp4'>
    <source src="MY_VIDEO.webm" type='video/webm'>
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
    </p>
  </video>

Added JS and CSS file references in the head tag. When the page loads, Video.js will find this element and automatically set up a player in its place.

Way 2. Initialize a

HTML

JS

$(document).ready(function () {
var options = {
          controls: false,
         loop: true,
         preload: 'auto' };

var player = videojs('my-player', options, function onPlayerReady() {

  // In this context, `this` is the player that was created by Video.js.
  this.play();

  // How about an event listener?
  this.on('ended', function() {
    videojs.log('Awww...over so soon?!');
  });
});
});

Both ways working good in Desktop browsers.
But not works in iPad3 and iPhone 6+ and Internet Explorer (Windows 7 Desktop).

Please Help!

[vaishnavravi33]

Sorry I found the solution. My mp4 video encoding was not proper. Tried using videojs's default movie (https://vjs.zencdn.net/v/oceans.mp4) and found that it works.

To re-encode the video we can use handbrake(Download URL 'https://handbrake.fr/')" tool.