add embed component for yt, vimeo & dailymotion links
This commit is contained in:
@@ -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>
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-if="node.videos">
|
<div v-if="node.videos">
|
||||||
<video
|
<embed-video
|
||||||
v-for="video in node.videos" :key="video.url"
|
v-for="video in node.videos" :key="video.url"
|
||||||
:src="video.url" class="mt-3"
|
:src="video.url" class="mt-3"
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user