Svelte video element and playback

Example for video playback with svelte

---

How to setup svelte project?

npx degit sveltejs/template moz-todo-svelte
cd moz-todo-svelte
npm install
npm run dev

What is the HTML5 video tag ?

I often find that HTML5 has several easy ways to play videos and that it is really easy to embed video playback code. You need to write very little code and it works well on all web browsers.

The need for using an SPA framework for this is foreign to me, but then I have this svelte sample and I dunno what to do with it, so I am sending you this now.

Code sample and demo

main.js

import Video from './Video.svelte';

const app = new Video({
	target: document.body,
});

export default app;

Video.svelte

<script>
	let time = 0;
	let duration;
	let paused = true;

	let showControls = true;
	let showControlsTimeout;

	// Used to track time of last mouse down event
	let lastMouseDown;

	function handleMove(e) {
		// Make the controls visible, but fade out after
		// 2.5 seconds of inactivity
		clearTimeout(showControlsTimeout);
		showControlsTimeout = setTimeout(() => (showControls =
false), 2500);
		showControls = true;

		if (!duration) return; // video not loaded yet
		if (e.type !== 'touchmove' && !(e.buttons & 1)) return;
// mouse not down

		const clientX = e.type === 'touchmove' ?
e.touches[0].clientX : e.clientX;
		const { left, right } = this.getBoundingClientRect();
		time = (duration * (clientX - left)) / (right - left);
	}

	// we can't rely on the built-in click event, because it fires
	// after a drag — we have to listen for clicks ourselves
	function handleMousedown(e) {
		lastMouseDown = new Date();
	}

	function handleMouseup(e) {
		if (new Date() - lastMouseDown < 300) {
			if (paused) e.target.play();
			else e.target.pause();
		}
	}

	function format(seconds) {
		if (isNaN(seconds)) return '...';

		const minutes = Math.floor(seconds / 60);
		seconds = Math.floor(seconds % 60);
		if (seconds < 10) seconds = '0' + seconds;

		return `${minutes}:${seconds}`;
	}
</script>

<h1>Video demo</h1>

<div>
	<video
		poster="https://sveltejs.github.io/assets/caminandes-llamigos.jpg"
		src="https://sveltejs.github.io/assets/caminandes-llamigos.mp4"
		on:mousemove={handleMove}
		on:touchmove|preventDefault={handleMove}
		on:mousedown={handleMousedown}
		on:mouseup={handleMouseup}
		bind:currentTime={time}
		bind:duration
		bind:paused
	>
		<track kind="captions" />
	</video>

	<div class="controls" style="opacity: {duration && showControls
? 1 : 0}">
		<progress value={time / duration || 0} />

		<div class="info">
			<span class="time">{format(time)}</span>
			<span>click anywhere to {paused ? 'play' :
'pause'} / drag to seek</span>
			<span class="time">{format(duration)}</span>
		</div>
	</div>
</div>

<style>
	div {
		position: relative;
	}

	.controls {
		position: absolute;
		top: 0;
		width: 100%;
		transition: opacity 1s;
	}

	.info {
		display: flex;
		width: 100%;
		justify-content: space-between;
	}

	span {
		padding: 0.2em 0.5em;
		color: white;
		text-shadow: 0 0 8px black;
		font-size: 1.4em;
		opacity: 0.7;
	}

	.time {
		width: 3em;
	}

	.time:last-child {
		text-align: right;
	}

	progress {
		display: block;
		width: 100%;
		height: 10px;
		-webkit-appearance: none;
		appearance: none;
	}

	progress::-webkit-progress-bar {
		background-color: rgba(0, 0, 0, 0.2);
	}

	progress::-webkit-progress-value {
		background-color: rgba(255, 255, 255, 0.6);
	}

	video {
		width: 100%;
	}
</style>

Conclusion

I do see a difference between how svelte handles the video tag better with its code. This is your svelte lesson for today.

We shall examine other ideas using svelte, vue and htmx later.

Answer

What is AH and ESP?

AH stands for authenticated header which is just a form of HMAC computation on IP headers. ESP is escapsulated security payload which encrypts giving confidentiality to IPsec packets.

These two protocols provide security for all IP traffic. This is a must in IPv6 but that never took off.

Question

How is HMAC implemented using math?

Feedback

I really love coding. I love it, but I still procrastinate, and that is a human thing to do.

I know releasing my SaaS will make me rich, but I want to do a good job of my product. Marketing won’t lead to success without high quality code.

---