Skip to content

Commit 812e63a

Browse files
mm-sammm-sam
committed
Merge remote-tracking branch 'remotes/origin/play-rate'
# Conflicts: # dist/index.html # dist/js/wistia-s3-player.min.js # dist/js/wistia-s3-player.min.js.map
2 parents d1f2efe + 11bb208 commit 812e63a

File tree

4 files changed

+112
-24
lines changed

4 files changed

+112
-24
lines changed

‎dist/index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
.demo-wrap {
4444
width: 100%;
4545
}
46-
}</style><script>var MEDIA_ENDPOINT = "https://demo.static.mixmedia.com/wistia-backup/cloudfront/media";</script><script defer="defer" src="js/wistia-s3-player.min.js?af1fed6c41c9c60f7af7"></script></head><body><h3 class="demo-title">WISTIA PLAYER ALTERNATIVE DEMO</h3><div class="demo-wrap"><div class="wistia_responsive_padding"><div class="wistia_responsive_wrapper"><div class="wistia_embed wistia_async_u7k1cgyjy0 videoFoam=true playsinline=true" style="height:100%;width:100%">&nbsp;</div></div></div><div class="console"><pre></pre></div></div><script>(function (){
46+
}</style><script>var MEDIA_ENDPOINT = "https://demo.static.mixmedia.com/wistia-backup/cloudfront/media";</script><script defer="defer" src="js/wistia-s3-player.min.js?dcf589717f4e3677efeb"></script></head><body><h3 class="demo-title">WISTIA PLAYER ALTERNATIVE DEMO</h3><div class="demo-wrap"><div class="wistia_responsive_padding"><div class="wistia_responsive_wrapper"><div class="wistia_embed wistia_async_u7k1cgyjy0 videoFoam=true playsinline=true" style="height:100%;width:100%">&nbsp;</div></div></div><div class="console"><pre></pre></div></div><script>(function (){
4747
var queue = [];
4848
function writeLog(msg) {
4949
queue.push(msg);

‎dist/js/wistia-s3-player.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/wistia-s3-player.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/WistiaPlayer.vue

Lines changed: 109 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ import spriteThumbnails from 'videojs-sprite-thumbnails';
1919
qualitySelector(videojs);
2020
videojs.registerPlugin('spriteThumbnails', spriteThumbnails);
2121
22-
2322
const Button = videojs.getComponent('Button');
23+
const PlaybackRateMenuButton = videojs.getComponent('PlaybackRateMenuButton');
2424
2525
class CustomPlayPauseButton extends Button {
2626
constructor(player, options) {
@@ -61,7 +61,69 @@ class CustomPlayPauseButton extends Button {
6161
}
6262
}
6363
64+
class CustomPlaybackRateMenuButton extends PlaybackRateMenuButton {
65+
constructor(player, options) {
66+
super(player, options);
67+
this.on('click', this.handleClick);
68+
document.addEventListener('click', this.handleDocumentClick.bind(this));
69+
document.addEventListener('touchend', this.handleDocumentTouch.bind(this));
70+
}
71+
72+
handleClick(event) {
73+
event.stopPropagation();
74+
event.preventDefault();
75+
if (this.menu) {
76+
if (this.menu.hasClass('vjs-lock-showing')) {
77+
this.menu.hide();
78+
this.menu.removeClass('vjs-lock-showing');
79+
} else {
80+
this.menu.show();
81+
this.menu.addClass('vjs-lock-showing');
82+
}
83+
}
84+
85+
const qualitySelector = document.querySelector('.vjs-quality-selector .vjs-menu');
86+
if (qualitySelector) {
87+
qualitySelector.classList.remove('vjs-lock-showing')
88+
}
89+
90+
}
91+
92+
93+
handleDocumentClick(event) {
94+
event.stopPropagation();
95+
event.preventDefault();
96+
const clickedElement = event.target;
97+
if (clickedElement.closest('.vjs-quality-selector')) {
98+
this.hideMenu();
99+
}
100+
}
101+
102+
handleDocumentTouch(event) {
103+
event.stopPropagation();
104+
event.preventDefault();
105+
const touchedElement = event.target;
106+
if (touchedElement.closest('.vjs-quality-selector')) {
107+
this.hideMenu();
108+
}
109+
}
110+
111+
hideMenu() {
112+
if (this.menu && this.menu.hasClass('vjs-lock-showing')) {
113+
this.menu.hide();
114+
this.menu.removeClass('vjs-lock-showing');
115+
}
116+
}
117+
118+
dispose() {
119+
document.removeEventListener('click', this.handleDocumentClick.bind(this));
120+
document.removeEventListener('touchend', this.handleDocumentTouch.bind(this));
121+
super.dispose();
122+
}
123+
}
124+
64125
videojs.registerComponent('CustomPlayPauseButton', CustomPlayPauseButton);
126+
videojs.registerComponent('CustomPlaybackRateMenuButton', CustomPlaybackRateMenuButton);
65127
66128
export default defineComponent({
67129
name: "WistiaPlayer",
@@ -73,7 +135,7 @@ export default defineComponent({
73135
cover: "",
74136
sources: [],
75137
hash_id_error: false,
76-
thumbnail_data:{},
138+
thumbnail_data: {},
77139
videoName: "",
78140
}
79141
},
@@ -93,7 +155,7 @@ export default defineComponent({
93155
vertical: true
94156
},
95157
'qualitySelector',
96-
'playbackRateMenuButton',
158+
'CustomPlaybackRateMenuButton',
97159
'fullscreenToggle',
98160
],
99161
},
@@ -108,7 +170,7 @@ export default defineComponent({
108170
userActions: {
109171
hotkeys: true
110172
}
111-
}
173+
};
112174
},
113175
},
114176
@@ -348,6 +410,12 @@ export default defineComponent({
348410
background-color: rgba(84, 187, 255, 0.7);
349411
vertical-align: middle;
350412
z-index: 9;
413+
414+
.vjs-button{
415+
&:hover {
416+
background-color: rgba(0, 0, 0, .2);
417+
}
418+
}
351419
}
352420
353421
.video-js .vjs-duration {
@@ -411,33 +479,53 @@ export default defineComponent({
411479
content: "\f101";
412480
}
413481
414-
.vjs-menu-button-popup .vjs-menu {
415-
bottom: 0;
416-
right: 0;
417-
left: 0;
418-
margin-bottom: 4.4em;
482+
//音量
483+
.vjs-volume-panel.vjs-control.vjs-volume-panel-vertical {
484+
&.vjs-hover {
485+
.vjs-volume-control.vjs-volume-vertical {
486+
left: -4em;
487+
}
488+
}
489+
490+
}
491+
.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-vertical {
492+
width: 4em;
493+
z-index: 9;
494+
margin-left: 0;
495+
}
496+
497+
.vjs-menu-button-popup {
498+
499+
.vjs-menu {
500+
bottom: 0;
501+
right: 0;
502+
left: 0;
503+
margin-bottom: 4.4em;
504+
}
505+
506+
&.vjs-hover {
507+
.vjs-menu {
508+
display: none;
509+
}
510+
}
419511
}
420512
421513
.vjs-menu-button-popup .vjs-menu .vjs-menu-content {
422-
width: 13.6em;
514+
width: 13.1em;
515+
left: -4em;
423516
bottom: 0;
424-
left: -5.1em;
425517
max-height: none;
426518
}
427519
428520
.vjs-quality-selector .vjs-menu .vjs-menu-content {
429-
left: -1.1em;
521+
left: 0;
430522
}
431523
432524
.vjs-playback-rate.vjs-control{
433-
width: 4.5em;
434-
}
525+
width: 5.1em;
435526
436-
.vjs-quality-selector .vjs-menu,
437-
.vjs-playback-rate .vjs-menu{
438-
display: none;
439-
&:hover{
440-
display: block;
527+
.vjs-menu-button {
528+
padding: 0;
441529
}
442530
}
443531
@@ -573,7 +661,7 @@ export default defineComponent({
573661
top: 50%;
574662
left: 50%;
575663
height: auto;
576-
transform: translate(-50%, -50%);
664+
transform: translate(-50%, -50%);
577665
}
578666
579667
}
@@ -596,7 +684,7 @@ export default defineComponent({
596684
display: none;
597685
}
598686
}
599-
687+
600688
}
601689
@media screen and (max-width: 1248px) {
602690
.video-player-wrap {

0 commit comments

Comments
 (0)