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

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

前言

现在,越来越多的浏览器支持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;
       
  • 1
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 为了搭建一个React语言的h5项目框架,您需要以下步骤: 1. 安装 Node.js 和 npm:Node.js 是 JavaScript 的运行环境,npm 是 JavaScript 包管理器。 2. 创建一个文件夹,作为您的项目的根目录。 3. 在命令行中,进入您的项目目录,然后使用以下命令初始化项目: ``` npm init -y ``` 4. 安装 React,并作为项目的依赖项: ``` npm install react react-dom --save ``` 5. 创建一个名为 "src" 的文件夹,用于存储您的 React 组件。 6. 创建一个名为 "index.js" 的文件,用于导出您的项目的入口组件。 7. 创建一个 HTML 文件,用于渲染您的 React 组件。 8. 在命令行中,运行以下命令以启动项目: ``` npm start ``` 现在您的 React h5 项目框架已经创建好了!您可以开始编写 React 组件并逐步完善您的项目。 ### 回答2: 要搭建一个React语言的H5项目框架,我们需要遵循以下步骤: 第一步,安装Node.js。在官网上下载并安装Node.js,它提供了NPM(Node Package Manager)管理工具,用于安装和管理第三方模块。 第二步,创建项目文件夹。在合适的位置创建一个文件夹,作为项目的根目录。 第三步,初始化项目。在命令行中进入项目根目录,执行命令 "npm init",按照提示填写项目的基本信息,例如名称、版本号等。这将会在项目根目录创建一个package.json文件,用于记录项目的依赖和配置信息。 第四步,安装React和相关依赖。在命令行中执行命令 "npm install react react-dom",这将会安装React和React DOM模块作为我们项目的依赖。 第五步,配置Babel。在命令行中执行命令 "npm install babel-loader @babel/core @babel/preset-react",这将会安装Babel及其相关模块,用于将React语法转换为浏览器可以理解的代码。 第六步,创建并配置Webpack。在命令行中执行命令 "npm install webpack webpack-cli webpack-dev-server html-webpack-plugin",这将安装Webpack和相关模块,用于打包和开发服务器。 第七步,创建并配置基本文件。在项目根目录下创建一个src文件夹,用于存放React组件和相关资源文件。创建一个index.js文件作为入口文件,引入React和ReactDOM模块,并渲染一个根组件。创建一个index.html文件,用于作为项目的入口页面。 第八步,配置Webpack。在项目根目录下创建一个webpack.config.js文件,配置Webpack的入口、输出、加载器等信息。 第九步,启动项目。在命令行中执行命令 "npm run start",这将会启动Webpack Dev Server,打开浏览器并访问 http://localhost:8080,就可以看到React H5项目的效果了。 以上就是简单搭建一个React语言的H5项目框架的步骤。当然,这只是一个最基本的框架,具体的配置还可以根据项目需求进行进一步调整和扩展。 ### 回答3: 搭建一个基于React语言的H5项目框架可以参考以下步骤: 1. 环境搭建:首先确保你的电脑已经安装了Node.js和npm包管理工具。可以通过在终端运行命令`node -v`和`npm -v`来检查是否安装成功。 2. 创建项目目录:在适当的位置创建一个空的项目文件夹,并进入该文件夹。 3. 初始化项目:在终端运行命令`npm init`来初始化一个新的npm项目。按照提示完成项目的相关配置,例如项目名称、版本号、作者等。 4. 安装React相关依赖:运行命令`npm install --save react react-dom`来安装React及其DOM渲染的依赖。 5. 安装开发工具:运行命令`npm install --save-dev webpack webpack-cli webpack-dev-server`来安装Webpack及其相关开发工具。 6. 创建配置文件:在项目根目录下创建一个`webpack.config.js`文件,并配置Webpack的基本设置。例如设置入口文件、输出文件、解析规则等。 7. 创建React组件:在项目目录下创建一个`src`文件夹,并在其中创建一个`App.js`文件作为项目的根组件。编写React代码,可以使用函数组件或类组件来定义你的页面结构。 8. 创建入口文件:在`src`文件夹下创建一个`index.js`文件作为React应用的入口文件。在该文件中导入根组件并使用`ReactDOM.render()`方法将其渲染到页面中。 9. 配置启动命令:在`package.json`文件中的`scripts`属性中新增一个`start`命令,设置为`"webpack-dev-server --open"`。这将启动Webpack的开发服务器,并自动打开项目页面。 10. 启动项目:在终端运行命令`npm start`来启动项目,你将在浏览器中看到React组件渲染的页面。 这是一个简单的React语言的H5项目框架搭建流程。根据项目的需求和复杂性,你可能还需要进行更多的配置和安装依赖来完善项目。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值