Problems Implementing cloudinary video play with vue.js

TechieStephen

Am trying to follow the training series on adaptive video streaming where the video player was implemented using react but I keep getting "cld.videoPlayer is not a function" when I try Implementing the video player in vue.js.

TechieStephen

Hi, thanks for your feedback.

I was able to fix it and get it working. The problem was from eslint "no-undef" rule.

Just had to tell it to ignore cloudinary.

Ranson

Hey TechieStephen,

That error message indicates that there is an issue with how the video player code is being included and can't be found.

Just to double check, have you checked out how to install the cloudinary video player code?

https://cloudinary.com/documentation/cloudinary_video_player#installation_and_setup

If possible, can you create a codesandbox with your code so we can see the issue and possibly make some changes to offer a solution?

canhdinh

Hi TechieStephen. Can you guide me how to fix the error ? Thank you very much

this is my code:

const cld = new Cloudinary({ cloud_name: 'manpuku' });

  useEffect(() => {

    const options = {

      sourceTypes: ['hls', 'mp4'],

      muted: true,

      controls: true,

      width: 500,

      sourceTransformation: {

        hls: [{ streaming_profile: 'full_hd' }],

        mp4: [{ quality: 'auto' }],

      },

      playbackRates: [0.5, 1, 1.5, 2],

    };

    const videoPlayer = cld.videoPlayer('cld-video-player', options);

    videoPlayer.source('trailer_movie');

  });

this is my .eslintrc:

{

  "globals": {

    "Cloudinary": "readonly",

    "cloudinary": "readonly"

  }

}