利用H5搭建一个简易的视频分享网站，或者是家庭影院

最新推荐文章于 2023-07-12 21:58:04 发布

原创

最新推荐文章于 2023-07-12 21:58:04 发布 · 8.6k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#html5

本文介绍了如何利用HTML5的video标签搭建一个视频播放网页，包括视频材料的准备，如使用FormatFactory进行转码，以及利用mkvtoolnix和BatchSubtitlesConverter处理字幕。同时，文章提供了网页编写的基本步骤，强调了自定义CSS和JavaScript以提高加载速度和减少依赖。

前言

现在，越来越多的浏览器支持H5的 video 标签了，而不采用传统的flash播放控件。这对网页的跨平台无疑是一个很大的帮助，因为浏览器可以选择适合自身的方式实现这一标签。而且减少了开发网页的工作量，话不多说，我们来开发一个视频播放网页Demo，跟着我一步一步来。

视频材料准备

由于不同的浏览器支持的视频格式也不完全一样，因此一般采取两种做法：在服务器上放多个不同编码的视频或是将视频转码至一种比较通用的编码下。我们这里为了不使问题复杂化，选用最简单的那种方法，即把视频转码至通用的编码下。通用的编码一般有：DIVX, AVC和HEVC。经过我的测试，操作系统环境分别为Windows，IOS，浏览器分别为Edge，Safari，Firefox，Chrome，AVC在上述环境下支持情况最好，几乎在所有情形下都可正常使用。故先要将视频转换到AVC格式下。

视频源的选择

若是手机录制的视频或是后期生成的视频，自然格式方面没有什么可以叙述的。但如果可以以某种渠道获得各种视频的不同格式时，我推荐 .mkv 格式。因为其将视频和不同的音轨（经常是国语配音和英语配音）以及字幕集成在了一个文件中，利用以下我要叙述的工具，我们可以自由组合这些轨道并且抽取出字幕文件，以备后用。

非必要步骤：利用 mkvtoolnix 抽取出字幕文件，及自由组合音轨和视频轨

mkvtoolnix 是一款用于编辑 mkv，mka，mks 格式文件的编辑器，官方网站。这是一款免费的软件，选择最新版下载即可。推荐下载绿色版的，即“可携带版” “Portable”。将下载文件解压后，双击打开 mkvtoolnix-gui.exe 这个可执行文件。打开这个界面之后，左侧选混流器，底部有一个“添加输入文件”按钮，单击它以选择需要处理的mkv文件，在选择了之后，在轨道那一列表中自由勾选需要保存的轨道。下面我们要提取mkv视频中的字幕，所以只勾选需要提取的字幕，其他都不勾选。在输出文件那一行中，输出文件的后缀名会自动变为 .mks，不要更改它，直接点击开始混流即可。这样，你就在与视频同目录下得到了一个 .mks 的字幕文件。接下来我们需要将这个字幕文件转换为 video 标签支持的 webvtt 格式。

非必要步骤：利用 BatchSubtitlesConverter 软件实现 .mks 格式字幕转换为 .vtt 格式的字幕

在h5中，video标签支持 webvtt 格式的字幕，其文件后缀名为 .vtt。利用 BatchSubtitlesConverter 软件，我们可以实现字幕之间的转化。BatchSubtitlesConverter 这款软件真是神器！而且让我一顿好找。其也是免费软件，有条件的可以 Donate 作者一下。在官方网站上下载了文件之后，解压并双击可执行文件，在 Format 那一行选择 WebVTT(*.vtt) 即可。其选项比较多，需要耐心查找，其在选项列表靠后的位置。然后直接转换就好了。这样我们就得到了视频的 vtt 格式字幕，这里我们设为 sample.vtt

必要步骤：利用 FormatFactory 软件实现视频格式的转码

FormatFactory（格式工厂）是一款免费的转码软件，其提供大部分的视频、音频及图片之间的转码操作。我们要做的是在左边选择 -> mp4 ，然后在输出配置里选择 AVC高质量和大小。然后我们就可以开始转码了，转码后的视频是不带字幕的，其配音也是默认配音。FormatFactory 利用开源软件 ffmpeg 实现转码，其几乎会占用 100% 的CPU时间，而不怎么使用GPU加速，对于这点我也是很好奇。转码完成后，我们就得到了转码后的视频文件，这里我们设为 sample.mp4

网页的编写

在网上可以找到很多视频网站的模板，但是大部分都利用了第三方的CSS样式及JavaScript库，这会导致网站的加载速度很慢，更主要的是，偷窃他人服务器的流量不是一个值得提倡的行为。因此在这里，我们自己从零开始编写一个视频播放页面。其代码部分也很简单，几乎没有怎么使用级联样式表，因此其看起来很简陋，但贵在代码少且易懂。

<!DOCTYPE html>
<html>

<head>
    <title>简易的视频网站</title>
    <meta charset="utf-8">
    <style type="text/css">
        body {
            min-width: 1200px;
            max-width: 1200px;
            margin: 0 auto;
            background-color: #FFF;