Frontend: Loops videos shorter than 5s
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer
parent
65160859e1
commit
716e7f9b3c
2 changed files with 222 additions and 211 deletions
|
|
@ -4,129 +4,136 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import "mediaelement";
|
||||
import "mediaelement";
|
||||
|
||||
export default {
|
||||
name: "p-photo-player",
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
source: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ""
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "auto"
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "auto"
|
||||
},
|
||||
preload: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "none"
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
success: {
|
||||
type: Function,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
error: {
|
||||
type: Function,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
refresh: false,
|
||||
player: null,
|
||||
}),
|
||||
mounted() {
|
||||
this.render();
|
||||
},
|
||||
methods: {
|
||||
render() {
|
||||
const {MediaElementPlayer} = global;
|
||||
|
||||
const self = this;
|
||||
this.player = new MediaElementPlayer(this.$el, {
|
||||
videoWidth: this.width,
|
||||
videoHeight: this.height,
|
||||
pluginPath: "/static/build/",
|
||||
shimScriptAccess: "always",
|
||||
forceLive: false,
|
||||
loop: false,
|
||||
stretching: true,
|
||||
autoplay: true,
|
||||
setDimensions: true,
|
||||
success: (mediaElement, originalNode, instance) => {
|
||||
instance.setSrc(self.source);
|
||||
this.success(mediaElement, originalNode, instance);
|
||||
mediaElement.addEventListener(Hls.Events.MEDIA_ATTACHED, function () {
|
||||
});
|
||||
},
|
||||
error: (e) => {
|
||||
// console.log(e);
|
||||
}
|
||||
});
|
||||
},
|
||||
remove() {
|
||||
if (this.player) {
|
||||
this.player.pause();
|
||||
this.player.remove();
|
||||
this.player = null;
|
||||
}
|
||||
},
|
||||
setSource(src) {
|
||||
if (!this.player) {
|
||||
console.log('source: player not initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!src) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.player.height = this.height;
|
||||
this.player.width = this.width;
|
||||
this.player.videoHeight = this.height;
|
||||
this.player.videoWidth = this.width;
|
||||
this.$el.style.cssText = "width: " + this.width + "px; height: " + this.height + "px;"
|
||||
|
||||
this.player.setSrc(src);
|
||||
this.player.setPoster("");
|
||||
this.player.load();
|
||||
},
|
||||
pause() {
|
||||
if (this.player) {
|
||||
this.player.pause();
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.remove();
|
||||
},
|
||||
watch: {
|
||||
source: function (source) {
|
||||
if (source) {
|
||||
this.setSource(source);
|
||||
}
|
||||
},
|
||||
},
|
||||
export default {
|
||||
name: "p-photo-player",
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
source: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ""
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "auto"
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "auto"
|
||||
},
|
||||
preload: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: "none"
|
||||
},
|
||||
autoplay: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
loop: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
success: {
|
||||
type: Function,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
error: {
|
||||
type: Function,
|
||||
default() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
refresh: false,
|
||||
player: null,
|
||||
}),
|
||||
mounted() {
|
||||
this.render();
|
||||
},
|
||||
methods: {
|
||||
render() {
|
||||
const {MediaElementPlayer} = global;
|
||||
|
||||
const self = this;
|
||||
this.player = new MediaElementPlayer(this.$el, {
|
||||
videoWidth: this.width,
|
||||
videoHeight: this.height,
|
||||
pluginPath: "/static/build/",
|
||||
shimScriptAccess: "always",
|
||||
forceLive: false,
|
||||
loop: this.loop,
|
||||
stretching: true,
|
||||
autoplay: true,
|
||||
preload: "auto",
|
||||
setDimensions: true,
|
||||
success: (mediaElement, originalNode, instance) => {
|
||||
instance.setSrc(self.source);
|
||||
this.success(mediaElement, originalNode, instance);
|
||||
mediaElement.addEventListener(Hls.Events.MEDIA_ATTACHED, function () {
|
||||
});
|
||||
},
|
||||
error: (e) => {
|
||||
// console.log(e);
|
||||
}
|
||||
});
|
||||
},
|
||||
remove() {
|
||||
if (this.player) {
|
||||
this.player.pause();
|
||||
this.player.remove();
|
||||
this.player = null;
|
||||
}
|
||||
},
|
||||
setSource(src) {
|
||||
if (!this.player) {
|
||||
console.log('source: player not initialized');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!src) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.player.height = this.height;
|
||||
this.player.width = this.width;
|
||||
this.player.videoHeight = this.height;
|
||||
this.player.videoWidth = this.width;
|
||||
this.player.loop = this.loop;
|
||||
this.$el.style.cssText = "width: " + this.width + "px; height: " + this.height + "px;"
|
||||
|
||||
this.player.setSrc(src);
|
||||
this.player.setPoster("");
|
||||
this.player.load();
|
||||
},
|
||||
pause() {
|
||||
if (this.player) {
|
||||
this.player.pause();
|
||||
}
|
||||
},
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.remove();
|
||||
},
|
||||
watch: {
|
||||
source: function (source) {
|
||||
if (source) {
|
||||
this.setSource(source);
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,96 +1,100 @@
|
|||
<template>
|
||||
<modal name="video" ref="video" :height="height" :width="width" :reset="true" class="p-video-dialog" @before-close="onClose"
|
||||
<modal name="video" ref="video" :height="height" :width="width" :reset="true" class="p-video-dialog"
|
||||
@before-close="onClose"
|
||||
@before-open="onOpen">
|
||||
<p-video-player v-show="show" ref="player" :source="source" :height="height.toString()"
|
||||
:width="width.toString()" :autoplay="true"></p-video-player>
|
||||
:width="width.toString()" :autoplay="true" :loop="loop"></p-video-player>
|
||||
</modal>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'p-video-dialog',
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
source: "",
|
||||
defaultWidth: 640,
|
||||
defaultHeight: 480,
|
||||
width: 640,
|
||||
height: 480,
|
||||
video: null,
|
||||
album: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(ev) {
|
||||
this.video = ev.params.video;
|
||||
this.album = ev.params.album;
|
||||
this.play();
|
||||
},
|
||||
onClose() {
|
||||
this.$refs.player.pause();
|
||||
this.show = false;
|
||||
},
|
||||
play() {
|
||||
if (!this.video) {
|
||||
this.$notify.error("no video selected");
|
||||
return;
|
||||
}
|
||||
|
||||
let main = this.video.mainFile();
|
||||
let file = this.video.videoFile();
|
||||
let uri = this.video.videoUrl();
|
||||
|
||||
if (!uri) {
|
||||
this.$notify.error("no video selected");
|
||||
return;
|
||||
}
|
||||
|
||||
const vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
const vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
|
||||
let width = 0;
|
||||
let height = 0;
|
||||
|
||||
if (file.Width > 0) {
|
||||
width = file.Width;
|
||||
} else if (main && main.Width > 0) {
|
||||
width = main.Width;
|
||||
} else {
|
||||
width = this.defaultWidth;
|
||||
}
|
||||
|
||||
if (file.Height > 0) {
|
||||
height = file.Height;
|
||||
} else if (main && main.Height > 0) {
|
||||
height = main.Height;
|
||||
} else {
|
||||
height = this.defaultHeight;
|
||||
}
|
||||
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
|
||||
if (vw < (width + 80)) {
|
||||
let newWidth = vw - 120;
|
||||
this.height = Math.round(newWidth * (height / width));
|
||||
this.width = newWidth;
|
||||
}
|
||||
|
||||
if (vh < (this.height + 100)) {
|
||||
let newHeight = vh - 160;
|
||||
this.width = Math.round(newHeight * (width / height));
|
||||
this.height = newHeight;
|
||||
}
|
||||
|
||||
// Resize video overlay.
|
||||
this.$refs.video.setInitialSize();
|
||||
let size = { width: this.width, height: this.height }
|
||||
this.$refs.video.onModalResize({size});
|
||||
|
||||
// Play by triggering source change event.
|
||||
this.source = uri;
|
||||
this.show = true;
|
||||
},
|
||||
},
|
||||
export default {
|
||||
name: 'p-video-dialog',
|
||||
data() {
|
||||
return {
|
||||
show: false,
|
||||
source: "",
|
||||
defaultWidth: 640,
|
||||
defaultHeight: 480,
|
||||
width: 640,
|
||||
height: 480,
|
||||
video: null,
|
||||
album: null,
|
||||
loop: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onOpen(ev) {
|
||||
this.video = ev.params.video;
|
||||
this.album = ev.params.album;
|
||||
this.play();
|
||||
},
|
||||
onClose() {
|
||||
this.$refs.player.pause();
|
||||
this.show = false;
|
||||
},
|
||||
play() {
|
||||
if (!this.video) {
|
||||
this.$notify.error("no video selected");
|
||||
return;
|
||||
}
|
||||
|
||||
let main = this.video.mainFile();
|
||||
let file = this.video.videoFile();
|
||||
let uri = this.video.videoUrl();
|
||||
|
||||
if (!uri) {
|
||||
this.$notify.error("no video selected");
|
||||
return;
|
||||
}
|
||||
|
||||
const vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
const vh = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
|
||||
|
||||
let width = 0;
|
||||
let height = 0;
|
||||
|
||||
if (file.Width > 0) {
|
||||
width = file.Width;
|
||||
} else if (main && main.Width > 0) {
|
||||
width = main.Width;
|
||||
} else {
|
||||
width = this.defaultWidth;
|
||||
}
|
||||
|
||||
if (file.Height > 0) {
|
||||
height = file.Height;
|
||||
} else if (main && main.Height > 0) {
|
||||
height = main.Height;
|
||||
} else {
|
||||
height = this.defaultHeight;
|
||||
}
|
||||
|
||||
this.loop = file.Duration >= 0 && file.Duration <= 5000000000;
|
||||
|
||||
this.width = width;
|
||||
this.height = height;
|
||||
|
||||
if (vw < (width + 80)) {
|
||||
let newWidth = vw - 120;
|
||||
this.height = Math.round(newWidth * (height / width));
|
||||
this.width = newWidth;
|
||||
}
|
||||
|
||||
if (vh < (this.height + 100)) {
|
||||
let newHeight = vh - 160;
|
||||
this.width = Math.round(newHeight * (width / height));
|
||||
this.height = newHeight;
|
||||
}
|
||||
|
||||
// Resize video overlay.
|
||||
this.$refs.video.setInitialSize();
|
||||
let size = {width: this.width, height: this.height}
|
||||
this.$refs.video.onModalResize({size});
|
||||
|
||||
// Play by triggering source change event.
|
||||
this.source = uri;
|
||||
this.show = true;
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in a new issue