html 画布视频,HTML canvas video player

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.