外链论坛

 找回密码
 立即注册
搜索
查看: 20|回复: 1

HTML5 视频的哪些事儿

[复制链接]

3037

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109078
发表于 2024-10-3 11:04:35 | 显示全部楼层 |阅读模式

作者 | 颜海镜

原文 | http://yanhaijing.com/html/2016/03/12/html5-video/

本文将总结下自己对视频科研的结果,做个记录,同期能方便后来人的学习,触及视频的方方面面。

刚才忽然发掘了自己800年前做的一个视频播放器,才想起来当时好似科研过一点。

01 、视频

其实视频是早于Web而存在的,1990年Web诞生,但早这里之前视频就已然存在了,视频技术这么数年的发展,其历史繁杂性超乎你的想象。同期富文本格式本来便是一件繁杂的事情,更加是让视频变得繁杂无比。

1.1 常用格式

咱们生活场可能遇到过下面这些格式的视频:

➤ rm/rmvb/mkv

➤ avi(Audio Video Interleave)

➤ flv(Flash Video)

➤ mp4(MPEG-4 Part 14)

➤ ogv

➤ webm

1.2 视频构成

倘若拍脑袋想的话,一个完整的视频大概有下面有些部分构成

➤ meta信息

➤ 视频

➤ 音频

➤ 字幕

➤ 缩略图

➤ 其他信息

视屏的构成大概如下图所示:

下面三幅图都是mp4格式,但其视频编码确实区别的。

1.3 三种格式

咱们平时说的mp4到底是什么?其实针对一个视频有三种格式,如下:

➤ 容器格式

➤ 视频编解码器

➤ 音频编解码器

以后再有人问你视频是什么格式的时候,必定要先问问对方问的是那种格式。

容器格式规定了一个视屏文件的视频编码器,音频编码器,字幕,缩略图等信息的格式,常用的视频格式如下,括号中是对应的文件后缀名。

➤ Ogg容器(.ogv)

➤ MPEG4-容器(.mp4)

➤ Webm容器(.webm)

➤ Matroska容器(.mkv)

来讲说视频编解码器,视频编解码器规定了压缩视频和播放视频时运用的算法,常用的视频编码如下:

➤ H.264(AVC Advanced Video Codec)

➤ VP8

➤ Ogg Theora

重视:AVC便是H.264。

音频编解码器和视屏编解码器类似,规定了音频的压缩和播放的算法,常用的音频编码如下:

➤ AAC(Advanced Audio Coding)

➤ MPEG-3

➤ Ogg Vorbis

1.4 视频总结

说了这么多,总结起来便是下面的一张表格,下面列出了常用的视频文件格式和其对应的视频格式。

02 、HTML5 Video

理清了视频的历史,该轮到今天的主角上场了,再来讲说HTML5的Video,HTML5的Video包含如下的一堆内容:

➤ img audio video 富媒介标签

➤ 一堆属性

➤ DOM接口

➤ DOM事件

➤ 向后兼容

➤ 字幕

2.1 embed & flash

起始介绍Video之前先来介绍介绍在之前是怎样在网页中播放视频的,在最起始的时候咱们运用embed标签来嵌入插件的方式来播放的,其会调用系统上的原生播放器,如windows上的 media player,mac上的quick time等。

这般做的缺点便是这块区域完全是黑盒,没法和播放器进行通信,乃至晓得是不是在播放。

运用的方式相对简单,只需下面的一行代码就可,其中src是视屏的路径。

<embed src="media/helloworld.swf" />

因为embed的缺陷,flash来了,感谢flash带来了很棒的体验,并且其装机量能够达到99%,这种做法优点是能够和播放器交互,能定制皮肤等;但缺点显著,需要研发单独的播放器插件(虽然能够用别人研发好的),并且其运用方式略显繁杂,需要依赖第三方插件。

播放flash的代码如下,我想没人能够记得住吧,就想XHTML的doctype同样,囧。

<object id="flowplayer" width="704" height="400" data="media/flowplayer-3.2.16.swf" type="application/x-shockwave-flash">    <param name="movie" value="media/flowplayer-3.2.16.swf" />    <param name="flashvars" value=config={"clip":"media/beach.mp4"} /> </object>

2.2 video标签

video标签的灵感源自于img标签,都是富媒介,既然能用img引入照片那样为么不可用video引入vide呢?于是便有了video标签。

