Problems Implementing cloudinary video play with vue.js

TechieStephen
TechieStephen Member Posts: 2
edited November 2022 in Developer APIs

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.

Tagged:

Best Answer

  • TechieStephen
    TechieStephen Member Posts: 2
    Answer ✓

    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.

Answers

  • Ranson
    Ranson Cloudinary Staff Posts: 16

    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?


    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
    canhdinh Member Posts: 1
    edited September 2023

    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"

      }

    }