利用H5搭建一个简易的视频分享网站，或者是家庭影院
前言
现在，越来越多的浏览器支持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库，这会导致网站的加载速度很慢，更主要的是，偷窃他人服务器的流量不是一个值得提倡的行为。因此在这里，我们自己从零开始编写一个视频播放页面。其代码部分也很简单，几乎没有怎么使用级联样式表，因此其看起来很简陋，但贵在代码少且易懂。
<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;
border-style: solid;
border-color: #BBB;
}
.header {
position: relative;
width: 100%; height: 60px;
margin: 0 0 0 0px;
padding: 0 0 0 0px;
background-color: #aff;
}
.content {
position: relative;
width: 100%; height: 400px auto;
margin: 0 0 0 0px;
}
.content .mid-post {
position: relative;
width: 100%;
height: 385px;
}
.content .mp-head {
position: relative;
width: 100%;
height: 60px;
}
.content .mp-head .title {
float: left;
margin-top: 5px;
height: 50px;
width: 100px auto;
font-size: 40px;
}
.content .mp-content {
position: relative;
width: 100%;
height: 325px;
}
.content .mp-content .content-description {
float: left;
position: relative;
margin-top: 12px;
margin-left: 30px;
margin-right: 20px;
width: 350px;
height: 300px;
}
.content .mp-content .content-description .image {
position: absolute;
top: 10px;
left: 10px;
height: 230px;
width: 330px;
}
.content .mp-content .content-description .text {
position: absolute;
top: 245px;
left: 10px;
height: 40px;
width: 330px;
font-size: 24px;
text-align: center;
}
.content .mp-content .content-description video {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.footer {
position: relative;
width: 100%; height: 400px auto;
margin: 0 0 0 0px;
background-color: #999;
}
.footer .bank01 {
position: relative;
text-align: center;
background-color: #999;
}
style>
head>
<body>
<div class="header">
<a href="./index.html">返回主页面a>
<br>
<span class="time">xxxx年xx月xx日 xx:xx:xxspan>
div>
<div class="content">
<div class="mid-post" id="midpost01">
<div class="mp-head">
<div class="title">
制作的视频 >
div>
div>
<div class="mp-content">
<div class="content-description">
<div class="image">
<video style="background: black;" src="sample.mp4" controls>
<track kind="subtitles" src="sample.vtt" label="English" srclang="en" default>
若视频无法播放，则显示这里的文字。Video Not Supported!
video>
div>
<div class="text">
QQSpeed Recording01<br>
赤城红叶
div>
div>
div>
div>
div>
<div class="footer">
<div class="bank01">
<p>Copy Right (c) 2018 All Right Reserved. Maintained By Zhichiang.p>
<p>Contact with email <a href="mailto: [email protected]">[email protected]a>p>
div>
div>
body>
html>其中，以下代码片段很长，但其全部属于级联样式表的一部分，目的只是为了使界面好看一些，可以略去不看，即以下标签的位置处。
<style type="text/css">
......
style>真正重要的，也就是起作用的代码片是：
<video style="background: black;" src="sample.mp4" controls>
<track kind="subtitles" src="sample.vtt" label="English" srclang="en" default>
若视频无法播放，则显示这里的文字。Video Not Supported!
video>对应解释的文字及属性的名字，我相信很容易就能猜出各个部分都是干嘛的。因此，如果要建造自己的网页并嵌入视频的话，上述的 video 标签的一个用例就有一些参考价值。
结语
这篇文章主要叙述了如何使用h5编写一个带字幕的视频播放网页。文章中给出了实例网页的源代码，并给出了 video 标签及 track 标签的用法。除此之外，本文还介绍了几款软件，其都是免费软件但是在处理视频时也十分有用。希望这篇文章能帮助到读者。