@mindedge/vuetify-player 0.3.0 → 0.3.1
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.
- package/package.json +1 -1
- package/src/components/Media/Html5Player.vue +192 -94
- package/src/i18n/en-US.js +1 -0
- package/src/i18n/es-ES.js +4 -3
- package/src/i18n/sv-SE.js +1 -0
package/package.json
CHANGED
|
@@ -89,7 +89,7 @@
|
|
|
89
89
|
>
|
|
90
90
|
<template #prepend>
|
|
91
91
|
<!-- Play button -->
|
|
92
|
-
<v-tooltip top>
|
|
92
|
+
<v-tooltip v-if="!showReplay" top>
|
|
93
93
|
<template
|
|
94
94
|
v-slot:activator="{ on, attrs }"
|
|
95
95
|
>
|
|
@@ -127,8 +127,39 @@
|
|
|
127
127
|
}}</span>
|
|
128
128
|
</v-tooltip>
|
|
129
129
|
|
|
130
|
+
<!-- Replay button -->
|
|
131
|
+
<v-tooltip v-if="showReplay" top>
|
|
132
|
+
<template
|
|
133
|
+
v-slot:activator="{ on, attrs }"
|
|
134
|
+
>
|
|
135
|
+
<v-btn
|
|
136
|
+
small
|
|
137
|
+
text
|
|
138
|
+
v-bind="attrs"
|
|
139
|
+
v-on="on"
|
|
140
|
+
@click="onClickReplay"
|
|
141
|
+
>
|
|
142
|
+
<v-icon>mdi-replay</v-icon>
|
|
143
|
+
<span class="d-sr-only">
|
|
144
|
+
{{
|
|
145
|
+
t(
|
|
146
|
+
language,
|
|
147
|
+
'player.replay'
|
|
148
|
+
)
|
|
149
|
+
}}
|
|
150
|
+
</span>
|
|
151
|
+
</v-btn>
|
|
152
|
+
</template>
|
|
153
|
+
<span>{{
|
|
154
|
+
t(language, 'player.replay')
|
|
155
|
+
}}</span>
|
|
156
|
+
</v-tooltip>
|
|
157
|
+
|
|
130
158
|
<!-- Rewind Button-->
|
|
131
|
-
<v-tooltip
|
|
159
|
+
<v-tooltip
|
|
160
|
+
v-if="attributes.rewind && !activeAd"
|
|
161
|
+
top
|
|
162
|
+
>
|
|
132
163
|
<template
|
|
133
164
|
v-slot:activator="{ on, attrs }"
|
|
134
165
|
>
|
|
@@ -579,17 +610,6 @@ export default {
|
|
|
579
610
|
// We're playing an ad currently
|
|
580
611
|
if (this.activeAd) {
|
|
581
612
|
return this.activeAd
|
|
582
|
-
|
|
583
|
-
// We hit an ad spot~ play_at_percent
|
|
584
|
-
} else if (
|
|
585
|
-
!this.activeAd &&
|
|
586
|
-
typeof this.ads[this.currentPercent] !== 'undefined' &&
|
|
587
|
-
this.ads[this.currentPercent].sources &&
|
|
588
|
-
this.ads[this.currentPercent].sources.length &&
|
|
589
|
-
!this.ads[this.currentPercent].complete
|
|
590
|
-
) {
|
|
591
|
-
this.setActiveAd(this.currentPercent)
|
|
592
|
-
return this.ads[this.currentPercent]
|
|
593
613
|
} else {
|
|
594
614
|
// Only change sources if we're not watching an ad or pre/postroll
|
|
595
615
|
return this.src
|
|
@@ -628,11 +648,96 @@ export default {
|
|
|
628
648
|
watchPlayer: 0,
|
|
629
649
|
scrub: { max: 100 },
|
|
630
650
|
buffering: false,
|
|
651
|
+
showReplay: false,
|
|
652
|
+
}
|
|
653
|
+
},
|
|
654
|
+
beforeMount() {
|
|
655
|
+
// Parse the controlslist string
|
|
656
|
+
if (
|
|
657
|
+
this.attributes.controlslist &&
|
|
658
|
+
typeof this.attributes.controlslist === 'string' &&
|
|
659
|
+
this.attributes.controlslist !== ''
|
|
660
|
+
) {
|
|
661
|
+
this.options.controlslist = this.attributes.controlslist.split(' ')
|
|
662
|
+
}
|
|
663
|
+
|
|
664
|
+
if (
|
|
665
|
+
typeof this.attributes.playbackrates === 'undefined' ||
|
|
666
|
+
this.attributes.playbackrates.length === 0
|
|
667
|
+
) {
|
|
668
|
+
throw new Error(
|
|
669
|
+
'attributes.playbackrates must be defined and an array of numbers!'
|
|
670
|
+
)
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
// Adjust the playback speed to 1 by default
|
|
674
|
+
if (this.attributes.playbackrates.indexOf(1) !== -1) {
|
|
675
|
+
this.options.playbackRateIndex =
|
|
676
|
+
this.attributes.playbackrates.indexOf(1)
|
|
677
|
+
} else {
|
|
678
|
+
// 1 aka normal playback not enabled (What monster would do this?!)
|
|
679
|
+
// Set the playback rate to "middle of the road" for whatever is available
|
|
680
|
+
this.options.playbackRateIndex = Math.floor(
|
|
681
|
+
this.attributes.playbackrates.length / 2
|
|
682
|
+
)
|
|
683
|
+
}
|
|
684
|
+
|
|
685
|
+
// Initialize the ads aka pre/post/midroll
|
|
686
|
+
if (this.src.ads && this.src.ads.length) {
|
|
687
|
+
for (const ad of this.src.ads) {
|
|
688
|
+
// Map to a percent so we can avoid dupe timings and have easier lookups
|
|
689
|
+
this.ads[ad.play_at_percent] = ad
|
|
690
|
+
this.ads[ad.play_at_percent].complete = false
|
|
691
|
+
}
|
|
692
|
+
}
|
|
693
|
+
|
|
694
|
+
// Determine fullscreen settings
|
|
695
|
+
if (
|
|
696
|
+
this.attributes.playsinline ||
|
|
697
|
+
!document.fullscreenEnabled ||
|
|
698
|
+
this.options.controlslist.indexOf('nofullscreen') !== -1
|
|
699
|
+
) {
|
|
700
|
+
this.fullscreenEnabled = false
|
|
701
|
+
} else {
|
|
702
|
+
this.fullscreenEnabled = true
|
|
703
|
+
}
|
|
704
|
+
|
|
705
|
+
// Determine remote playback settings
|
|
706
|
+
if (
|
|
707
|
+
this.attributes.disableremoteplayback ||
|
|
708
|
+
this.options.controlslist.indexOf('noremoteplayback') !== -1
|
|
709
|
+
) {
|
|
710
|
+
this.options.remoteplayback = false
|
|
711
|
+
} else {
|
|
712
|
+
this.options.remoteplayback = true
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
// Determine download settings
|
|
716
|
+
if (this.options.controlslist.indexOf('nodownload') !== -1) {
|
|
717
|
+
this.options.download = false
|
|
718
|
+
} else {
|
|
719
|
+
this.options.download = true
|
|
720
|
+
}
|
|
721
|
+
},
|
|
722
|
+
mounted() {
|
|
723
|
+
if (
|
|
724
|
+
!this.activeAd &&
|
|
725
|
+
typeof this.ads[this.currentPercent] !== 'undefined' &&
|
|
726
|
+
this.ads[this.currentPercent].sources &&
|
|
727
|
+
this.ads[this.currentPercent].sources.length &&
|
|
728
|
+
!this.ads[this.currentPercent].complete
|
|
729
|
+
) {
|
|
730
|
+
this.activeAd = this.ads[this.currentPercent]
|
|
631
731
|
}
|
|
632
732
|
},
|
|
633
733
|
methods: {
|
|
634
|
-
setActiveAd(currentPercent) {
|
|
734
|
+
setActiveAd(currentPercent, e = null) {
|
|
635
735
|
this.activeAd = this.ads[currentPercent]
|
|
736
|
+
|
|
737
|
+
// Reload the player to refresh all the sources / tracks
|
|
738
|
+
this.load(e)
|
|
739
|
+
// Start playing the main video
|
|
740
|
+
this.play(e)
|
|
636
741
|
},
|
|
637
742
|
percentToTimeSeconds(percent) {
|
|
638
743
|
const scaleFactor = this.player.duration / this.scrub.max
|
|
@@ -697,23 +802,37 @@ export default {
|
|
|
697
802
|
this.$emit('mouseout', e)
|
|
698
803
|
},
|
|
699
804
|
onEnded(e) {
|
|
700
|
-
if
|
|
805
|
+
// Active ad ended but only continue playing if the video didn't just end on a postroll
|
|
806
|
+
if (this.activeAd && this.activeAd.play_at_percent !== 100) {
|
|
701
807
|
this.ads[this.activeAd.play_at_percent].complete = true
|
|
702
808
|
// Go back to the play_at_percent for the main video
|
|
703
809
|
this.currentPercent = this.activeAd.play_at_percent
|
|
810
|
+
|
|
704
811
|
this.activeAd = null
|
|
705
812
|
|
|
706
813
|
// Reload the player to refresh all the sources / tracks
|
|
707
814
|
this.load(e)
|
|
815
|
+
|
|
708
816
|
// Start playing the main video
|
|
709
817
|
this.play(e)
|
|
818
|
+
} else if (
|
|
819
|
+
!this.activeAd &&
|
|
820
|
+
typeof this.ads[this.currentPercent] !== 'undefined' &&
|
|
821
|
+
this.ads[this.currentPercent].sources &&
|
|
822
|
+
this.ads[this.currentPercent].sources.length &&
|
|
823
|
+
!this.ads[this.currentPercent].complete
|
|
824
|
+
) {
|
|
825
|
+
// Video ended but there's an ad (probably 100% ad)
|
|
826
|
+
this.setActiveAd(this.currentPercent, e)
|
|
710
827
|
} else if (
|
|
711
828
|
this.activeAd !== null &&
|
|
712
829
|
this.activeAd.play_at_percent === 100
|
|
713
830
|
) {
|
|
831
|
+
this.showReplay = true
|
|
714
832
|
// Ended but this ad was a postroll
|
|
715
833
|
this.$emit('ended', e)
|
|
716
834
|
} else {
|
|
835
|
+
this.showReplay = true
|
|
717
836
|
// Ended without an ad
|
|
718
837
|
this.$emit('ended', e)
|
|
719
838
|
}
|
|
@@ -764,6 +883,17 @@ export default {
|
|
|
764
883
|
(this.player.currentTime / this.player.duration) * 100
|
|
765
884
|
)
|
|
766
885
|
|
|
886
|
+
// Check if there's an ad that needs to be played
|
|
887
|
+
if (
|
|
888
|
+
!this.activeAd &&
|
|
889
|
+
typeof this.ads[this.currentPercent] !== 'undefined' &&
|
|
890
|
+
this.ads[this.currentPercent].sources &&
|
|
891
|
+
this.ads[this.currentPercent].sources.length &&
|
|
892
|
+
!this.ads[this.currentPercent].complete
|
|
893
|
+
) {
|
|
894
|
+
this.setActiveAd(this.currentPercent, e)
|
|
895
|
+
}
|
|
896
|
+
|
|
767
897
|
this.$emit('timeupdate', {
|
|
768
898
|
event: e,
|
|
769
899
|
current_percent: this.currentPercent,
|
|
@@ -800,6 +930,31 @@ export default {
|
|
|
800
930
|
this.pause(e)
|
|
801
931
|
}
|
|
802
932
|
},
|
|
933
|
+
onClickReplay(e) {
|
|
934
|
+
// Re-initialize the ads aka pre/post/midroll
|
|
935
|
+
if (this.src.ads && this.src.ads.length) {
|
|
936
|
+
for (const ad of this.src.ads) {
|
|
937
|
+
// Map to a percent so we can avoid dupe timings and have easier lookups
|
|
938
|
+
this.ads[ad.play_at_percent] = ad
|
|
939
|
+
this.ads[ad.play_at_percent].complete = false
|
|
940
|
+
}
|
|
941
|
+
|
|
942
|
+
// There's a pre-roll / start ad. Reassign as the active
|
|
943
|
+
if (typeof this.ads[0] !== 'undefined') {
|
|
944
|
+
this.activeAd = this.ads[0]
|
|
945
|
+
} else {
|
|
946
|
+
// Clear the active ad otherwise
|
|
947
|
+
this.activeAd = null
|
|
948
|
+
}
|
|
949
|
+
}
|
|
950
|
+
|
|
951
|
+
// Reload the player to refresh all the sources / tracks
|
|
952
|
+
this.load(e)
|
|
953
|
+
// Start playing the main video
|
|
954
|
+
this.play(e)
|
|
955
|
+
// Restart from the beginning
|
|
956
|
+
this.setTime(0)
|
|
957
|
+
},
|
|
803
958
|
onMuteToggle() {
|
|
804
959
|
if (this.player.muted) {
|
|
805
960
|
this.options.muted = false
|
|
@@ -902,91 +1057,34 @@ export default {
|
|
|
902
1057
|
this.captions.nonce = Math.random()
|
|
903
1058
|
},
|
|
904
1059
|
load(e = null) {
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
1060
|
+
if (this.player.load) {
|
|
1061
|
+
// Reload the player to refresh all the sources / tracks
|
|
1062
|
+
this.player.load()
|
|
1063
|
+
this.$emit('load', e)
|
|
1064
|
+
} else {
|
|
1065
|
+
console.log('Cannot load player')
|
|
1066
|
+
}
|
|
908
1067
|
},
|
|
909
1068
|
pause(e = null) {
|
|
910
|
-
this.player.pause
|
|
911
|
-
|
|
912
|
-
|
|
1069
|
+
if (this.player.pause) {
|
|
1070
|
+
this.player.pause()
|
|
1071
|
+
this.options.paused = true
|
|
1072
|
+
this.$emit('pause', e)
|
|
1073
|
+
} else {
|
|
1074
|
+
console.log('Cannot pause player')
|
|
1075
|
+
}
|
|
913
1076
|
},
|
|
914
1077
|
play(e = null) {
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
|
|
922
|
-
// Parse the controlslist string
|
|
923
|
-
if (
|
|
924
|
-
this.attributes.controlslist &&
|
|
925
|
-
typeof this.attributes.controlslist === 'string' &&
|
|
926
|
-
this.attributes.controlslist !== ''
|
|
927
|
-
) {
|
|
928
|
-
this.options.controlslist = this.attributes.controlslist.split(' ')
|
|
929
|
-
}
|
|
930
|
-
|
|
931
|
-
if (
|
|
932
|
-
typeof this.attributes.playbackrates === 'undefined' ||
|
|
933
|
-
this.attributes.playbackrates.length === 0
|
|
934
|
-
) {
|
|
935
|
-
throw new Error(
|
|
936
|
-
'attributes.playbackrates must be defined and an array of numbers!'
|
|
937
|
-
)
|
|
938
|
-
}
|
|
939
|
-
|
|
940
|
-
// Adjust the playback speed to 1 by default
|
|
941
|
-
if (this.attributes.playbackrates.indexOf(1) !== -1) {
|
|
942
|
-
this.options.playbackRateIndex =
|
|
943
|
-
this.attributes.playbackrates.indexOf(1)
|
|
944
|
-
} else {
|
|
945
|
-
// 1 aka normal playback not enabled (What monster would do this?!)
|
|
946
|
-
// Set the playback rate to "middle of the road" for whatever is available
|
|
947
|
-
this.options.playbackRateIndex = Math.floor(
|
|
948
|
-
this.attributes.playbackrates.length / 2
|
|
949
|
-
)
|
|
950
|
-
}
|
|
951
|
-
|
|
952
|
-
// Initialize the ads aka pre/post/midroll
|
|
953
|
-
if (this.src.ads && this.src.ads.length) {
|
|
954
|
-
for (const ad of this.src.ads) {
|
|
955
|
-
// Map to a percent so we can avoid dupe timings and have easier lookups
|
|
956
|
-
this.ads[ad.play_at_percent] = ad
|
|
957
|
-
this.ads[ad.play_at_percent].complete = false
|
|
1078
|
+
if (this.player.play) {
|
|
1079
|
+
// Start playing the main video
|
|
1080
|
+
this.player.play()
|
|
1081
|
+
this.options.paused = false
|
|
1082
|
+
this.$emit('play', e)
|
|
1083
|
+
} else {
|
|
1084
|
+
console.log('Cannot play player')
|
|
958
1085
|
}
|
|
959
|
-
}
|
|
960
|
-
|
|
961
|
-
// Determine fullscreen settings
|
|
962
|
-
if (
|
|
963
|
-
this.attributes.playsinline ||
|
|
964
|
-
!document.fullscreenEnabled ||
|
|
965
|
-
this.options.controlslist.indexOf('nofullscreen') !== -1
|
|
966
|
-
) {
|
|
967
|
-
this.fullscreenEnabled = false
|
|
968
|
-
} else {
|
|
969
|
-
this.fullscreenEnabled = true
|
|
970
|
-
}
|
|
971
|
-
|
|
972
|
-
// Determine remote playback settings
|
|
973
|
-
if (
|
|
974
|
-
this.attributes.disableremoteplayback ||
|
|
975
|
-
this.options.controlslist.indexOf('noremoteplayback') !== -1
|
|
976
|
-
) {
|
|
977
|
-
this.options.remoteplayback = false
|
|
978
|
-
} else {
|
|
979
|
-
this.options.remoteplayback = true
|
|
980
|
-
}
|
|
981
|
-
|
|
982
|
-
// Determine download settings
|
|
983
|
-
if (this.options.controlslist.indexOf('nodownload') !== -1) {
|
|
984
|
-
this.options.download = false
|
|
985
|
-
} else {
|
|
986
|
-
this.options.download = true
|
|
987
|
-
}
|
|
1086
|
+
},
|
|
988
1087
|
},
|
|
989
|
-
mounted() {},
|
|
990
1088
|
}
|
|
991
1089
|
</script>
|
|
992
1090
|
|
package/src/i18n/en-US.js
CHANGED
package/src/i18n/es-ES.js
CHANGED
|
@@ -19,9 +19,10 @@ export default {
|
|
|
19
19
|
toggle_picture_in_picture: 'Alternar Imagen en imagen',
|
|
20
20
|
toggle_fullscreen: 'Alternar pantalla completa',
|
|
21
21
|
toggle_cc: 'Alternar subtítulos',
|
|
22
|
-
volume_slider: 'Control
|
|
23
|
-
rewind_10: '
|
|
24
|
-
play: 'Haz
|
|
22
|
+
volume_slider: 'Control de sonido',
|
|
23
|
+
rewind_10: 'volver 10 segundos atras',
|
|
24
|
+
play: 'Haz click para ver el video',
|
|
25
|
+
replay: 'haz click para volver ver el video',
|
|
25
26
|
pause: 'Haga clic para pausar',
|
|
26
27
|
no_support: 'Lo sentimos, su navegador no admite vídeos incrustados. ',
|
|
27
28
|
},
|
package/src/i18n/sv-SE.js
CHANGED
|
@@ -22,6 +22,7 @@ export default {
|
|
|
22
22
|
volume_slider: 'Ändra volym',
|
|
23
23
|
rewind_10: 'Spola tillbaka 10 sekunder',
|
|
24
24
|
play: 'Klicka för att spela',
|
|
25
|
+
replay: 'Klicka för att spela om',
|
|
25
26
|
pause: 'Klicka för att pausa',
|
|
26
27
|
no_support: 'Tyvärr, din webbläsare stöder inte inbäddade videor.',
|
|
27
28
|
},
|