Help me please. I'm trying to create a playlist with many videos around 50-60. but I see only 2 videos. after the second video does not start on the next video, just stops. I didnt get an error on the console.

code:

<script> var cld = cloudinary.Cloudinary.new({cloud_name: '*****'}); var demoplayer = cld.videoPlayer('doc-player').width(550); demoplayer.playlist(<?php echo json_encode($video_list)?>); </script>

all video items have format below:

{ "publicId": "uontatdbg1ukamjimlwb", "transformation": [ { "overlay": "text:arial_30:test", "y": 33, "x": 0, "gravity": "north" }, { "overlay": "gg6ikklw1grlf3xbbkhq", "width": 166, "height": 166, "y": 33, "x": -450, "gravity": "south" }, { "overlay": "mk1rokxe1pcs2luan3vc", "width": 166, "height": 166, "y": 33, "x": 450, "gravity": "south" }, { "overlay": "rr8hfzjvsingo8gmkwqj", "width": 166, "height": 166, "y": 33, "x": -150, "gravity": "south" }, { "overlay": "ezjzn3qa4jwjc0ts04o0", "width": 166, "height": 166, "y": 33, "x": 150, "gravity": "south" } ]

It seems that seekThumbnails option forces player to make GET request (with the wrong URL) to get captions for image sprite preview.
It builds the URL itself depending on the video file name and its path.
As a result, I get a 404 error because the URL for the captions is wrong.

I see two requests (getting captions) in the networking:

1. Correct URL

method GET
status 200
type vtt
URL https://OWN_CLOUDINARY_HOST/.../videos/CAPTIONS_NAME.vtt

2. Wrong URL

method GET
status 404
type gif
URL https://res.cloudinary.com/PROJECT_NAME/video/upload/fl_sprite/v1/videos/VIDEO_NAME.vtt

video URL:
https://res.cloudinary.com/PROJECT_NAME/video/upload/v1/videos/VIDEO_NAME.mp4

Context

I eagerly generate a video and an image for its poster. They are then used through their raw URL in the cloudinary player:

const cld = cloudinary.videoPlayer(
  'https://res.cloudinary.com/demo/video/upload/w_260,h_200,c_crop,g_north/sample.mp4',
  {
    posterOptions: {
      publicId:
        'https://res.cloudinary.com/demo/video/upload/a_hflip,w_260,h_200,c_crop,g_north/sample.jpg',
    },
  }
)

Problem

Due to this line (https://github.com/cloudinary/cloudinary-video-player/blob/edge/src/plugins/cloudinary/models/image-source.js#L17), the end suffix of the image is removed. This results in the same image being regenerated lazily which defeats the point of having it done eagerly.

Also it means that the poster for the video will only appear after few seconds which leads to a poor user experience.

This problem occurs solely for images since the constructor of the video source only removes the suffix when the public_id is not a raw url (https://github.com/cloudinary/cloudinary-video-player/blob/edge/src/plugins/cloudinary/models/video-source/video-source.js#L29).

Is this something that could be fixed ?

Cheers,

https://codepen.io/miki-cloudinary/project/editor/DzvKzy/ (returns 404)

Should be pointing to... ???

I am trying to use this in an Angular 17.1.2 app set for the new ESM build @angular-devkit/build-angular:application.
I import this in a stand alone component:

import cloudinary from 'cloudinary-video-player';

When I try to use it:

ngOnInit(): void {
cloudinary.videoPlayer('player', {
cloudName: 'demo'
});
}

I get an error on cloudinary.videoPlayer

Property 'videoPlayer' does not exist on type 'typeof VideoPlayer'

I go to definition on cloudinary-video-player and I see squiggles on

import { VideoJsPlayerOptions } from 'video.js';

Module '"video.js"' has no exported member 'VideoJsPlayerOptions'. Did you mean to use 'import VideoJsPlayerOptions from "video.js"' instead?

What am I doing wrong?
Anyone has this working in Angular even if its an earlier version?

I want to use this because of the analytics features. I am using

"cloudinary-video-player": "^1.10.6",

The issues I am having. When we using the this plugin and initialize the player. cloudinary source loaded but not display the progress bar and ending time.

My source file extension was .webm and .mkv

var cl = new cloudinary.Cloudinary({cloud_name: "cloud _name", secure: true});
       const vplayer = cl.videoPlayers('.video-player-init',{
           streaming_profile: "hd",
           controls: true,
           playbackRates :[1, 1.5, 2]
       });

Hi admin,

We have some videos on our page that using cloudinary video player and source is using video from cloudinary media library. Turns out all videos are downloaded automatically. It drain users bandwidth and performance. Is there any way to only download the video when user play the video and buffer the video? we already use data-cld-autoplay-mode="never"

Thank you

There is a problem regarding access to certain videoJS API options,

E.g passing the overrideNative option either by using videoPlayer.videojs.default or videoPlayer.videoJS(throwing an error) fails using the Cloudinary video player , but works for the native VideoJS player.

(overrideNative option allows for streaming video players to play smoothly on Android)

html5: { 
  hls: { 
    overrideNative: true 
   } 
},

It would be also awesome to have an option straight in the Cloudinary player, since playback on certain Android device is choppy for streaming m3u8 files

@cnairi

When loading an external video source (like vimeo) and setting the allowUsageReport param the url still appends "?_s=vp-1.4.0" to the end of the query

Hi Team Cloudinary!

Is this going to cause an issue? I've seen it for a while but we are just starting to go through all the warnings and follow up with the different vendors.

Cheers,
Bjorn

most of m3u8 streams work on cloudinary player but there m3u8 links doesnt work that works on other players like jwplayer, videojs. it says "Network request failed". sometimes works sometimes not?

Hi Team!

Lodash is HUGE and takes a perfomance hit. Please use lodash-es to use only the specific things you need to use for this project.

You might be using lodash in several of your projects. Please move all over to lodash-es. It's a quick one line-replacement.

Thank you

Ladies and gentleman, tests on master fail and I kind of can't understand why.

Test Suites:   14 failed, 1 passed, 15 total
Tests:         34 failed, 2 passed, 36 total
Snapshots:     0 total
Time:          15.661s
Ran all test suites.

This is either a question about documentation or a feature request :)

Is there a way to force a particular base url when setting the video source? e.g.

videoPlayer.source({ 
  "baseUrl": "mediavine-res.cloudinary.com",
  "publicId": "...", 
  "transformation": { ... } 
})

The reason for this is that we have a cloud URL of mediavine-res.cloudinary.com/..., but the generated URL for some transformations (DASH/VP9) end up being cloudinary.com/mediavine/... resulting in a 403 error.

Furthermore, we have a special case where we make requests to a shield URL that is routed to cloudinary (video-shield.mediavine.com), but we're not able to do this with the Cloudinary Player, as far as I can tell.

Is this something that could be done by directly accessing the VideoJS instance? Or would this be a reasonable addition to this library? I'd be happy to make the contribution, but may need some direction about where to look.

Thanks in advance!

videojs-ima relies on lodash.

Would be much better if it could rely on lodash-es

googleads/videojs-ima#1041

Here's the issues I am having. When using the cloudinary player widget in desktop web app everything works as expected.
However, whenever I simulate a mobile device in chrome as soon as I play the video I get the following error:

cld-video-player.min.js:1 VIDEOJS: ERROR: TypeError: Cannot read property 'update' of undefined
    at i.a [as update_] (cld-video-player.min.js:1)
    at i.n [as update] (cld-video-player.min.js:1)
    at d.r (cld-video-player.min.js:1)
    at HTMLDivElement.r (cld-video-player.min.js:1)
    at HTMLDivElement.u.dispatcher (cld-video-player.min.js:1)
    at Ce (cld-video-player.min.js:1)
    at d.Qi [as trigger] (cld-video-player.min.js:1)
    at d.xi.(anonymous function) [as handleTechTimeupdate_] (http://localhost/Framework/Resources/Scripts/src/4_Modules/cld-video-player.min.js:1:427555)
    at f.r (cld-video-player.min.js:1)
    at HTMLVideoElement.r (cld-video-player.min.js:1)

Here's the stack trace for the unminified version:

VIDEOJS: ERROR: TypeError: Cannot read property 'update' of undefined
    at SeekBar.update_ (cld-video-player.js:22932)
    at SeekBar.update (cld-video-player.js:22951)
    at bound (cld-video-player.js:12876)
    at SeekBar.throttled [as update] (cld-video-player.js:12909)
    at Player.bound (cld-video-player.js:12876)
    at HTMLDivElement.bound (cld-video-player.js:12876)
    at HTMLDivElement.data.dispatcher (cld-video-player.js:12499)
    at trigger (cld-video-player.js:12631)
    at Player.trigger$$1 [as trigger] (cld-video-player.js:13492)
    at Player.(anonymous function) [as handleTechTimeupdate_] (http://localhost/Framework/Resources/Scripts/src/4_Modules/cld-video-player.js:33522:17)

I using the same codebase for both desktop and mobile.

warning cloudinary-video-player > @babel/[email protected]: 🚨 This package has been deprecated in favor of separate inclusion of a polyfill and regenerator-runtime (when needed). See the @babel/polyfill docs (https://babeljs.io/docs/en/babel-polyfill) for more information.
warning cloudinary-video-player > @babel/polyfill > [email protected]: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.

according to this issue on compass-mixins, this tool is no longer being supported... and it throws a warning for webpack, is there a plan to try and squelch this error?

Igosuki/compass-mixins#109

Hi guys,

I saw you added support for raw URLs. Is it possible to use it for Playlists and/or recommendations too? I was not able to figure it out. If so, could you show me an example? If not, are you planning to add it in the future?

Thanks

It seems like playAtIndex(index) doesn't exists, can you share a clear way on how to access this method from the player instance?

Hi,

Is there any example for displaying the picture-in-picture button?

Running npm install cloudinary-video-player in PowerShell on Win 10 is throwing the following error

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `cp env.example.js env.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

I have cygwin installed, which adds the cp command and typically fixes this common issue with other packages.

Any help greatly appreciated.

The video player JS size is 1.4MB minified: https://unpkg.com/[email protected]/dist/cld-video-player.min.js

This seems excessive. We would love to use this library but can this be reduced? Maybe the library split into modules which can be optionally loaded separately? VideoJS should also be required as a dependency and not bundled.

npm audit finds vulnerabilities in your packages, could you update optimize-css-assets-webpack-plugin?

                       === npm audit security report ===


                                 Manual Review
             Some vulnerabilities require your attention to resolve

          Visit https://go.npm.me/audit-guide for additional guidance


  Moderate        Denial of Service

  Package         js-yaml

  Patched in      >=3.13.0

  Dependency of   cloudinary-video-player [dev]

  Path            cloudinary-video-player > optimize-css-assets-webpack-plugin
                  > cssnano > postcss-svgo > svgo > js-yaml

  More info       https://nodesecurity.io/advisories/788


  High            Code Injection

  Package         js-yaml

  Patched in      >=3.13.1

  Dependency of   cloudinary-video-player [dev]

  Path            cloudinary-video-player > optimize-css-assets-webpack-plugin
                  > cssnano > postcss-svgo > svgo > js-yaml

  More info       https://nodesecurity.io/advisories/813

found 2 vulnerabilities (1 moderate, 1 high) in 9283 scanned packages
  2 vulnerabilities require manual review. See the full report for details.

Getting the following error after upgrading to v1.9.5

Playback cannot continue. No available working or supported playlists.

Possibly related to this issue in video.js videojs/http-streaming#910

I tried to reference the src/index.js file but could not resolve references as they are not relative paths:

import 'styles/main.scss'
import cloudinary from 'cloudinary-core'
import VideoPlayer from 'video-player'
import videojs from 'video.js'

This should work if it was written like this:

import cloudinary from 'cloudinary-core'
import videojs from 'video.js'
import './styles/main.scss'
import VideoPlayer from './video-player'

Getting this every time I run an install.

warning cloudinary-video-player > [email protected]: This package is deprecated and unmaintained. We recommend no longer using this package. Users of videojs-contextmenu-ui should update to v5.0.0 or newer.
warning cloudinary-video-player > video.js > [email protected]: no longer maintained
warning cloudinary-video-player > videojs-contextmenu > video.js > [email protected]: no longer maintained
warning cloudinary-video-player > videojs-ima > [email protected]: This module has moved and is now available at @hapi/cryptiles. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
warning cloudinary-video-player > videojs-ima > cryptiles > [email protected]: This module has moved and is now available at @hapi/boom. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
warning cloudinary-video-player > optimize-css-assets-webpack-plugin > cssnano > autoprefixer > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning cloudinary-video-player > optimize-css-assets-webpack-plugin > cssnano > postcss-merge-rules > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning cloudinary-video-player > optimize-css-assets-webpack-plugin > cssnano > postcss-merge-rules > caniuse-api > [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
warning cloudinary-video-player > videojs-ima > cryptiles > boom > [email protected]: This module has moved and is now available at @hapi/hoek. Please update your dependencies as this version is no longer maintained an may contain bugs and security issues.
warning cloudinary-video-player > optimize-css-assets-webpack-plugin > cssnano > postcss-merge-rules > postcss-selector-parser > [email protected]: I wrote this module a very long time ago; you should use something else.