This repository has been archived by the owner on Nov 25, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 114
/
index.html
executable file
·179 lines (151 loc) · 5.83 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width">
<title>HTML canvas video player</title>
<link rel="stylesheet" href="https://muffinman.io/skyblue/css/skyblue.css">
<link rel="stylesheet" href="demo/demo.css">
</head>
<body>
<div class="header">
<div class="content">
<a href="https://github.com/Stanko/html-canvas-video-player" class="padding-right-20">GitHub</a>
<a href="https://github.com/Stanko/html-canvas-video-player/archive/master.zip">Download</a>
</div>
</div>
<div class="video-wrapper js-video-wrapper">
<div class="video-responsive">
<video class="video js-video" muted>
<source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
<source src=http://techslides.com/demos/sample-videos/small.ogv type=video/ogg>
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
<source src=http://techslides.com/demos/sample-videos/small.3gp type=video/3gp>
</video>
<canvas class="canvas js-canvas"></canvas>
<div class="video-timeline js-timeline">
<div class="video-timeline-passed js-timeline-passed">
</div>
</div>
</div>
</div>
<div class="content">
<h1>Depreciation notice</h1>
<p>
This was intended for auto-playing videos on iOS, but as of iOS 10, there is native supported option <code>playsinline</code>, read more here:
<a href="https://webkit.org/blog/6784/new-video-policies-for-ios/">
https://webkit.org/blog/6784/new-video-policies-for-ios/
</a>
(Android works for ages now).
</p>
<p>
So this project is not actively maintained anymore. Use native HTML video instead of it.
</p>
<p>
If anyone wants to take over the maintenance, feel free to open an issue, and I'll add you as contributor.
</p>
<h1 class="margin-bottom-10">HTML canvas video player</h1>
<h3 class="margin-bottom-20">Easy way to play videos inline on iPhones</h3>
<p>
This is intended for iPhone only, it can be used on any other browser
which support canvas and video. <strike>It doesn't play sound, I have no real
plan of adding audio support.</strike>
</p>
<p>
Audio is now supported. Autoplay on iOS is NOT working with
audio (autoplay is disabled in that case).
</p>
<p>
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.
</p>
<p>
For IE9 there must be <code>requestAnimationFrame</code> polyfill.
Audio is not tested on IE9.
</p>
<p>
Please let me know if you are using this player, I would like to make a small showcase, thanks!
</p>
<h5>Known issues</h5>
<ul>
<li>
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.
</li>
</ul>
<p>
Download on
<a href="https://github.com/Stanko/html-canvas-video-player">GitHub</a>.
</p>
<h4 class="margin-top-30">Minimum setup:</h4>
<pre>
var canvasVideo = new <span class="color-success">CanvasVideoPlayer</span>({
videoSelector: '.js-video',
canvasSelector: '.js-canvas'
});
</pre>
<h4 class="margin-top-30">Aditional options:</h4>
<pre>
var canvasVideo = new <span class="color-success">CanvasVideoPlayer</span>({
videoSelector: '.js-video',
canvasSelector: '.js-canvas',
timelineSelector: '.js-timeline',
framesPerSecond: 25,
hideVideo: true, <span class="color-grey">// should script hide the video element</span>
autoplay: false,
<span class="color-grey">// <span class="color-error">IMPORTANT</span> On iOS can't be used together with autoplay, autoplay will be disabled</span>
audio: false, <span class="color-grey">// can be true/false (it will use video file for audio), or selector for a separate audio file</span>
resetOnLastFrame: true, <span class="color-grey">// should video reset back to the first frame after it finishes playing</span>
loop: false
});
</pre>
<h4 class="margin-top-30">Methods:</h4>
<pre>
<span class="color-grey">// Unbinds all of the events (when you destroy the player)</span>
canvasVideo.unbind()
<span class="color-grey">// Plays video</span>
canvasVideo.play()
<span class="color-grey">// Pauses video</span>
canvasVideo.pause()
<span class="color-grey">// Plays video if paused and vice versa</span>
canvasVideo.playPause()
<span class="color-grey">// Draws current frame on canvas, should not be called manually</span>
canvasVideo.drawFrame()
</pre>
<h4 class="margin-top-30">Detecting iPhone:</h4>
<pre>
var isIphone = navigator.userAgent.indexOf('iPhone') >= 0;
<span class="color-grey">// Other way to detect iOS</span>
<span class="color-grey">// var isIOS = /iPad|iPhone|iPod/.test(navigator.platform);</span>
if (isIphone) {
<span class="color-grey">// Init CanvasVideoPlayer here</span>
new <span class="color-success">CanvasVideoPlayer</span>({
<span class="color-grey">// Options</span>
});
}
else {
<span class="color-grey">// Use HTML5 video</span>
}
</pre>
<p class="margin-top-50">
Released under MIT licence.
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="demo/fastclick.js"></script>
<script src="demo/demo.js"></script>
<script src="js/canvas-video-player.js"></script>
<script>
var canvasVideo = new CanvasVideoPlayer({
videoSelector: '.js-video',
canvasSelector: '.js-canvas',
timelineSelector: '.js-timeline',
audio: false
});
</script>
</body>
</html>