Back
Featured image of post Video Hosting Methods
Technology

Video Hosting Methods

Don't want videos to be taken down, haha

Table of contents

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

Video Takedown

# 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.

1 2 2

# 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>