Player.js: Console Error when Loading Video

[paulmolluzzo]

This issue is pulled from https://github.com/vimeo/player.js/issues/43#issuecomment-260377257 and most of it is a copy.

In trying to get a working example I think I narrowed down the issue and it's possibly not because of this library but instead some other Vimeo JS. 😄 Specifically, the error is line 8 of VimeoPlayer - v2.39.3.

The error looks like it's because of the content security policy, not because of the image being null. Modifying the CSP on the site didn't correct the error, so I'm starting to think the error is outside of my control entirely. I'm using this on a Shopify store and cannot modify server settings. I tried adding a more open CSP using a meta tag, but that didn't work either.

Expected Behavior

When loading a video, I don't expect a console error. 😄

Actual Behavior

There is a console error when a first video is loaded.

Steps to Reproduce

Steps to reproduce _on the site that I'm working on_ are pretty simple:

player = new Vimeo.Player([some_element]));
player.loadVideo(152464736).then(function(data){ console.log(data)});

The example above uses a public video, but I can reproduce with other video IDs that I have (which are private).

player.js:8 Refused to load the image 'https://player.vimeo.com/video/null' because it violates the following Content Security Policy directive: "img-src https://i.vimeocdn.com https://secure-b.vimeocdn.com https://f.vimeocdn.com https://vimeo.com https://sb.scorecardresearch.com https://ssl.google-analytics.com https://secure.gravatar.com https://i0.wp.com https://i1.wp.com https://i2.wp.com https://f.vimeocdn.com".

In that error it's saying the video ID is null, but it's actually being passed in correctly. (I've even tried hardcoding in an ID to be sure I'm actually loading a real ID.) I'm not sure where it's getting null from. My code is below, but if I put a console.log(data) inside the loadVideo().then() I always see the correct ID being passed back. No errors are coming out of the catch().

myWorkoutPlayer.loadVideo(chosenVideoId).then(function(data) {
  myWorkoutPlayer.getVideoTitle().then(function(data) {
    $('#myWorkoutPlayer .modal-subtitel').text(data);
  });

  var oneIndexedPosition = currentPlaylistposition + 1;
  var updatedWorkoutText = 'My Workout (' + oneIndexedPosition + '/' + customerVideoQueue.length + ')';
  $('#myWorkoutPlayer #modalTitle a').text(updatedWorkoutText);
  return myWorkoutPlayer.play();
}).catch(function(err) {
  console.log(err);
});

As for creating a working demo of the issue, I have not had success replicating outside of the Shopify store. The theme that we are working on that uses the Vimeo library and produces the issue is not public, so I cannot share a direct link. :frowning_face:

[Moghul]

I get the same thing except it looks like this:

Refused to load the image 'android-webview-video-poster:default_video_poster/-1156625692707211848' because it violates the following Content Security Policy directive: "img-src https://i.vimeocdn.com https://secure-b.vimeocdn.com https://f.vimeocdn.com https://vimeo.com https://sb.scorecardresearch.com https://ssl.google-analytics.com https://secure.gravatar.com https://i0.wp.com https://i1.wp.com https://i2.wp.com https://f.vimeocdn.com".

It's inside the iframe, so it's definitely something from this. Changing my own page's CSP didn't fix it, so I'll probably have to declare that rule in my config file.

I'm not sure if the resource even exists, so that might not be the fix anyway.

EDIT:
Added
<allow-intent href="android-webview-video-poster:*" />
to my config file, but the CSP inside the iframe does not update.

EDIT 2: Could not find a mention of it in the iframe, or the min.js file. Seriously, how do I get rid of this? Online, all I can find is to add android-webview-video-poster: to img-src CSP.

I should probably also mention that everything works fine (even the thumbnail which is the first frame of the video), even if this error is happening.

[arumuganainar73]

I get the same:

Refused to load the image 'android-webview-video-poster:default_video_poster/-6981630719177125345' because it violates the following Content Security Policy directive: "img-src https://i.vimeocdn.com https://secure-b.vimeocdn.com https://f.vimeocdn.com https://vimeo.com https://ssl.google-analytics.com https://secure.gravatar.com https://i0.wp.com https://i1.wp.com https://i2.wp.com https://player.vimeo.com https://f.vimeocdn.com".

[luwes]

I believe this is fixed in the newest Vimeo player release. Thanks for your patience.

[dilakshandc]

error still existing. ;/

[Mr-Anonymous]

I still get the error. I embed the video iframe like this:

<iframe src="https://player.vimeo.com/video/{{ $videoId }}?badge=0&autopause=0&player_id=0" width="{{ $width }}" height="{{ $height }}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

When the above iframe is loaded in my ionic android app, the console throws these errors:

Refused to load the image 'android-webview-video-poster:default_video_poster/********************' because it violates the following Content Security Policy directive: "img-src 'self' data: https://i.vimeocdn.com https://secure-b.vimeocdn.com https://f.vimeocdn.com https://vimeo.com https://secure.gravatar.com https://i0.wp.com https://i1.wp.com https://i2.wp.com https://player.vimeo.com https://*.ci.vimeows.com https://f.vimeocdn.com".