diff options
Diffstat (limited to 'packages/frontend/src/components')
| -rw-r--r-- | packages/frontend/src/components/MkMediaVideo.vue | 29 |
1 files changed, 17 insertions, 12 deletions
diff --git a/packages/frontend/src/components/MkMediaVideo.vue b/packages/frontend/src/components/MkMediaVideo.vue index df0bf84116..5a2da050bb 100644 --- a/packages/frontend/src/components/MkMediaVideo.vue +++ b/packages/frontend/src/components/MkMediaVideo.vue @@ -6,19 +6,20 @@ </div> </div> <div v-else class="kkjnbbplepmiyuadieoenjgutgcmtsvu"> - <video - :poster="video.thumbnailUrl" - :title="video.comment" - :alt="video.comment" - preload="none" - controls - @contextmenu.stop - > - <source - :src="video.url" - :type="video.type" + <vue-plyr> + <video + controls + crossorigin + playsinline + :data-poster="video.thumbnailUrl" > - </video> + <source + size="720" + :src="video.url" + :type="video.type" + /> + </video> + </vue-plyr> <i class="ti ti-eye-off" @click="hide = true"></i> </div> </template> @@ -26,7 +27,9 @@ <script lang="ts" setup> import { ref } from 'vue'; import * as misskey from 'misskey-js'; +import VuePlyr from 'vue-plyr'; import { defaultStore } from '@/store'; +import 'vue-plyr/dist/vue-plyr.css'; const props = defineProps<{ video: misskey.entities.DriveFile; @@ -39,6 +42,8 @@ const hide = ref((defaultStore.state.nsfw === 'force') ? true : props.video.isSe .kkjnbbplepmiyuadieoenjgutgcmtsvu { position: relative; + --plyr-color-main: var(--accent); + > i { display: block; position: absolute; |