Add quality selector.

This commit is contained in:
FireMasterK 2021-02-25 12:38:47 +05:30
parent b6c756847a
commit e78b5bdec4
No known key found for this signature in database
GPG key ID: 8DFF5DD33E93DB58

View file

@ -1,6 +1,13 @@
<template> <template>
<div class="uk-container uk-container-xlarge"> <div class="uk-container uk-container-xlarge">
<video controls></video> <div data-shaka-player-container>
<video
data-shaka-player
controls
autoplay
style="width: 100%; height: 100%"
></video>
</div>
<h1 class="uk-text-bold">{{ video.title }}</h1> <h1 class="uk-text-bold">{{ video.title }}</h1>
<img :src="video.uploaderAvatar" loading="lazy" /> <img :src="video.uploaderAvatar" loading="lazy" />
@ -73,7 +80,9 @@
</template> </template>
<script> <script>
const shaka = import("shaka-player/dist/shaka-player.compiled.js"); import "shaka-player/dist/shaka-player.ui.js";
import("shaka-player/dist/controls.css");
const shaka = import("shaka-player/dist/shaka-player.ui.js");
import Constants from "@/Constants.js"; import Constants from "@/Constants.js";
export default { export default {
@ -194,6 +203,18 @@ export default {
localStorage.getItem( localStorage.getItem(
"volume" "volume"
) || 1; ) || 1;
const ui = new shaka.ui.Overlay(
player,
document.querySelector(
"div[data-shaka-player-container]"
),
videoEl
);
const config = {
overflowMenuButtons: ["quality"]
};
ui.configure(config);
}); });
videoEl.setAttribute( videoEl.setAttribute(