video-js | A Polymer element for Video.js | Web Framework library
kandi X-RAY | video-js Summary
kandi X-RAY | video-js Summary
A Polymer element for Video.js
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of video-js
video-js Key Features
video-js Examples and Code Snippets
Community Discussions
Trending Discussions on video-js
QUESTION
I am trying to draw rectangle on mouse drag over the canvas. The canavs is overlayed over html5 video js player. The rectangle is getting drawn, but it does not start getting down from the right coordinates.
My canvas (overlayed over videos) is getting rendered with some margin like space (not margin I checked it) around it. I think this is the reason for rectangle not getting in synch with mouse cursor (it's a bit off). Here is my code
...ANSWER
Answered 2021-May-31 at 18:46I made this codesandbox is this what you are trying to achieve i had to tweak the code little bit to make it work, i think the main reason was the default margin or padding of some element. by setting
QUESTION
Get that error when try to get stream from any HLS source.
I tried to add videojs-contrib-hls lib , but its dont help. Maybe should i try some other player, and what player will properly work with hls sources?
...ANSWER
Answered 2021-May-26 at 12:14I used another player vue-vjs-hls. On this player hls work good, dont now why hls source not works at vue-video-player and video.js. What strange becouse vue-vjs-hls use video.js as core.
QUESTION
I copied this file from a user showing how to display a video using an npm library called videoJS:
...ANSWER
Answered 2021-Apr-27 at 19:57You need to load the video.js CSS files. For example:
QUESTION
I am trying to load some video content from Microsoft Azure, using Video.js, and I need to add some headers for SharedKey authorization. I have been trying various methods and doing research for several days, but I am hitting brick walls and could really use some assistance.
Important to note that this is for a mobile app written using Angular / Cordova.
This is how Azure suggests that we do it:
https://docs.microsoft.com/en-us/azure/media-services/latest/player-how-to-video-js-player
Basically, by attaching a function to videojs.Hls.xhr.beforeRequest.
Unfortunately, there are several problems with this approach. Here is a ticket in the videojs issue tracker trying to look for a solution to these issues:
https://github.com/videojs/video.js/issues/7207
In summary:
1- We are not using HLS/DASH. We are loading mp4 files from blob storage. And videojs "hands that off directly to the browser, and it handles all loading of things while not providing this extra set of functionality."
2- Even if we were to convert the media and use HLS, "this method won't be available because native playback is used for Safari with HLS.". (So do we need to use DASH? Or does that not work on Safari either?)
3- There is still no way to add headers for Subtitle tracks, whether we use native subtitles, or add them through videojs.players.video.addRemoteTextTrack.
I have also tried other alternative methods like
1- Trying to use xhook to intercept it.
2- Trying to use @angular/common/http/HttpInterceptor.
Neither method worked.
So, my questions would be:
1- Is there a method I'm overlooking that would allow me to add / inject headers to requests being made natively by the browser?
2- Could it perhaps be done with an authorization cookie? I have seen this mentioned in some other questions, but I couldn't find any concrete examples, and I'm not sure how it would work with Azure.
3- If all else fails, is there another video player I could use that does provide better support in regards to authorization options?
Any other suggestions would be also be appreciated. Thank you.
...ANSWER
Answered 2021-Apr-27 at 09:38Considering you're serving a video file stored as a blob in Azure Storage directly, you can make use of Shared Access Signature (SAS). A SAS provides a time-limited, permission-bound access to a blob.
The way it would work is when a user requests a video to be played, you will need to send a request to your backend service. Your backend service will create a SAS token for the blob with Read permission (only this permission is required to play the video) and some expiry date (depending on the length of the video). Your backend service will return the SAS URL for the blob (which would be something like blob-url?sas-token) which will be used by the video player to play the video.
You can find more information about Shared Access Signature here: https://docs.microsoft.com/en-us/rest/api/storageservices/delegate-access-with-shared-access-signature. You will need to create a Service SAS for your blob.
QUESTION
So I am trying to overlay a HTML canvas element over a 500x500 video. I always want the video to be 500x500. In my code, I've set the canvas height and width to be the same as the video height and width so they overlay right on top of one another. Unfortunately, whenever I run this, the canvas element always outputs a width of 800 and a height of 600. I believe this may have something to do with the size of the original video. However, I'm really not sure why my canvas elements won't pick up on those values. I also tried directly setting my canvas height and width to 500 but when I do that it won't overlay right on top of the video. I was just wondering if anyone knew why this might be occurring and if there is anything striking out to you in my code where I am setting these elements that is causing this to occur. I have also looked at other stack overflow posts before making this one and tried to get some context from those solutions but nothing has worked for me yet.
This is my .php file:
...ANSWER
Answered 2021-Apr-06 at 11:14I've made a demo below which shows the video element with a canvas overlay. The canvas renders the video with the same position and size as the video itself. If you Run code snippet and then Full page you'll get the best result.
To make sure that both the video and canvas are the same size, set the container to 500x500 with the video and canvas to 100% width and height.
I've use object-fit: cover; to make the video fully expand the width and height of the container.
Now, the video might be a lot larger than 500x500, so we'll need to convert a (for example) 1920x1080 video to a 500x500 viewport. To do this we'll need to make some calculations.
We start off by calculating the shrink factor. The height of the video will be the same height of the canvas, but the width of the video must shrink the same amount of pixels to make sure that the aspect ratio of the video stays the same.
Therefor we calculate height of canvas / height of video x 100. This gives us percentage that the video must shrink to fit the height of the canvas while keeping the right aspect ratio.
Now because the width of the video is still larger than the width of the canvas, we'll need to offset the video a bit to the left to center our video. We do this by doing (new video width - canvas width) / 2. This is the number in pixels the video needs to move left.
Use these values to draw the video in canvas element with the right dimensions.
QUESTION
Hello anyone know how to handle null exception before loading data from api i have an app which load data from api before loading it shows me. This error
...ANSWER
Answered 2021-Mar-26 at 06:01The problem is caused by your list userData. Not sure why you are giving it a value of null and asking for trouble, but you can assign it as an empty list.
Whenever you want to call that list or perform operations on it, you can check if it's null or has value. like this line in your code var url =userData[0]['link'];
change it into:
QUESTION
So I created a canvas on top of a HTML5 video originally, then I switched the video player from HTML5 to Video.js and I get the error
"Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)' at HTMLCanvasElement.".
The error occurs when I try to actually draw an image.
This is my HTML code using video.js:
...ANSWER
Answered 2021-Mar-18 at 05:28It seems that videojs will wrap your element in a
element that will take your 'sid attribute. So when you do document.getElementById("video"); instead of having the expected element, you got that wrapping .
You can workaround that issue by changing this line to something like
QUESTION
I've got this live streaming playing on a videojs player :
...ANSWER
Answered 2021-Feb-26 at 16:03I was referring in my question to the canvas element captureStream() method that return a MediaStream, well this method exists also for HTMLMediaElement (video or audio player).
See https://w3c.github.io/mediacapture-fromelement/#html-media-element-media-capture-extensions :
- HTML Media Element Media Capture Extensions
The method captureStream is added on HTML [HTML5] media elements. Methods for capture are added to both HTMLMediaElement and HTMLCanvasElement.
Both MediaStream and HTMLMediaElement expose the concept of a track. Since there is no common type used for HTMLMediaElement, this document uses the term track to refer to either VideoTrack or AudioTrack. MediaStreamTrack is used to identify the media in a MediaStream.
So my code became :
QUESTION
I'm using Video.js together with Vue.js and Electron.js and I'm trying to change the outline of the video player to something a bit better looking than the standard yellow outline but the outline just stays as it is.
My Video Component:
ANSWER
Answered 2021-Feb-10 at 12:20If I understand what you are saying, you are talking about the bowser focus, that blue line around the focus component.
you need something like
QUESTION
I tried to use logo plugin in videojs but the logo doesn't show up. I know there is a problem with my way to add the plugin i need help please
Here's my code
...ANSWER
Answered 2021-Jan-21 at 11:57ok after many and many tries I found a solution:
- first if you don't use node modules you will need to get the
videojs-logo.min.jsfrom the package videojs-logo plugin (you can get it from here ) add it in your project (in my case I put it in folder name script in a src folder). - Add the script tag in your html under
your html should look like this:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install video-js
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page
