Skip to content

Commit

Permalink
Iframe based version
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ornhoj
Ornhoj committed Feb 28, 2018
1 parent 4ec5fdb commit 17fc150
Show file tree
Hide file tree
Showing 8 changed files with 70 additions and 289 deletions.
2 changes: 1 addition & 1 deletion dist/skyvideo.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/skyvideo.min.js
View file

Large diffs are not rendered by default.

6 changes: 0 additions & 6 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,6 @@
"type": "git",
"url": "https://github.com/skybrud/sky-video.git"
},
"dependencies": {
"@vimeo/player": "^2.2.1",
"get-video-id": "^3.0.0",
"sky-window": "^1.0.4",
"youtube-player": "^5.4.0"
},
"devDependencies": {
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
Expand Down
52 changes: 26 additions & 26 deletions src/SkyVideo.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,30 @@
<div
ref="container"
:class="['sky-video', { 'playing': embedded }, coverMode]"
>
<div
v-if="autoplayDisabled"
class="sky-video-click"
@click.once="embed"
>
<button
v-if="!embedded"
:class="['sky-video-play', {'default-button': defaultButton}]"
<div class="sky-video">
<div @click.once="embed">
<div class="sky-video-click">
<label>
<button
:class="['sky-video-play', {'default-button': defaultButton}]"
>
<slot name="play" />
</button>
</label>
</div>

<div
v-if="embedded"
class="sky-video-iframe"
>
<slot name="play" />
</button>
</div>
<iframe
frameborder="0"
allowfullscreen="allowfullscreen"
:src="iframeSrc"
/>
</div>

<div
v-show="embedded"
class="sky-video-iframe"
>
<div ref="player"></div>
<div
v-else
class="sky-video-poster"
:style="iframePoster"
/>
</div>

<div
v-if="!embedded"
class="sky-video-poster"
:style="videoPoster"
/>
</div>
39 changes: 23 additions & 16 deletions src/SkyVideo.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,24 @@
.sky-video {
position: relative;
padding-top: 56.25%;
width: 100%;

label {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;

&:before {
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
z-index: 1;
}
}
}

button.sky-video-play {
Expand Down Expand Up @@ -50,37 +67,27 @@ button.sky-video-play {
left: 0;
right: 0;
bottom: 0;
z-index: 2;
z-index: 3;
position: absolute;

iframe,
div {
iframe {
width: 100%;
height: 100%;
}

.playing & {
z-index: 4;
}
}

.sky-video-click {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
padding-top: 56.25%;
}

.sky-video-poster {
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
z-index: 0;
position: absolute;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}
198 changes: 18 additions & 180 deletions src/SkyVideo.vue
View file
Original file line number Diff line number Diff line change
@@ -1,201 +1,39 @@
<script>
import YoutubePlayer from 'youtube-player';
import VimeoPlayer from '@vimeo/player';
import GetVideoId from 'get-video-id';
import SkyWindow from 'sky-window';
export default {
name: 'SkyVideo',
props: {
src: String,
poster: String,
width: {
type: Number,
default: 640,
},
height: {
type: Number,
default: 360,
},
autoplay: {
type: [Boolean, String],
default: false,
},
loop: {
type: Boolean,
default: false,
},
mute: {
type: Boolean,
default: false,
},
controls: {
type: Boolean,
default: true,
},
info: {
type: Boolean,
default: false,
},
mode: {
type: String,
default: 'contain',
},
},
props: ['src', 'poster'],
data() {
return {
autoplayDisabled: true,
source: null,
player: null,
embedded: false,
isYoutube: false,
isVimeo: false,
videoRatio: this.width / this.height,
container: {
rect: null,
ratio: null,
},
};
},
methods: {
embed() {
this.embedded = true;
},
},
computed: {
coverMode() {
if (this.mode === 'cover') {
return this.videoRatio <= this.container.ratio
? 'landscape'
: 'portrait';
iframeSrc() {
let iframeSrc;
if (this.src.indexOf('vimeo') !== -1) {
iframeSrc = this.src.replace('vimeo.com', 'player.vimeo.com/video');
} else if (this.src.indexOf('youtube') !== -1) {
iframeSrc = this.src.replace('watch?v=', 'embed/');
}
return '';
},
landscapeOriented() {
return this.videoRatio <= this.container.ratio;
iframeSrc += '?autoplay=true&rel=0';
return iframeSrc;
},
videoPoster() {
if (this.poster && !this.shouldAutoplay()) {
return `background-image: url('${this.poster}')`;
}
if (!this.poster && !this.shouldAutoplay()) {
iframePoster() {
if (!this.poster) {
console.warn('SkyVideo: There are no poster defined.');
return '';
}
return '';
return `background-image: url('${this.poster}')`;
},
defaultButton() {
return this.$slots.play === undefined;
},
},
beforeMount() {
this.$set(this, 'source', GetVideoId(this.src));
if (this.source.service === 'vimeo') {
this.isVimeo = true;
} else if (this.source.service === 'youtube') {
this.isYoutube = true;
} else {
console.error('SkyVideo: Unsupported source');
}
},
mounted() {
if (this.isYoutube) {
// settings: https://github.com/gajus/youtube-player
this.player = YoutubePlayer(this.$refs.player, {
width: this.width,
height: this.height,
videoId: this.source.id,
playerVars: {
autoplay: 0,
origin: window.location.hostname, // Good practice ved brug af jsApi
enablejsapi: 1, // Giver js control over iframe
controls: this.controls ? 1 : 0,
showinfo: this.info ? 1 : 0,
rel: 0,
playsinline: 1,
loop: this.loop ? 1 : 0,
},
});
} else {
// Settings: https://github.com/vimeo/player.js
this.player = new VimeoPlayer(this.$refs.player, {
width: this.width,
height: this.height,
id: this.source.id,
background: !this.controls, // false means show controls
loop: this.loop,
title: this.info,
//color: 'ff0000', // Color supplementing the gray UI
});
}
SkyWindow.resize.subscribe(() => {
this.setContainer();
});
if (this.shouldAutoplay()) {
this.embed();
}
},
updated() {
this.setContainer();
},
methods: {
setContainer() {
this.container.rect = this.$refs.container.getBoundingClientRect();
this.container.ratio = this.container.rect.width / this.container.rect.height;
},
embed() {
if (!this.embedded) {
if (this.isYoutube) {
this.player.playVideo()
.then(() => {
if (this.mute) {
this.player.mute();
}
this.player.on('stateChange', (event) => {
if (event.data !== -1 && !this.embedded) {
this.embedded = true;
}
});
});
}
if (this.isVimeo) {
this.player.ready()
.then(() => {
if (this.mute) {
this.player.setVolume(0);
}
this.embedded = true;
this.player.play();
});
}
}
},
shouldAutoplay() {
if (this.autoplay === true) {
this.autoplayDisabled = false;
return true;
}
if (this.autoplay === 'touch') {
if (window.innerWidth <= 1024) {
this.autoplayDisabled = false;
return true;
}
}
if (this.autoplay === 'desktop') {
if (window.innerWidth > 1024) {
this.autoplayDisabled = false;
return true;
}
}
return false;
},
},
};
</script>

Expand Down
1 change: 0 additions & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ const config = {
],
loaders: {
css: 'vue-style-loader!css-loader!sass-loader',
scss: 'vue-style-loader!css-loader!sass-loader',
},
},
},
Expand Down
Loading

0 comments on commit 17fc150

Please sign in to comment.