Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

issue to play video on ios with videojs API #3283

Closed
mat3000 opened this issue Apr 26, 2016 · 18 comments
Closed

issue to play video on ios with videojs API #3283

mat3000 opened this issue Apr 26, 2016 · 18 comments
Assignees

Comments

@mat3000
Copy link

mat3000 commented Apr 26, 2016

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

@mat3000 mat3000 changed the title play video on ios with videojs API issue to play video on ios with videojs API Apr 26, 2016
@gkatsev
Copy link
Member

gkatsev commented Apr 26, 2016

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
Copy link
Author

mat3000 commented Apr 26, 2016

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
Copy link
Contributor

hartman commented Apr 26, 2016

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

@gkatsev
Copy link
Member

gkatsev commented Apr 26, 2016

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
Copy link
Author

mat3000 commented Apr 27, 2016

yes, it work.

thanks !

@gkatsev
Copy link
Member

gkatsev commented Apr 27, 2016

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

@sccorby
Copy link

sccorby commented Jul 19, 2016

@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
Copy link
Member

gkatsev commented Jul 19, 2016

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

@gkatsev gkatsev self-assigned this Jul 19, 2016
@jeremyckahn
Copy link

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
Copy link

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
Copy link
Member

gkatsev commented Sep 19, 2016

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
Copy link
Member

gkatsev commented Sep 28, 2016

Fixed in stable, release imminent.

@gkatsev gkatsev closed this as completed Sep 28, 2016
@inoas
Copy link

inoas commented Sep 29, 2016

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
Copy link
Member

gkatsev commented Sep 29, 2016

@inoas thanks for the confirmation!

wmfgerrit pushed a commit to wikimedia/mediawiki-extensions-TimedMediaHandler that referenced this issue Sep 30, 2016
The main fix we want is videos playing in iOS

See
videojs/video.js#3283

Change-Id: I36efab34da33bc126b3fa63993890b6caead8a20
@kaatt
Copy link

kaatt commented Aug 14, 2017

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
Copy link

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
Copy link

vaishnavravi33 commented Sep 21, 2018

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

@vaishnavravi33
Copy link

vaishnavravi33 commented Sep 21, 2018

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.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators May 26, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

10 participants