Skip to content

Instantly share code, notes, and snippets.

Avatar
🦉
Owlish

Oscar ovlb

🦉
Owlish
View GitHub Profile
@ovlb
ovlb / ks-video-adding-controls.js
Created Feb 7, 2019
KS Video – adding video controls
View ks-video-adding-controls.js
this.$vidContainer.setAttribute('controls', 'true')
@ovlb
ovlb / ks-video-show-image-ended.js
Last active Feb 7, 2019
KS Video – Show image if video ends
View ks-video-show-image-ended.js
this.$vidContainer.addEventListener('ended', () => {
VideoPlayerController.showImage(this.$imgContainer)
// Hand back control to this class
this.userControls = false
})
@ovlb
ovlb / ks-video-hiding-image.js
Created Feb 5, 2019
KS Video – Hide preview image
View ks-video-hiding-image.js
static showImage($img) {
$img.classList.remove('video-container__image--hidden')
}
@ovlb
ovlb / ks-video-play.js
Created Feb 5, 2019
KS Video – Play video
View ks-video-play.js
playVideo() {
console.log('HLS – Playing video')
VideoPlayerController.hideImage(this.$imgContainer)
this.$vidContainer.play().then(() => {
console.log('HLS - Video played')
})
}
@ovlb
ovlb / ks-video-library-parse.js
Created Feb 5, 2019
KS Video – Parse HLS manifest with library
View ks-video-library-parse.js
parseHlsManifest() {
console.log('HLS – Parsing video manifest')
const { Hls } = window
const hls = new Hls()
const { src } = this.$vidContainer
hls.loadSource(src)
hls.attachMedia(this.$vidContainer)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
this.parsed = true
@ovlb
ovlb / vue.config.alias.js
Created Jan 25, 2019
Vue Open Source: Webpack Resolve Alias
View vue.config.alias.js
const path = require('path')
module.exports = {
// outputDir: path.resolve(__dirname, 'dist-demo'),
chainWebpack: config => {
// config
// .entry('app')
// .clear()
// .add('./demo/main.js')
config.resolve.alias
@ovlb
ovlb / vue.config.entry.js
Created Jan 25, 2019
Vue Open Source: Webpack Config Entry
View vue.config.entry.js
const path = require('path')
module.exports = {
// outputDir: path.resolve(__dirname, 'dist-demo'),
chainWebpack: config => {
config
.entry('app')
.clear()
.add('./demo/main.js')
// config.resolve.alias
@ovlb
ovlb / vue.config.output.js
Last active Jan 25, 2019
Vue Open Source: vue.config.js – Output
View vue.config.output.js
const path = require('path')
module.exports = {
outputDir: path.resolve(__dirname, 'dist-demo'),
// chainWebpack: config => {
// config
// .entry('app')
// .clear()
// .add('./demo/main.js')
// config.resolve.alias
View Vue Open Source: vue.config.js
// vue.config.js
const path = require('path')
module.exports = {
outputDir: path.resolve(__dirname, 'dist-demo'),
chainWebpack: config => {
config
.entry('app')
.clear()
@ovlb
ovlb / ks-video-image-styles.scss
Created Jan 14, 2019
KS – Styles for the custom preview image
View ks-video-image-styles.scss
.video-container__image {
pointer-events: none;
transition: opacity 0.3s cubic-bezier(0, 0.1, 0.3, 1);
// Add play icon
&::after {
background-image: url('/images/icon_play_big.svg');
background-position: center;
// Play icon in large containers should be larger than in small ones
background-size: calc(45px + 5%);
You can’t perform that action at this time.