mediaelement_rails 0.5.1 → 0.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/CHANGELOG.md +6 -0
- data/MIT-LICENSE +1 -1
- data/README.md +8 -3
- data/app/assets/images/mediaelement_rails/bigplay.svg +0 -0
- data/app/assets/images/mediaelement_rails/controls.svg +0 -0
- data/app/assets/javascripts/mediaelement_rails/mediaelement.js +195 -125
- data/app/assets/javascripts/mediaelement_rails/mediaelementplayer.js +434 -364
- data/app/assets/plugins/mediaelement_rails/flashmediaelement-cdn.swf +0 -0
- data/app/assets/plugins/mediaelement_rails/flashmediaelement.swf +0 -0
- data/app/assets/stylesheets/mediaelement_rails/mediaelementplayer.css.erb +71 -51
- data/app/assets/stylesheets/mediaelement_rails/mejs-skins.css.erb +6 -0
- data/lib/mediaelement_rails/version.rb +1 -1
- data/mediaelement_rails.gemspec +6 -5
- data/mediaelement_rails.thor +2 -2
- metadata +74 -99
Binary file
|
Binary file
|
@@ -20,6 +20,11 @@
|
|
20
20
|
overflow: hidden;
|
21
21
|
}
|
22
22
|
|
23
|
+
.mejs-fullscreen {
|
24
|
+
/* set it to not show scroll bars so 100% will work */
|
25
|
+
overflow: hidden !important;
|
26
|
+
}
|
27
|
+
|
23
28
|
.mejs-container-fullscreen {
|
24
29
|
position: fixed;
|
25
30
|
left: 0;
|
@@ -35,12 +40,17 @@
|
|
35
40
|
height: 100%;
|
36
41
|
}
|
37
42
|
|
43
|
+
.mejs-clear {
|
44
|
+
clear: both;
|
45
|
+
}
|
46
|
+
|
38
47
|
/* Start: LAYERS */
|
39
48
|
.mejs-background {
|
40
49
|
position: absolute;
|
41
50
|
top: 0;
|
42
51
|
left: 0;
|
43
52
|
}
|
53
|
+
|
44
54
|
.mejs-mediaelement {
|
45
55
|
position: absolute;
|
46
56
|
top: 0;
|
@@ -48,25 +58,35 @@
|
|
48
58
|
width: 100%;
|
49
59
|
height: 100%;
|
50
60
|
}
|
61
|
+
|
51
62
|
.mejs-poster {
|
52
63
|
position: absolute;
|
53
64
|
top: 0;
|
54
65
|
left: 0;
|
66
|
+
background-size: contain ;
|
67
|
+
background-position: 50% 50% ;
|
68
|
+
background-repeat: no-repeat ;
|
55
69
|
}
|
70
|
+
:root .mejs-poster img {
|
71
|
+
display: none ;
|
72
|
+
}
|
73
|
+
|
56
74
|
.mejs-poster img {
|
57
75
|
border: 0;
|
58
76
|
padding: 0;
|
59
77
|
border: 0;
|
60
|
-
display: block;
|
61
78
|
}
|
79
|
+
|
62
80
|
.mejs-overlay {
|
63
81
|
position: absolute;
|
64
82
|
top: 0;
|
65
83
|
left: 0;
|
66
84
|
}
|
85
|
+
|
67
86
|
.mejs-overlay-play {
|
68
87
|
cursor: pointer;
|
69
88
|
}
|
89
|
+
|
70
90
|
.mejs-overlay-button {
|
71
91
|
position: absolute;
|
72
92
|
top: 50%;
|
@@ -76,12 +96,15 @@
|
|
76
96
|
margin: -50px 0 0 -50px;
|
77
97
|
background: url(<%= asset_path "mediaelement_rails/bigplay.svg" %>) no-repeat;
|
78
98
|
}
|
99
|
+
|
79
100
|
.no-svg .mejs-overlay-button {
|
80
101
|
background-image: url(<%= asset_path "mediaelement_rails/bigplay.png" %>);
|
81
102
|
}
|
103
|
+
|
82
104
|
.mejs-overlay:hover .mejs-overlay-button {
|
83
105
|
background-position: 0 -100px ;
|
84
106
|
}
|
107
|
+
|
85
108
|
.mejs-overlay-loading {
|
86
109
|
position: absolute;
|
87
110
|
top: 50%;
|
@@ -99,6 +122,7 @@
|
|
99
122
|
background: -ms-linear-gradient(top, rgba(50,50,50,0.9), rgba(0,0,0,0.9));
|
100
123
|
background: linear-gradient(rgba(50,50,50,0.9), rgba(0,0,0,0.9));
|
101
124
|
}
|
125
|
+
|
102
126
|
.mejs-overlay-loading span {
|
103
127
|
display: block;
|
104
128
|
width: 80px;
|
@@ -111,7 +135,6 @@
|
|
111
135
|
/* Start: CONTROL BAR */
|
112
136
|
.mejs-container .mejs-controls {
|
113
137
|
position: absolute;
|
114
|
-
background: none;
|
115
138
|
list-style-type: none;
|
116
139
|
margin: 0;
|
117
140
|
padding: 0;
|
@@ -139,7 +162,6 @@
|
|
139
162
|
height: 26px;
|
140
163
|
font-size: 11px;
|
141
164
|
line-height: 11px;
|
142
|
-
background: 0;
|
143
165
|
font-family: Helvetica, Arial;
|
144
166
|
border: 0;
|
145
167
|
}
|
@@ -170,7 +192,7 @@
|
|
170
192
|
|
171
193
|
/* End: CONTROL BAR */
|
172
194
|
|
173
|
-
/* Start: Time (
|
195
|
+
/* Start: Time (Current / Duration) */
|
174
196
|
.mejs-container .mejs-controls .mejs-time {
|
175
197
|
color: #fff;
|
176
198
|
display: block;
|
@@ -179,44 +201,43 @@
|
|
179
201
|
padding: 8px 3px 0 3px ;
|
180
202
|
overflow: hidden;
|
181
203
|
text-align: center;
|
182
|
-
padding: auto 4px;
|
183
204
|
-moz-box-sizing: content-box;
|
184
205
|
-webkit-box-sizing: content-box;
|
185
206
|
box-sizing: content-box;
|
186
207
|
}
|
208
|
+
|
187
209
|
.mejs-container .mejs-controls .mejs-time span {
|
188
|
-
font-size: 11px;
|
189
210
|
color: #fff;
|
211
|
+
font-size: 11px;
|
190
212
|
line-height: 12px;
|
191
213
|
display: block;
|
192
214
|
float: left;
|
193
215
|
margin: 1px 2px 0 0;
|
194
216
|
width: auto;
|
195
217
|
}
|
196
|
-
/* End: Time (
|
197
|
-
|
218
|
+
/* End: Time (Current / Duration) */
|
198
219
|
|
199
|
-
/* Start: Play/
|
220
|
+
/* Start: Play/Pause/Stop */
|
200
221
|
.mejs-controls .mejs-play button {
|
201
222
|
background-position: 0 0;
|
202
223
|
}
|
224
|
+
|
203
225
|
.mejs-controls .mejs-pause button {
|
204
226
|
background-position: 0 -16px;
|
205
227
|
}
|
206
|
-
/* End: Play/pause */
|
207
228
|
|
208
|
-
|
209
|
-
/* Stop */
|
210
229
|
.mejs-controls .mejs-stop button {
|
211
230
|
background-position: -112px 0;
|
212
231
|
}
|
213
|
-
/*
|
232
|
+
/* Start: Play/Pause/Stop */
|
214
233
|
|
215
|
-
/* Start: Progress
|
234
|
+
/* Start: Progress Bar */
|
216
235
|
.mejs-controls div.mejs-time-rail {
|
236
|
+
direction: ltr;
|
217
237
|
width: 200px;
|
218
238
|
padding-top: 5px;
|
219
239
|
}
|
240
|
+
|
220
241
|
.mejs-controls .mejs-time-rail span {
|
221
242
|
display: block;
|
222
243
|
position: absolute;
|
@@ -227,6 +248,7 @@
|
|
227
248
|
border-radius: 2px;
|
228
249
|
cursor: pointer;
|
229
250
|
}
|
251
|
+
|
230
252
|
.mejs-controls .mejs-time-rail .mejs-time-total {
|
231
253
|
margin: 5px;
|
232
254
|
background: #333;
|
@@ -238,6 +260,7 @@
|
|
238
260
|
background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
239
261
|
background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
240
262
|
}
|
263
|
+
|
241
264
|
.mejs-controls .mejs-time-rail .mejs-time-buffering {
|
242
265
|
width: 100%;
|
243
266
|
background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
@@ -274,8 +297,8 @@
|
|
274
297
|
background: linear-gradient(rgba(44,124,145,0.8), rgba(78,183,212,0.8));
|
275
298
|
width: 0;
|
276
299
|
}
|
300
|
+
|
277
301
|
.mejs-controls .mejs-time-rail .mejs-time-current {
|
278
|
-
width: 0;
|
279
302
|
background: #fff;
|
280
303
|
background: rgba(255,255,255,0.8);
|
281
304
|
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
|
@@ -284,6 +307,7 @@
|
|
284
307
|
background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
285
308
|
background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
286
309
|
background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
310
|
+
width: 0;
|
287
311
|
}
|
288
312
|
|
289
313
|
.mejs-controls .mejs-time-rail .mejs-time-handle {
|
@@ -349,19 +373,18 @@
|
|
349
373
|
left: 18px;
|
350
374
|
}
|
351
375
|
|
352
|
-
|
353
|
-
|
354
376
|
/*
|
355
377
|
.mejs-controls .mejs-time-rail:hover .mejs-time-handle {
|
356
378
|
visibility:visible;
|
357
379
|
}
|
358
380
|
*/
|
359
|
-
/* End: Progress
|
381
|
+
/* End: Progress Bar */
|
360
382
|
|
361
383
|
/* Start: Fullscreen */
|
362
384
|
.mejs-controls .mejs-fullscreen-button button {
|
363
385
|
background-position: -32px 0;
|
364
386
|
}
|
387
|
+
|
365
388
|
.mejs-controls .mejs-unfullscreen button {
|
366
389
|
background-position: -32px -16px;
|
367
390
|
}
|
@@ -399,11 +422,13 @@
|
|
399
422
|
position: absolute;
|
400
423
|
margin: 0;
|
401
424
|
}
|
425
|
+
|
402
426
|
.mejs-controls .mejs-volume-button:hover {
|
403
427
|
-webkit-border-radius: 0 0 4px 4px;
|
404
428
|
-moz-border-radius: 0 0 4px 4px;
|
405
429
|
border-radius: 0 0 4px 4px;
|
406
430
|
}
|
431
|
+
|
407
432
|
/*
|
408
433
|
.mejs-controls .mejs-volume-button:hover .mejs-volume-slider {
|
409
434
|
display: block;
|
@@ -447,9 +472,7 @@
|
|
447
472
|
margin: 0;
|
448
473
|
}
|
449
474
|
|
450
|
-
|
451
475
|
/* horizontal version */
|
452
|
-
|
453
476
|
.mejs-controls div.mejs-horizontal-volume-slider {
|
454
477
|
height: 26px;
|
455
478
|
width: 60px;
|
@@ -465,11 +488,9 @@
|
|
465
488
|
margin: 0;
|
466
489
|
padding: 0;
|
467
490
|
font-size: 1px;
|
468
|
-
|
469
491
|
-webkit-border-radius: 2px;
|
470
492
|
-moz-border-radius: 2px;
|
471
493
|
border-radius: 2px;
|
472
|
-
|
473
494
|
background: #333;
|
474
495
|
background: rgba(50,50,50,0.8);
|
475
496
|
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(30,30,30,0.8)), to(rgba(60,60,60,0.8)));
|
@@ -478,7 +499,6 @@
|
|
478
499
|
background: -o-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
479
500
|
background: -ms-linear-gradient(top, rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
480
501
|
background: linear-gradient(rgba(30,30,30,0.8), rgba(60,60,60,0.8));
|
481
|
-
|
482
502
|
}
|
483
503
|
|
484
504
|
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
|
@@ -490,11 +510,9 @@
|
|
490
510
|
margin: 0;
|
491
511
|
padding: 0;
|
492
512
|
font-size: 1px;
|
493
|
-
|
494
513
|
-webkit-border-radius: 2px;
|
495
514
|
-moz-border-radius: 2px;
|
496
515
|
border-radius: 2px;
|
497
|
-
|
498
516
|
background: #fff;
|
499
517
|
background: rgba(255,255,255,0.8);
|
500
518
|
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.9)), to(rgba(200,200,200,0.8)));
|
@@ -503,20 +521,15 @@
|
|
503
521
|
background: -o-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
504
522
|
background: -ms-linear-gradient(top, rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
505
523
|
background: linear-gradient(rgba(255,255,255,0.9), rgba(200,200,200,0.8));
|
506
|
-
|
507
524
|
}
|
508
525
|
|
509
|
-
|
510
526
|
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
|
511
527
|
display: none;
|
512
528
|
}
|
513
529
|
|
514
530
|
/* End: Mute/Volume */
|
515
531
|
|
516
|
-
|
517
|
-
|
518
|
-
|
519
|
-
/* Start: TRACK (Captions and Chapters) */
|
532
|
+
/* Start: Track (Captions and Chapters) */
|
520
533
|
.mejs-controls .mejs-captions-button {
|
521
534
|
position: relative;
|
522
535
|
}
|
@@ -540,6 +553,7 @@
|
|
540
553
|
-moz-border-radius: 0;
|
541
554
|
border-radius: 0;
|
542
555
|
}
|
556
|
+
|
543
557
|
/*
|
544
558
|
.mejs-controls .mejs-captions-button:hover .mejs-captions-selector {
|
545
559
|
visibility: visible;
|
@@ -553,6 +567,7 @@
|
|
553
567
|
list-style-type: none !important;
|
554
568
|
overflow: hidden;
|
555
569
|
}
|
570
|
+
|
556
571
|
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li {
|
557
572
|
margin: 0 0 6px 0;
|
558
573
|
padding: 0;
|
@@ -561,11 +576,13 @@
|
|
561
576
|
color: #fff;
|
562
577
|
overflow: hidden;
|
563
578
|
}
|
579
|
+
|
564
580
|
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li input {
|
565
581
|
clear: both;
|
566
582
|
float: left;
|
567
583
|
margin: 3px 3px 0 5px;
|
568
584
|
}
|
585
|
+
|
569
586
|
.mejs-controls .mejs-captions-button .mejs-captions-selector ul li label {
|
570
587
|
width: 100px;
|
571
588
|
float: left;
|
@@ -580,7 +597,6 @@
|
|
580
597
|
margin: 0 0 5px 0;
|
581
598
|
}
|
582
599
|
|
583
|
-
|
584
600
|
.mejs-chapters {
|
585
601
|
position: absolute;
|
586
602
|
top: 0;
|
@@ -589,6 +605,7 @@
|
|
589
605
|
width: 10000px;
|
590
606
|
z-index: 1;
|
591
607
|
}
|
608
|
+
|
592
609
|
.mejs-chapters .mejs-chapter {
|
593
610
|
position: absolute;
|
594
611
|
float: left;
|
@@ -604,6 +621,7 @@
|
|
604
621
|
overflow: hidden;
|
605
622
|
border: 0;
|
606
623
|
}
|
624
|
+
|
607
625
|
.mejs-chapters .mejs-chapter .mejs-chapter-block {
|
608
626
|
font-size: 11px;
|
609
627
|
color: #fff;
|
@@ -613,12 +631,12 @@
|
|
613
631
|
border-bottom: solid 1px #333;
|
614
632
|
cursor: pointer;
|
615
633
|
}
|
634
|
+
|
616
635
|
.mejs-chapters .mejs-chapter .mejs-chapter-block-last {
|
617
636
|
border-right: none;
|
618
637
|
}
|
619
638
|
|
620
639
|
.mejs-chapters .mejs-chapter .mejs-chapter-block:hover {
|
621
|
-
/*background: #333;*/
|
622
640
|
background: #666;
|
623
641
|
background: rgba(102,102,102, 0.7);
|
624
642
|
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(102,102,102,0.7)), to(rgba(50,50,50,0.6)));
|
@@ -629,6 +647,7 @@
|
|
629
647
|
background: linear-gradient(rgba(102,102,102,0.7), rgba(50,50,50,0.6));
|
630
648
|
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr=#666666,endColorstr=#323232);
|
631
649
|
}
|
650
|
+
|
632
651
|
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-title {
|
633
652
|
font-size: 12px;
|
634
653
|
font-weight: bold;
|
@@ -638,6 +657,7 @@
|
|
638
657
|
margin: 0 0 3px 0;
|
639
658
|
line-height: 12px;
|
640
659
|
}
|
660
|
+
|
641
661
|
.mejs-chapters .mejs-chapter .mejs-chapter-block .ch-timespan {
|
642
662
|
font-size: 12px;
|
643
663
|
line-height: 12px;
|
@@ -647,21 +667,21 @@
|
|
647
667
|
text-overflow: ellipsis;
|
648
668
|
}
|
649
669
|
|
650
|
-
|
651
670
|
.mejs-captions-layer {
|
652
671
|
position: absolute;
|
653
672
|
bottom: 0;
|
654
673
|
left: 0;
|
655
674
|
text-align:center;
|
656
|
-
/*font-weight: bold;*/
|
657
675
|
line-height: 22px;
|
658
676
|
font-size: 12px;
|
659
677
|
color: #fff;
|
660
678
|
}
|
679
|
+
|
661
680
|
.mejs-captions-layer a {
|
662
681
|
color: #fff;
|
663
682
|
text-decoration: underline;
|
664
683
|
}
|
684
|
+
|
665
685
|
.mejs-captions-layer[lang=ar] {
|
666
686
|
font-size: 20px;
|
667
687
|
font-weight: normal;
|
@@ -684,52 +704,50 @@
|
|
684
704
|
background: rgba(20, 20, 20, 0.8);
|
685
705
|
|
686
706
|
}
|
687
|
-
/* End:
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
.mejs-clear {
|
692
|
-
clear: both;
|
693
|
-
}
|
707
|
+
/* End: Track (Captions and Chapters) */
|
694
708
|
|
695
|
-
/* Start:
|
709
|
+
/* Start: Error */
|
696
710
|
.me-cannotplay {
|
697
711
|
}
|
712
|
+
|
698
713
|
.me-cannotplay a {
|
699
714
|
color: #fff;
|
700
715
|
font-weight: bold;
|
701
716
|
}
|
717
|
+
|
702
718
|
.me-cannotplay span {
|
703
719
|
padding: 15px;
|
704
720
|
display: block;
|
705
721
|
}
|
706
|
-
/* End:
|
722
|
+
/* End: Error */
|
707
723
|
|
708
724
|
|
709
725
|
/* Start: Loop */
|
710
726
|
.mejs-controls .mejs-loop-off button {
|
711
727
|
background-position: -64px -16px;
|
712
728
|
}
|
729
|
+
|
713
730
|
.mejs-controls .mejs-loop-on button {
|
714
731
|
background-position: -64px 0;
|
715
732
|
}
|
733
|
+
|
716
734
|
/* End: Loop */
|
717
735
|
|
718
736
|
/* Start: backlight */
|
719
737
|
.mejs-controls .mejs-backlight-off button {
|
720
738
|
background-position: -80px -16px;
|
721
739
|
}
|
740
|
+
|
722
741
|
.mejs-controls .mejs-backlight-on button {
|
723
742
|
background-position: -80px 0;
|
724
743
|
}
|
725
744
|
/* End: backlight */
|
726
745
|
|
727
|
-
|
728
|
-
/* Start: picture controls */
|
746
|
+
/* Start: Picture Controls */
|
729
747
|
.mejs-controls .mejs-picturecontrols-button {
|
730
748
|
background-position: -96px 0;
|
731
749
|
}
|
732
|
-
/* End:
|
750
|
+
/* End: Picture Controls */
|
733
751
|
|
734
752
|
|
735
753
|
/* context menu */
|
@@ -763,8 +781,7 @@
|
|
763
781
|
color: #fff;
|
764
782
|
}
|
765
783
|
|
766
|
-
|
767
|
-
/* Start: SourceChooser */
|
784
|
+
/* Start: Source Chooser */
|
768
785
|
.mejs-controls .mejs-sourcechooser-button {
|
769
786
|
position: relative;
|
770
787
|
}
|
@@ -772,6 +789,7 @@
|
|
772
789
|
.mejs-controls .mejs-sourcechooser-button button {
|
773
790
|
background-position: -128px 0;
|
774
791
|
}
|
792
|
+
|
775
793
|
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector {
|
776
794
|
visibility: hidden;
|
777
795
|
position: absolute;
|
@@ -796,6 +814,7 @@
|
|
796
814
|
list-style-type: none !important;
|
797
815
|
overflow: hidden;
|
798
816
|
}
|
817
|
+
|
799
818
|
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li {
|
800
819
|
margin: 0 0 6px 0;
|
801
820
|
padding: 0;
|
@@ -804,11 +823,13 @@
|
|
804
823
|
color: #fff;
|
805
824
|
overflow: hidden;
|
806
825
|
}
|
826
|
+
|
807
827
|
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li input {
|
808
828
|
clear: both;
|
809
829
|
float: left;
|
810
830
|
margin: 3px 3px 0 5px;
|
811
831
|
}
|
832
|
+
|
812
833
|
.mejs-controls .mejs-sourcechooser-button .mejs-sourcechooser-selector ul li label {
|
813
834
|
width: 100px;
|
814
835
|
float: left;
|
@@ -817,8 +838,7 @@
|
|
817
838
|
font-family: helvetica, arial;
|
818
839
|
font-size: 10px;
|
819
840
|
}
|
820
|
-
/* End:
|
821
|
-
|
841
|
+
/* End: Source Chooser */
|
822
842
|
|
823
843
|
/* Start: Postroll */
|
824
844
|
.mejs-postroll-layer {
|