在Hexo博客页面中渲染上传至云服务器的视频文件

发表于 分类于 阅读次数：
本文字数： 1.3k 阅读时长 ≈ 1 分钟
介绍如何将视频文件上传至云服务器，再将其渲染至Hexo博客页面中。

前言

本文将介绍如何讲视频文件上传至云服务器，再将其渲染至Hexo博客页面中。

示例：笃行自有风华 | 花猪

操作

视频文件通常比较大，如果是直接走图床上传至GitHub，通常会报错。即便上传一些小的视频文件，其加载速度也会变慢。

因此考虑直接将视频文件上传至阿里云服务器本地，让Hexo直接读取本地视频文件。

说明：本文以“预科话剧表演.mp4”文件进行演示。

  1. 在服务器的/var/www/resources/目录下新建一个video文件夹，并将需要上传的视频文件传输到这里。

  2. 接下来就需要配置nginx服务，使其可以加载已上传的视频文件。进入服务器的/etc/nginx/sites-enabled目录，编辑cnhuazhu.conf文件。

  3. 在server块下新增视频静态资源配置。

    1
    2
    3
    4
    5
    6
    7
    8
    # ========== 新增视频静态资源配置 ==========
    location /resources/ {
    	alias /var/www/resources/;
        types {
        	video/mp4 mp4;
        }
        add_header Accept-Ranges bytes;
    }

    如下图所示：

  4. 接着在终端键入nginx -t命令进行校验，一切正常会出现如下回显：

  5. 接着在终端键入systemctl reload nginx命令重载。

  6. 然后执行如下两条权限命令（一定要做，不然大概率 403）：

    1
    2
    chown -R www-data:www-data /var/www/resources
    chmod -R 755 /var/www/resources

  7. 可以通过浏览器访问https://cnhuazhu.top/resources/video/预科话剧表演.mp4链接，会看到直接出现视频播放器，成功。

  8. 最后直接在Markdown文件中添加<video>标签，即可生效。

    1
    2
    3
    <video controls preload="metadata" width="100%">   
        <source src="https://cnhuazhu.top/resources/video/预科话剧表演.mp4" type="video/mp4"> 
    </video>

  9. 至此操作完毕。

其他视频上传

以后如果有想上传的视频，直接上传至/var/www/resources/video目录下就好。

再举一个例子，这里上传至云端一个名为瞌睡的十八.mp4文件。

直接在浏览器访问https://cnhuazhu.top/resources/video/瞌睡的十八.mp4即可看到视频。（视频加载速度没有任何问题，甚至比GitHub图床加载图片要快！）

示例如下：

后记

其实有一个取巧的办法，就是将视频上传至视频网站（如：哔哩哔哩），再通过插入响应式视频代码块即可实现。操作说明见下文：

Hexo插入响应式Bilibili视频代码块 | 花猪のBlog

但是有些内容不想太过公开，仅关注本博主的朋友们可见，这是一个不错的办法。

相关文章