videojs-vimeo: video won't play on mobile devices

@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.

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

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.

@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 😃.

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 👍

@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.

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

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.

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

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!

@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.

You should open two issues for separate bugs.

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