Depreciation notice

This was intended for auto-playing videos on iOS, but as of iOS 10, there is native supported option playsinline, read more here: https://webkit.org/blog/6784/new-video-policies-for-ios/ (Android works for ages now).

So this project is not actively maintained anymore. Use native HTML video instead of it.

If anyone wants to take over the maintenance, feel free to open an issue, and I'll add you as contributor.

HTML canvas video player

Easy way to play videos inline on iPhones

This is intended for iPhone only, it can be used on any other browser which support canvas and video. It doesn't play sound, I have no real plan of adding audio support.

Audio is now supported. Autoplay on iOS is NOT working with audio (autoplay is disabled in that case).

It can be used with any HTML video player, just position canvas over the video. Intended usage was for background videos and showcases. Still, if you can, use regular HTML5 video, this was intended to use only on iPhones. This is plain JavaScript solution, no dependencies, IE9+ and modern browsers.

For IE9 there must be requestAnimationFrame polyfill. Audio is not tested on IE9.

Please let me know if you are using this player, I would like to make a small showcase, thanks!

Known issues

• It is very buggy and sometimes doesn't work at all on Android. I don't have plans for fixing this, if someone has idea, please issue a pull request. Just use regular HTML5 video.

Download on GitHub.

Minimum setup:

var canvasVideo = new CanvasVideoPlayer({
    videoSelector: '.js-video',
    canvasSelector: '.js-canvas'
});

Aditional options:

var canvasVideo = new CanvasVideoPlayer({
    videoSelector: '.js-video',
    canvasSelector: '.js-canvas',
    timelineSelector: '.js-timeline',
    framesPerSecond: 25,
    hideVideo: true, // should script hide the video element
    autoplay: false,
    // IMPORTANT On iOS can't be used together with autoplay, autoplay will be disabled
    audio: false, // can be true/false (it will use video file for audio), or selector for a separate audio file
    resetOnLastFrame: true, // should video reset back to the first frame after it finishes playing
		loop: false
});

Methods:

// Unbinds all of the events (when you destroy the player)
canvasVideo.unbind()

// Plays video
canvasVideo.play()

// Pauses video
canvasVideo.pause()

// Plays video if paused and vice versa
canvasVideo.playPause()

// Draws current frame on canvas, should not be called manually
canvasVideo.drawFrame()

Detecting iPhone:

var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
// Other way to detect iOS
// var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);

if (isIphone) {
    // Init CanvasVideoPlayer here
    new CanvasVideoPlayer({
        // Options
    });
}
else {
    // Use HTML5 video
}

Released under MIT licence.