add embed component for yt, vimeo & dailymotion links

This commit is contained in:
axolotle
2022-03-07 17:21:22 +01:00
parent 5840bda7cc
commit e801f60812
2 changed files with 77 additions and 1 deletions
+76
View File
@@ -0,0 +1,76 @@
<template>
<b-embed
:type="item.type"
aspect="16by9"
:src="item.src"
v-bind="item.attrs"
/>
</template>
<script>
export default {
name: 'EmbedVideo',
props: {
src: { type: String, required: true }
},
data () {
return {
types: [
{
reg: /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w-]+\?v=|embed\/|v\/)?)([\w-]+)(\S+)?$/i,
url: 'https://www.youtube.com/embed/$5',
params: {
'picture-in-picture': 1,
accelerometer: 1,
gyroscope: 1
}
},
{
reg: /^.*vimeo.com\/(\d+)($|\/|\b)/i,
url: 'https://player.vimeo.com/video/$1',
params: {
title: 1,
byline: 1,
portrait: 0
}
},
{
reg: /^.*(?:\/video|dai.ly)\/([A-Za-z0-9]+)([^#&?]*).*/i,
url: 'https://www.dailymotion.com/embed/video/$1',
params: {
autoplay: 0
}
}
]
}
},
computed: {
embed () {
return this.types.find(type => type.reg.exec(this.src))
},
item () {
const embed = this.embed
if (embed) {
const query = Object.entries(embed.params).map(entry => entry.join('=')).join('&')
const and = embed.url.indexOf('?') >= 0 ? '&' : '?'
return {
type: 'iframe',
src: this.src.replace(embed.reg, embed.url) + and + query,
attrs: { allowfullscreen: true }
}
}
return {
type: 'video',
src: this.src,
attrs: { controls: true }
}
}
}
}
</script>
+1 -1
View File
@@ -28,7 +28,7 @@
</div>
<div v-if="node.videos">
<video
<embed-video
v-for="video in node.videos" :key="video.url"
:src="video.url" class="mt-3"
/>