在页面中引入一个视频的代码和引入照片同样简单。

<video src="media/butterfly.mp4" controls>    您的浏览器不支持 video 标签。 </video>

src是视频的路径,controls暗示表示视频播放控件,默认是不表示的。标签之间的文字会出此刻不支持video标签的浏览器中,做为后备内容显现,用来兼容不支持video标签的浏览器。

怎么样是不是很简单,其实video标签还有有些属性能够配置。属性列表能够查看这儿

2.3 Video DOM

video标签对应有Video对象,能够经过js进行操作。Video对象有一组属性和办法同期包含一组事件。

例如能够读取一个视频的时长和当前播放的时间,同期还能设置当前播放的时间,能够在视频暂停的时候添加自定义事件等。

➤ 属性列表

办法列表

➤ 事件列表

2.4 兼容性

浏览器对视频格式的支持各不相同,小一点的浏览器厂商例如firefox和opera不愿支持商场的视频格式(mp4),由于需要支付专利费,而大一点的厂商如微软苹果等,不愿支持开源的格式,由于可能有专利问题。

信息此刻firefox支持mp4了,而opera从12版本后就换成为了webkit内核不存在这个问题了。

下面看一下PC上的浏览器对视频格式的支持状况

再来瞧瞧手机上的兼容状况

2.5 Source

处理兼容性的问题,HTML5给出认识决办法,那便是source标签。

<video controls autoplay>    <source src="media/butterfly.mp4" type="video/mp4">    <source src="media/butterfly.webm" type="video/webm">    <source src="media/butterfly.ogv" type="video/ogg"> </video>

浏览器会最先尝试播放第1个视频,倘若发掘不支持会播放第二个,依次类推直到找到一个能够播放的,所有能播放。。。

重视:浏览器支持video标签,不可播放视频的状况下是不会表示后备方法的,需要和不支持video标签的状况掰开

2.6 字幕

字幕是一个繁杂的问题,简单的一个字幕就可能有下面的需要:格式,换行,颜色,卡拉OK等。因此现存的字幕格式就有50多种。

运用字幕的方式和运用source的方式类似,同期可指定多个字幕文件,用来指代区别语言的字幕,用户能够自己选取想要的字幕。

<video controls loop autoplay>    <source src="media/butterfly.mp4" type="video/mp4">    <source src="media/butterfly.webm" type="video/webm">    <track src="media/butterfly.vtt" srclang="en" kind="subtitles" label="English" default>    <track src="media/butterfly_fr.vtt" srclang="fr" kind="subtitles" label="French"> </video>

vtt格式如下所示,标记了每一个字幕起始显现的时间和消失的时间。

WEBVTT 00:00:01.000 --> 00:00:03.000 Butterflies are lovely. 00:00:04.000 --> 00:00:08.000 Dont you think?

2.7 一套方法

这儿供给一套完整的方法,支持video的浏览器优先运用video,否则退化为运用flash,倘若不支持flash则退化为提示文案。

<video controls width="704" height="400">    <source src="media/beach.mp4" type="video/mp4">    <source src="media/beach.webm" type="video/webm">    <object id="flowplayer" width="704" height="400" data="flowplayer-3.2.16.swf" type="application/x-shockwave-flash">        <param name="movie" value="flowplayer-3.2.16.swf" />        <param name="flashvars" value=config={"clip":"media/beach.mp4"} />        <p>您的浏览器不支持此视频</p>    </object> </video>

当然全部流程其实能够反过来,即优先运用flash。

03、 播放器

非常多时候咱们不可运用video标签的播放控件,可能有种种原由例如自定义皮肤。此时候需要咱们自己写一个播放器。

头脑风暴一下咱们大概需要实现以下功能:

➤ 兼容性

➤ 自定义一套皮肤

各样api

各样信息(事件)

倘若你感兴趣能够自己尝试下,其实自己写一个完整的播放器还是特别有挑战性的,好在社区已然咱们写好了,举荐两个不错的播放器插件。

➤ VideoJS

➤ jwplayer(收费)





上一篇:把握前端新趋势:HTML5 新标签全解析
下一篇:【教程】html+css零基本入门教程(八)
回复

使用道具 举报

2940

主题

3万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979445
发表于 7 天前 | 显示全部楼层
你的见解真是独到,让我受益匪浅。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-20 17:08 , Processed in 0.273970 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.