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 v-if="node.videos">
|
||||
<video
|
||||
<embed-video
|
||||
v-for="video in node.videos" :key="video.url"
|
||||
:src="video.url" class="mt-3"
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user