HTML5视频与字幕使用的介绍

在 HTML5 问世之前，如果我们想要在网页上面展示视频音频，经常会使用到的就是 Adobe Flash 这样的插件，很多人可能和我一样遇到过 Flash 插件崩溃的问题，让人相当烦躁，而在 HTML5 中，提供了音频和视频的标准接口使这一局面得到了改观，在这个实验中，我们将为大家介绍如何在网页中播放我们的视频音频文件。同时，我们也会学习 HTML5 对元素的拖放操作。

下面给大家一个在线的音频视频转换网站：http://cn.office-converter.com/

HTML5视频介绍
HTML5 规定了一种通过 video 元素来包含视频的标准方法。

视频格式和浏览器支持如下所示：

格式	浏览器
.ogg	FireFox 3.5+ ，chrome 5.0+ ，Opera 10.5+
.mp4/H.264	Safari 3.0+ ，chrome 5.0+ ，IE 9.0+
.webm	FireFox 4.0+ ，chrome 6.0+ ，Opera10.6+

例子：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title></head><body><video width="320" height="240" controls="controls"><sourcesrc="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg"type="video/ogg"/><sourcesrc="http://labfile.oss.aliyuncs.com/courses/1248/video.mp4"type="video/mp4"/>你的浏览器不支持video元素</video></body>
</html>

注：与之间插入的内容是供不支持 video 元素的浏览器显示的。video 元素允许多个 source 元素，source 元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式。

单个文件引入也可以这样写：

<body><videosrc="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg"width="320"height="240"controls="controls">你的浏览器不支持video元素</video>
</body>

video 标签的属性如下所示：

属性	描述
autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	出现该属性，则向用户显示控件，比如播放按钮。
height	设置视频播放器的高度。
loop	出现该属性，则当媒介文件完成播放后再次开始播放。
muted	规定视频的音频输出应该被静音。
URL	规定视频下载时显示的图像，或者在用户点击播放器按钮前显示的图像。
preload	如果出现该属性，则视频在网页加载时进行加载，并预备播放。如果使用“autoplay”，则忽略该属性。
url	要播放视频的URL。
pixels	设置视频播放器的宽度。

字幕的简单使用
使用常用的 WebVtt 字幕格式，在中使用元素引入字幕。例如：

<tracksrc="http://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt"srclang="zh"kind="subtitles"label="中文"default
/>
<tracksrc="http://labfile.oss.aliyuncs.com/courses/1248/video_en.vtt"srclang="en"kind="subtitles"label="English"
/>

track 元素的属性说明：

元素	描述
src	指定资源 url。
srclang	资源的语言，例如：中文 zh，英文 en。
kind	默认值是 subtitles 字幕，captions 标题、音效及其他音频信息，descriptions 视频的文本描述，chapters 章节导航，metadata 元数据。
lable	选择字幕时候出现的文字。
default	default 指的是默认会显示的字幕。例如两个元素，如果都没有 default 属性，那都不显示，需要用户手动调出。另外，default 只能出现在一个元素上。

例子：

首先我们在终端中分别输入以下命令，获取所需字幕文件：

wget http://labfile.oss.aliyuncs.com/courses/1248/video_ch.vtt
wget http://labfile.oss.aliyuncs.com/courses/1248/video_en.vtt

<body><videosrc="http://labfile.oss.aliyuncs.com/courses/1248/video.ogg"width="320"height="240"controls="controls">你的浏览器不支持video元素<tracksrc="video_ch.vtt"srclang="en"kind="subtitles"label="中文"default/><track src="video_en.vtt" srclang="en" kind="subtitles" label="English" /></video>
</body>

video_ch.vtt 中的内容为：

WEBVTT 00:00:01.000 --> 00:00:04.000 不准在课堂上打游戏 00:00:05.000 -->
00:00:09.000 好好学习，天天向上！

video_en.vtt 中的内容为：

WEBVTT 00:00:01.000 --> 00:00:04.000 Don't play games in class！ 00:00:05.000
--> 00:00:09.000 Study hard and make progress every day！

运行效果如下所示：

通过上面的案例，我们了解了简单的视频制作以及为视频添加字幕和切换字幕。

HTML5视频与字幕使用的介绍相关推荐

html 如何打开字幕,HTML5视频隐藏字幕关闭或开启方法
更新:忽略我以前的答案(在下面的情况下离开那里是涉及逻辑的任何使用)......原来有是显示当字幕轨道改变的事件: function captionStatus() { console.log(&qu ...
HTML5视频字幕与WebVTT
译自:http://html5doctor.com/video-subtitling-and-webvtt/ 转载请标明出处:蒋宇捷的博客(http://blog.csdn.net/hfahe) -- ...
给视频加字幕HTML代码,给Html5视频播放器添加字幕
现在各种支持HTML5的浏览器都能够播放html5视频了,但是对于字幕的支持却很少,我们期待像DVD那样强大的字幕. 往往我们还不得不通过js来做,着实是一件痛苦的事情. 现在IE10率先对HTML5 ...
HTML5视频监控技术预研
原文 https://blog.gmem.cc/research-on-html5-video-surveillance 引言安防类项目中通常都有视频监控方面的需求.视频监控客户端主要是Native ...
html5视频优化,HTML5 视频秒开优化
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 前言本文是我部门的一次分享,张鑫旭老师也整理过相应文字版本我在补充下现在创意 H5 做的堪比电影,传统方式的动画.gi ...
站长之家html视频播放,HTML5视频发展状况
5.自适应流自适应流是在线视频的一个核心组成部分.它能够实现:缓冲控制,流内质量调整,live/dvr以及密码和DRM安全机制.自适应流并不属于 HTML5标准,但是浏览器可以通过从HTML5的&l ...
如何在EDUIS中导出ETL字幕模板_给视频加字幕？这8个工具助力你的短视频创作！...
来源:一周进步 · 安哥拉随着短视频的兴起,不少人转向了视频内容的创作.除去视频内容本身,为了给用户更好的观看体验,有些人会为视频添加字幕,方便用户在不同场景下观看视频.今天的文章,我想为你介绍 8 ...
给视频加字幕HTML代码,一键添加字幕的软件推荐，几分钟学会给短视频加字幕，自媒体人都在用...
很多人觉得给短视频加字幕很辛苦? 今天给大家介绍几款给短视频添加字幕用到的软件. 1.字幕通: 字幕通是一款全新模式的智能视频翻译软件,将繁琐的视频字幕翻译制作工作最大程度的便捷化,成功实现从切分时间 ...
android手机拍摄视频格式,怎么用手机给自己拍摄的视频加上字幕？安卓手机视频编辑器给视频加字幕的方法...
狸窝是帮助用户解决问题提供教程解决方案在这个过程中有使用我们自己开发的软件也有网上找的工具只要帮助用户解决问题就好!同意即往下继续了解下载 ... 我们知道,平时看电影或者是电视的时候,都会有 ...

HTML5视频与字幕使用的介绍

HTML5视频与字幕使用的介绍相关推荐

最新文章

热门文章