video won't play on mobile devices

[craigstar]

I tested on desktop(chrome and safari), both of them worked well. However, my iphone 6 and android Mi can not play the video. I can see the poster picture and big play button. but nothing happens when I click play button in my iphone 6. Things are slightly different on android. The default video player pops up when I click play button, but nothing can be loaded, keeps 0%. And my youtube videos works well both on desktop and mobile with videojs-youtube. My videojs is Video.js 5.8.0 here's my code: in html:

 <video
   id="video-player"
   class="video-js vjs-default-skin"
   controls
   data-video="vimeo"
   data-setup='{ "techOrder": ["vimeo"], "sources": [{ "type": "video/vimeo", "src":      "https://vimeo.com/146820026"}] }'
   >
</video>

in coffeescript

$('#video-btn').click ->
      $('#video-player').width('100%')
      $('#video-player').css({
        'min-height': $('.video-placeholder').height(),
      })
      videojs('video-player').load()
      videojs("video-player").loadingSpinner.hide()

[mikemcguire]

Im having similar issues but android chrome is working. I don't see any JS error message in console when testing iOS.

[craigstar]

@mikemcguire you're right! But it uses vimeo control(android chrome). videojs was disabled. Do you know any solutions?

[mikemcguire]

@craigstar yeah I looked into it for a while last night. There are still issues with the vimeo API that abstracts the play functionality in such a way that it can't be triggered by a button outside of it's iframe. Essentially iOS will block videos that aren't played via a user interaction. Somehow, somewhere that interaction gets lost in the Vimeo API. Im going to fork and see if I can't just get the default vimeo controls to appear on mobile, and the videojs controls to appear on desktop, as stopover.

[craigstar]

