Video Hosting Methods

Sun, 17 Sep 2023 21:45:02 +0700

TL;DR / Geek Summary:

Anti-censorship architecture: Leveraging the GitHub + Cloudflare Pages pipeline for persistent, high-bandwidth video hosting.

Optimization stack: Custom Python-based FFMPEG automation for 30FPS transcoding and bitrate compression to ensure smooth edge delivery.

UI injection: Implementation of a modified Hugo shortcode using DPlayer with lazy-loading, visibility-aware pausing, and custom CSS interactions.

# Free Ways for Video Hosting

Yes, I finally chose the simplest method to combat the annoyance of malicious reports resulting in takedowns.

# Origin

# Practice

I used ffmpeg to transcode and compress my videos. For the specific code, check my previous article FFMPEG Batch Compression and Conversion to 30FPS . Then, I started looking for hosting methods and found Cloudflare Pages, which has unlimited traffic. Uploading to GitHub and accessing the filename is a seamless process.

# Modified Hugo Shortcode

Changed video.html to this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49


{{- $src := .Get "src" | default (.Get 0) -}}
<div id="dplayer"></div>

<link rel="preload" href="https://lib.baomitu.com/dplayer/1.25.0/DPlayer.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<script src="https://lib.baomitu.com/dplayer/1.25.0/DPlayer.min.js" defer></script>
<script defer>
document.addEventListener('DOMContentLoaded', function () {
 var dp = new DPlayer({
 container: document.getElementById('dplayer'),
 screenshot: false,
 video: {
 url: '{{- $src -}}',
 type: 'auto'
 },
 preload: 'none',
 lang: 'en'
 });

 dp.on('fullscreen', function () {
 dp.fullScreen.request('web');
 });

 dp.on('timeupdate', function () {
 if (dp.video.currentTime === 0) {
 dp.seek(1);
 }
 });

 document.addEventListener('visibilitychange', function() {
 if (document.hidden) {
 dp.pause();
 }
 });

 var dplayerContainer = document.getElementById('dplayer');
 var timer;

 dplayerContainer.addEventListener('mouseleave', function() {
 timer = setTimeout(function() {
 dplayerContainer.style.border = 'none';
 }, 1000);
 });

 dplayerContainer.addEventListener('mouseenter', function() {
 clearTimeout(timer);
 dplayerContainer.style.border = '';
 });
});
</script>

Web Technology on LEl_FENG Blog

Video Hosting Methods

# Free Ways for Video Hosting

# Origin

# Practice

# Modified Hugo Shortcode