40 |
Depreciation notice
41 |
42 |
43 | This was intended for auto-playing videos on iOS, but as of iOS 10, there is native supported option playsinline, read more here:
44 |
45 | https://webkit.org/blog/6784/new-video-policies-for-ios/
46 |
47 | (Android works for ages now).
48 |
49 |
50 | So this project is not actively maintained anymore. Use native HTML video instead of it.
51 |
52 |
53 | If anyone wants to take over the maintenance, feel free to open an issue, and I'll add you as contributor.
54 |
55 |
56 |
57 |
HTML canvas video player
58 |
Easy way to play videos inline on iPhones
59 |
60 | This is intended for iPhone only, it can be used on any other browser
61 | which support canvas and video. It doesn't play sound, I have no real
62 | plan of adding audio support.
63 |
64 |
65 | Audio is now supported. Autoplay on iOS is NOT working with
66 | audio (autoplay is disabled in that case).
67 |
68 |
69 | It can be used with any HTML video player, just position canvas over the video.
70 | Intended usage was for background videos and showcases.
71 | Still, if you can, use regular HTML5 video, this was intended to use only on iPhones.
72 | This is plain JavaScript solution, no dependencies, IE9+ and modern browsers.
73 |
74 |
75 |
76 | For IE9 there must be requestAnimationFrame polyfill.
77 | Audio is not tested on IE9.
78 |
79 |
80 |
81 | Please let me know if you are using this player, I would like to make a small showcase, thanks!
82 |
83 |
84 |
Known issues
85 |
86 | -
87 | It is very buggy and sometimes doesn't work at all on Android.
88 | I don't have plans for fixing this, if someone has idea, please issue a pull request.
89 | Just use regular HTML5 video.
90 |
91 |
92 |
93 |
94 | Download on
95 | GitHub.
96 |
97 |
98 |
Minimum setup:
99 |
100 | var canvasVideo = new CanvasVideoPlayer({
101 | videoSelector: '.js-video',
102 | canvasSelector: '.js-canvas'
103 | });
104 |
105 |
106 |
Aditional options:
107 |
108 | var canvasVideo = new CanvasVideoPlayer({
109 | videoSelector: '.js-video',
110 | canvasSelector: '.js-canvas',
111 | timelineSelector: '.js-timeline',
112 | framesPerSecond: 25,
113 | hideVideo: true, // should script hide the video element
114 | autoplay: false,
115 | // IMPORTANT On iOS can't be used together with autoplay, autoplay will be disabled
116 | audio: false, // can be true/false (it will use video file for audio), or selector for a separate audio file
117 | resetOnLastFrame: true, // should video reset back to the first frame after it finishes playing
118 | loop: false
119 | });
120 |
121 |
122 |
Methods:
123 |
124 | // Unbinds all of the events (when you destroy the player)
125 | canvasVideo.unbind()
126 |
127 | // Plays video
128 | canvasVideo.play()
129 |
130 | // Pauses video
131 | canvasVideo.pause()
132 |
133 | // Plays video if paused and vice versa
134 | canvasVideo.playPause()
135 |
136 | // Draws current frame on canvas, should not be called manually
137 | canvasVideo.drawFrame()
138 |
139 |
140 |
Detecting iPhone:
141 |
142 | var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
143 | // Other way to detect iOS
144 | // var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);
145 |
146 | if (isIphone) {
147 | // Init CanvasVideoPlayer here
148 | new CanvasVideoPlayer({
149 | // Options
150 | });
151 | }
152 | else {
153 | // Use HTML5 video
154 | }
155 |
156 |
157 |
158 |
159 | Released under MIT licence.
160 |
161 |