@grfzhl/vue-hls-player 1.0.11 → 1.0.13
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.
|
@@ -6,6 +6,17 @@
|
|
|
6
6
|
<h2>{{ introTitle }}</h2>
|
|
7
7
|
</div>
|
|
8
8
|
</div>
|
|
9
|
+
<div class="media-overlay" v-if="initialPlayButton">
|
|
10
|
+
<div class="initial-play">
|
|
11
|
+
<media-play-button mediapaused="" class="media-button" aria-label="play" tabindex="0" role="button" @click="video.play()">
|
|
12
|
+
<svg slot="icon" viewBox="0 0 32 32">
|
|
13
|
+
<g>
|
|
14
|
+
<path id="icon-play" d="M20.7131 14.6976C21.7208 15.2735 21.7208 16.7265 20.7131 17.3024L12.7442 21.856C11.7442 22.4274 10.5 21.7054 10.5 20.5536L10.5 11.4464C10.5 10.2946 11.7442 9.57257 12.7442 10.144L20.7131 14.6976Z"></path>
|
|
15
|
+
</g>
|
|
16
|
+
</svg>
|
|
17
|
+
</media-play-button>
|
|
18
|
+
</div>
|
|
19
|
+
</div>
|
|
9
20
|
<slot name="before-media"></slot>
|
|
10
21
|
<media-theme-sutro class="video-player-theme-container" :class="{'is-fullscreen': isFullscreen}">
|
|
11
22
|
<video
|
|
@@ -122,6 +133,7 @@ const videoCursor = ref(0)
|
|
|
122
133
|
const isFullscreen = ref(false);
|
|
123
134
|
const orientation = ref(null)
|
|
124
135
|
const autoHideIntroTitle = ref(false);
|
|
136
|
+
const initialPlayButton = ref(false);
|
|
125
137
|
|
|
126
138
|
const videoElement = defineModel()
|
|
127
139
|
|
|
@@ -138,6 +150,10 @@ onMounted(() => {
|
|
|
138
150
|
document.addEventListener('fullscreenchange', onFullscreenChange);
|
|
139
151
|
document.addEventListener('orientationchange', onOrientationChange);
|
|
140
152
|
window.screen.orientation.addEventListener("change", onOrientationChange);
|
|
153
|
+
|
|
154
|
+
if(video.value.paused || video.value.currentTime === 0) {
|
|
155
|
+
initialPlayButton.value = true
|
|
156
|
+
}
|
|
141
157
|
|
|
142
158
|
/**
|
|
143
159
|
* detect initial display orientation
|
|
@@ -251,6 +267,9 @@ function enterFullscreen(event) {
|
|
|
251
267
|
|
|
252
268
|
function updateCurrentTime() {
|
|
253
269
|
videoCursor.value = video.value.currentTime;
|
|
270
|
+
if(!video.value.paused) {
|
|
271
|
+
initialPlayButton.value = false;
|
|
272
|
+
}
|
|
254
273
|
}
|
|
255
274
|
|
|
256
275
|
function toggleTranscript() {
|
|
@@ -368,6 +387,31 @@ function changeSpeed(e) {
|
|
|
368
387
|
position: relative;
|
|
369
388
|
line-height: 0;
|
|
370
389
|
}
|
|
390
|
+
.media-overlay {
|
|
391
|
+
position: absolute;
|
|
392
|
+
height: calc(100% - 50px);
|
|
393
|
+
top: 0;
|
|
394
|
+
width: 100%;
|
|
395
|
+
z-index: 99;
|
|
396
|
+
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(0,0,0,0) 100%);
|
|
397
|
+
}
|
|
398
|
+
.media-overlay .initial-play {
|
|
399
|
+
display: flex;
|
|
400
|
+
justify-content: center;
|
|
401
|
+
align-content: center;
|
|
402
|
+
align-items: center;
|
|
403
|
+
height: 100%;
|
|
404
|
+
}
|
|
405
|
+
.media-overlay .initial-play media-play-button {
|
|
406
|
+
width: 80px;
|
|
407
|
+
height: 80px;
|
|
408
|
+
margin-top: 50px;
|
|
409
|
+
border-radius: 10px;
|
|
410
|
+
}
|
|
411
|
+
.media-overlay .initial-play media-play-button svg {
|
|
412
|
+
width: 100%;
|
|
413
|
+
height: 100%;
|
|
414
|
+
}
|
|
371
415
|
.media-fullscreen-overlay {
|
|
372
416
|
display: none;
|
|
373
417
|
position: fixed;
|