another issue found. With dynamical creating, disposing video elements, it works for the first time. but it throw me an error at the second initiation. Uncaught TypeError: Cannot read property 'vdata1458668645722' of undefined at function getElData(el) { in video.js.

$('#video-btn-vimeo').click ->
      video = '<video id="video-player" class="video-js vjs-default-skin vjs-big-play-centered"></video>'
      $(video).insertAfter $('.video-placeholder')

      $('#video-player').width('100%')
      $('#video-player').css({
        'min-height': $('.video-placeholder').height(),
      })
      videojs 'video-player',
        controls: true,
        techOrder: ["vimeo"],
        sources: [{
          type: "video/vimeo",
          src: $('#video-btn-vimeo').attr('data-video'),
        }],

$('#video-close-btn').click ->
      videojs('video-player').dispose()

First use the code above to create an video, then dispose(), then create again. error comes. Again, video-youtube works well. No luck for vimeo

[mikemcguire]

You should open two issues for separate bugs.

[twig-openlearning]

Also experiencing a problem with this.

Can't choose between Vimeo "firstplay" not working on videojs 4.x or iOS playback broken on videojs 5.x

[mikemcguire]

To overcome it is to bring back the vimeo controls and hide videojs controls on mobile. If you have a pro vimeo account you can further customize the vimeo controls.

[prock13]

@mikemcguire How do I go about doing this?: "To overcome it is to bring back the vimeo controls and hide videojs controls on mobile. If you have a pro vimeo account you can further customize the vimeo controls. "

[mikemcguire]

@prock13 It's been like a month and a half so I couldn't tell you exactly. If you start inspecting with developer tools you can see that the vimeo controls are being hidden with a variety of CSS & JS. Once you can find which elements are being hidden you can find the code manipulating them by searching this plugin with their class selectors. Then just making that conditional based on mobile/desktop, which there are a lot of different ways of detecting, some better than others. But up to you.

[cemerson]

I'm also hoping for a solution here. So frustrating that YouTube works fine on iOS but Vimeo doesn't. If anyone finds a working hack/solution please chime in!

[NemSavic]

It looks like the issue is that the Vimeo API does not support the Play event on mobile. https://developer.vimeo.com/player/js-api#compatibility

[mikemcguire]

@cemerson @NemSavic we've already discussed the cause and a possible solution. Unless you're submitting a PR I think it's safe to not send additional redundant emails to everyone.

[mikemcguire]

Also just to make it easier for everyone coming to this thread. If you don't want to build in the showing of Vimeo controls into this plugin yourself you can still embed a regular vimeo video and this videojs video and show/hide with CSS & media queries, it's just not an elegant or scalable solution.

[NemSavic]

@mikemcguire wow did @cemerson's bump to long running issue and my elaboration on what was previously stated as "issues with the Vimeo API" really warrant down votes?

I understand that the Vimeo controls are hidden on mobile devices, however being able to surface them is a separate issue. In my opinion the real issue is that no control UI, including the one packaged with videojs, will work on mobile devices due to the current limitations of the Vimeo API.

That being said, I agree that for now the only workaround to this issue is resolving the mobile Vimeo controls. Since it was requested so nicely... I created a commit with a quick adjustment to the css when it runs on mobile devices, which you can find here 84fb1f563be191460249dd3ac194bfa838602d44. Simply adjusting the height/width resolved the issues I was experiencing for my use case. I can't promise that this will work for everyone, but hopefully it still helps.

@mikemcguire I didn't create a pull request because I've only tested it for my use case and I think that what I added is a quick and dirty solution. If anyone else can confirm that this works for them, and if you feel that my solution is adequate, I will gladly create a pull request.

[mikemcguire]

@NemSavic sorry I'm not active on github but a thumbs down is fairly meaningless to me. But ultimately this isn't a problem caused by this library. I was able to get this to work on android and ultimately presented an issue with iOS. It would be bad practice to do a specific mobile check because what is mobile is arbitrary and it would be even worse practice to test for iOS within the library. It's far more practical for an individual to find a fix on your own and implement. The library itself works as intended. As you and I pointed out its particular with the Vimeo Api and their abstraction and how it's handled by iOS. Ultimately a bug should be filed against Vimeo's API or ios. This isn't a bug with this videojs plugin and thus there is no longer a need for this issue to continue to be open.

[mikemcguire]

@NemSavic if it would make you feel better I can try and un-thumbs-down your comment

[NemSavic]

@mikemcguire I don't think that a limitation to the API can be filed as a bug with Vimeo.

What would be helpful is including something like a list of compatibility issues to the readme. As it stands right now videojs by itself is compatible with all devices. It is very unlikely for someone working with videojs not to expect the same from this library. If having the compatibility clearly stated in the readme saves at least one person from having to Google their issue, then I think it's definitely worth it.

Also unless the readme called out the iOS compatibility issue, I would have a hard time saying that the library itself works as intended. The library attempts to execute the same functionality for all devices, despite the fact that the API it utilizes has been documented not to work for mobile. What would be amazing is if the library accounted for the API compatibility issue and had graceful degradation built in. I know that's a lot to ask for since we don't live in a perfect world where we all have too much free time, but maybe someone out there in the community will take on the challenege :smiley:.

Excuse me if it sounds like I'm attacking the library. The is not my intention. I think the library is awesome and I'm thankful for everyone who has contributed :+1:

[mikemcguire]

@nNemCavic well you were the one who posted the link to Vimeo admitting they don't support mobile in their api. And I can can firm it works for android. It's pretty cut and dry. If you understand the technologies in hand it's clearly evident that this plugin isn't what needs to fix itself.

[NemSavic]

@mikemcguire we'll have to agree to disagree :smile:. If you're tired of getting emails to this thread with people's questions/ideas/resolutions you can always unsubscribe.

[mikemcguire]

Well if you provide a valid argument which states the bug in this plugins implementation I'll submit the PR myself.

[NemSavic]

Calling an API expecting it to X, when it doesn't even claim to do X. That's not a valid argument?

[mikemcguire]

Expecting a library to conform to proprietary edge cases that don't conform to the html5 spec isn't a justifiable . Especially when there isn't a best practice way of solving the issue. But hey if there is something I'm not considering, there's the beauty of open source and fixing it yourself. I've already dug in the code and made it conform to my standard of mobile. But because there is no universal standard for mobile or future proofing the detection of iOS I have a hard time seeing a problem with this plugin.

[NemSavic]

Do you have a solution or should we all just wait to see if Vimeo ever updates their API?

[gkatsev]

Ok, this no longer seems like a productive discussion. We should add a "this plugin works wherever vimeo's api works" with a link to the above page to the README. However, we should see whether we can get it to work another way. Maybe the best solution is on ios to disable our controls and only use the native (or even just vimeo) controls.

[NemSavic]

@gkatsev I totally agree. When I mentioned graceful degradation earlier I was thinking of forcing the native Vimeo controls on mobile. In the commit I made earlier I set ytControls whenever it's running on mobile, but I wasn't able to figure how to also disable the videojs controls from within the plugin itself.

For my use case simply setting controls to false when running videojs was good enough, but it would be extremely handy if we could accomplish the same thing from within this library. If anyone more familiar with videojs knows how to do this please let me know.

[gkatsev]

I'll try and take a look at this next week. Super busy right now with other more pressing issues.

[twig-openlearning]

Rather than removing support for mobile in general, can't we serve the file directly and let videojs handle the controls?

You can get the direct link to the source video via the URL pattern http://player.vimeo.com/video/<video_id>/config. I've been looking into this as a workaround because of the inactivity in this issue regarding mobile fixes.

More info at http://stackoverflow.com/a/23045421

[gkatsev]

Using the direct video url is a possibility, though, right now videojs-vimeo is basically a wrapper around the vimeo player so, we'd have to think more if videojs-vimeo should be doing the work of extracting the direct player url or just the user of videojs/videojs-vimeo.

[gkatsev]

Actually, reading that SO posting, it seems like it requires an XHR call to vimeo, however, that requires CORS headers to be enabled and they don't have it. Also, vimeo doesn't officially recommend or support this method which is definitely a huge minus.

[twig-openlearning]

We're getting a lot of mobile users complaining about the inability to play videos so there's not much to lose on our end by using the /config/ url for the time being until Vimeo decides to fix their API.

[prock13]

I would really appreciate someone that can help me come up with a workable solution. I'm trying to use this with the ima ads plugin and the only thing preventing me from launching the project is that all our videos are on Vimeo Pro and 80% of our users are mobile!

[cemerson]

@prock13 have you tried what twig suggested earlier (using the /config url)? I'm actually planning on trying it out myself soon because I have a similar need for a Cordova/Phonegap app I'm working on. I'll report back with how it works. Please share if you come to any conclusions/findings on your end as well.

[prock13]

@cemerson I have not had a chance to try that...hopefully will be able to in the next couple of days. I'm thinking though, that @gkatsev may be right it we may have CORS header issue.

[mikemcguire]

Yeah I feel like I tried that w/o the vimeo plugin and hit the CORS issue, although it's been a while and not sure why I went away from that route. I ended up just tweaking to default to vimeo controls on mobile by tweaking the injectCSS method and adding an _ismobile helper method, which is more or less superficial, I'm not unbinding events or properly calling the player API to hide/show control. Does the videojs tech implementation provide any type of access to the player instances?

[gkatsev]

No, techs do not have a reference to the player itself currently.

[prock13]

Ok so after thinking about this some more, in my case we are using Vimeo Pro and when we upload videos, there is an tab in the Vimeo admin that provides links to all the MP4s of the video in the different quality/sizes (see attached image). I tested with that link and in that case I don't even need the Vimeo plugin since it's just the url source of an mp4.

Here's the screenshot:

So this solution works, as a stop gap solution but I'd rather not use it long term for the following reasons:

• We would basically need to find save these url's so that we can deliver the the adequate one (HD, Standard, etc.)
• According to Vimeo, these links do not expire nor respect privacy preferences. Anyone with access to these links will be able to play and download the video. May not be a huge issue, but I'd like to prevent my videos from being played anywhere except my site.
• I was not able to get twig's config URL to work in order to be able to grab the mp4 url's dynamically. Maybe if someone gets this to work, our manual step of saving the mp4 url's of each of our videos would be eliminated.

Anyway, so for those of you that can get to the mp4 url of your Vimeo video, you can just bypass using this plugin all together.

[brewern]

@NemSavic your patch worked great! I made an addition to hide the play button and the poster we provide through VideoJS.

[gkatsev]

It is working against master now.

[prock13]

What was the solution?

[gkatsev]

Update videojs and update to use vimeo's official player API.