stanko / html-canvas-video-player Goto Github PK

Greetings,

I use Bower to help me manage my dependencies on my web projects, which is the best way I found to keep my dependencies up to date.
If you don't know Bower yet, you can find on its website a good explanation on how to register your library .

Thanks a lot for your great work!

Having a hard time getting the video to loop after it initially plays. Am I missing something or is that not an option?

The drawn video jitters (lags, plays, lags) when loading my video in the webm (VP9) and mp4 format. My video is only 3 MB and less than 30 seconds long. I tried re-exporting my video as webm VP8 but same issue is happening. Only using the Big Buck Bunny sample video seems to work on my website.

Are there any specific video format requirements needed for my video to work with this script?

Thank you.

Hi stanko,

for me, audio is still not working on iPhone6. and the whole plug isn't working on android. should it?

Greetings
Lance

https://github.com/Stanko/html-canvas-video-player/blob/gh-pages/js/canvas-video-player.js#L147-L150

hi there. i am trying to play video stream by canvas(context.drawImage), which works in chorme .
i noticed that you didnt do anything but drawImage still works on Safari.

and i found this .

Note: Video as a source for the canvas drawImage() method is not currently supported on iOS.

how can i fix it. thanks

Thanks so much for this—I found it incredibly useful for a site I used for one of my apps.

In launching another one, I was trying to update performance, and was pleased to find that WebKit will autoplay videos without sound with no problems on iOS10 and above:
https://webkit.org/blog/6784/new-video-policies-for-ios/

So this would autoplay inline by default on an iPhone:

<video src="....mp4" autoplay muted playsinline poster="...jpg"></video>

Would it be worth updating your README to make clear that, while this software was a godsend for previous versions of iOS, it's no longer necessary for modern versions?

Thanks!
Chris

How to know my video play end?

Is it possible to play Vimeo and YouTube video with this amazing video function. It would be super awesome if it does.

I've been troubleshooting some issues with iOS devices using versions of 7 and below. Upon calling the 'play' method I get an InvalidStateError referenced here: https://github.com/Stanko/html-canvas-video-player/blob/gh-pages/js/canvas-video-player.js#L238

InvalidStateError: DOM Exception 11: An attempt was made to use an object that is not, or is no longer, usable.

Wasn't sure if it was a limitation of video in older iOS versions, but thought I'd bring it up.

This library eats up CPU and isn't able to keep up with the frame rate of my browser (Chrome, MacBook Pro).

I addressed these issues in a fork for myself, mostly by rearranging how the requestAnimation loop relates to the timeupdate event and and cutting out events like canplay from firing every frame.

While working on this I also cut out all of the features that I didn't need (sorry) which is why I didn't make a formal PR but I wanted to share the code incase it helps anyone.

https://github.com/talltyler/html-canvas-video-player/blob/gh-pages/js/canvas-video-player.js

Hi,
The audio feature is really cool - I didn't think It will be so easy.
I know that this solution is dedicated for iphones but maybe you will know why it doesn't work on Android devices? (my example: motorola moto g 2gen). Are there any limitations regarding canvas on android?

I don't find where do used the unbind func.
Is a mistake?

hi
i had following the same code but i found this code is compatible with only IOS10 and above browsers.
below that its not working?

Hi,

great project! I tried switching the video source, but i am facing a problem with the audio. At first the new video was played by the native player again, but i fixed that by changing the video source through java and then recreate the canvasPlayer object. But it still plays the audio of the previous video.

i added a function to clear the audio using :

if (this.options.audio) {
this.audio.parentNode.removeChild(this.audio);

but that also doesn't seem to do the trick.

Regards,

Per

Anyway you could add a multiple instance example of using the canvas video player plugin? I'm new to jquery and I'm having a lot of trouble implementing multiple video backgrounds on my webpage. Any practical examples of this implementation in the documentation would be really appreciated.

I ran into an unknown issue that I spent an hour trying to track down, turns out it was all my fault and I had called CanvasVideoPlayer twice on the same selector. It caused the audio to stop working and the video to play quickly. Perhaps this could be built into the library to prevent double calling it?

Hi, any idea why this do not work in WKWebview?

Is it possible to have multiple inline videos within a page? I currently have 4 videos in my page I'd like to play inline. Here is my code:

$(document).ready(function(){
  $('canvas').each(function() {
    var canvasVideo = new CanvasVideoPlayer({
      videoSelector: '.js-video',
      canvasSelector: '.js-canvas',
      hideVideo: false, // should script hide the video element
      autoplay: true,
      audio: false,
      resetOnLastFrame: true
    });
  });
});

However, this still only works on the very first video on the page. How can I get it to work with multiple videos?

First off, thanks for putting this together! I've almost got it working as needed.

The issue I'm having when implementing this in an iOS Cordova app is that the first frame is not drawn (correctly) until a resize event occurs. The canvas is simply black until I rotate the device at which point the first frame of the actual video is drawn.

Any idea why that may be?

Hi,
This is very good piece of code.
Are you going to add support for sound?