Oscar ovlb

🦉

Owlish

code & design. mostly owl, part-time human.

ovlb / ks-video-adding-controls.js

Created February 7, 2019 00:21

KS Video – adding video controls

this.$vidContainer.setAttribute('controls', 'true')

ovlb / ks-video-show-image-ended.js

Last active February 7, 2019 00:23

KS Video – Show image if video ends

	this.$vidContainer.addEventListener('ended', () => {
	VideoPlayerController.showImage(this.$imgContainer)

	// Hand back control to this class
	this.userControls = false
	})

ovlb / ks-video-hiding-image.js

Created February 5, 2019 23:20

KS Video – Hide preview image

	static showImage($img) {
	$img.classList.remove('video-container__image--hidden')
	}

ovlb / ks-video-play.js

Created February 5, 2019 23:13

KS Video – Play video

	playVideo() {
	console.log('HLS – Playing video')
	VideoPlayerController.hideImage(this.$imgContainer)
	this.$vidContainer.play().then(() => {
	console.log('HLS - Video played')
	})
	}

ovlb / ks-video-library-parse.js

Created February 5, 2019 23:09

KS Video – Parse HLS manifest with library

	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 / vue.config.alias.js

Created January 25, 2019 17:51

Vue Open Source: Webpack Resolve Alias

	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 / vue.config.entry.js

Created January 25, 2019 17:48

Vue Open Source: Webpack Config Entry

	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 / vue.config.output.js

Last active January 25, 2019 17:47

Vue Open Source: vue.config.js – Output

	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 / Vue Open Source: vue.config.js

Created January 25, 2019 17:41

	// vue.config.js

	const path = require('path')

	module.exports = {
	outputDir: path.resolve(__dirname, 'dist-demo'),
	chainWebpack: config => {
	config
	.entry('app')
	.clear()

ovlb / ks-video-image-styles.scss

Created January 14, 2019 19:46

KS – Styles for the custom preview image

	.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%);