VillainHR

流媒体播放基本了解

video audio HTML5.0 2017-01-19

关于流媒体无外乎就两类,一类是video,一类是audio. 说明白一点就是视频和音频. 两者的用法灰常类似.接下来我们具体来看一看吧.

基本用法和格式

视频和音频对应着两个tag: video和audio. 但实际上,他们两者的用法非常相似.我们这里以video为例(因为他比audio复杂)

简单播放视频

找到电脑上随便一个能播放的视频即可.

<video src="impossible.mp4" preload="auto" controls autoplay loop>
  Your browser does not support the <code>video</code> element.
</video>

上面的属性分别代表着:

  • controls: 显示控制器, 当然,你也可以自定义话.这没什么太大的问题
  • autoplay: 文件自动播放. 当文件加载完后,即可自动播放
  • loop: 让文件循环播放
  • preload: 用来缓存大文件的. 因为,将你的文件放到本地慢慢读的话, 有可能会造成, 卡顿的现象.可以取的值为:
    • none: 不缓存
    • auto: 缓存
    • metadata: 只缓存文件元信息
  • poster: 用来设置视频的封面. 不过一般是使用img来进行cover.原生支持的情况有点差。

文件支持problem

因为浏览器本身并不是用来做播放器用的(mdzz, 不然播放器是用来打酱油的?)。 所以,为了解决这个问题, 我们需要提供多个视频,以备浏览器来解析播放.这里,就需要用到source tag.

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.
</video>

浏览器会自上向下进行解析, 解析顺序是:

ogg ok? no
mp4 ok? yes
play

并且,我们还可以针对于指定格式,使用指定的解码器

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=dirac, speex">
  Your browser does not support the <code>video</code> element.
</video>

上面简单的说了一下,如果进行文件的加载和文件类型的设置. 但这仅仅只是皮毛. 或者说, 连毛都算不上. 这里,我们来简单的说明一下, video类型的具体概念.

流媒体格式窥探

首先,市面上流行的几种格式有: WebM,Ogg,mp4,avi,MOV,FLV等. 他们统称为container. 就是用来以合适的格式存放流媒体的二进制数据. 而, 我们使用的h5 的 video 就相当于播放器 并且,里面需要自带一定数量的codec (解码器) 用一个恰当的比喻来说就是:

  • container 相当于 压缩后的文件
  • codec 相当于 解码后可用的文件

那为什么h5的video 只支持部分文件格式呢? because, 上面的格式实际上是不同公司先后造出来了, 由于历史遗留原因, w3c就挑了市面上流行的几种做支持. 有三种主要的文件类型.

  • mp4
  • webm
  • ogg

那avi,mov,flv怎么办呢? 实际上, w3c只是规定video可以用来播放视频, 但并没有限制死,浏览器应该支持哪种格式的视频文件. 比如, avi和mov就是MS 自己搞出来的视频格式. 所以, IE一般都支持者两种. 而, 大部分比如Safari,Chrome,Opera都不支持.对于不同格式内容,详见格式之变.对于FLV,SWF则是flash专有的格式, 为毛我H5需要管你FLASH?

一般, 如果你想在video中插入视频的话, 最好准备 mp4(H264+ACC) 和 webm(VP8) 这两种. ogg(vp3)是webm的前身, 历史原因我们也就不探讨了. 有兴趣的可以参考一下: video历屎H5 video.

当然, 如果你遇到了比较老的browser, 那就得做更多准备

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object type="application/x-shockwave-flash" width="320" height="240">
    <param name="movie" src="movie.swf" />
    <param name="flashvars" value="controlbar=over&amp;image=__POSTER__.JPG&amp;file=__VIDEO__.MP4" />
  你的浏览器不H5播放 //提示代码
  </object>
</video>

接下来,我们来看一下,video的相关操作.

video实操

video 的相关操作,一般就是使用js来进行简单操作

// 获取video节点内容
var v = document.getElementsByTagName("video")[0];
v.play();

节点上,自带的方法:

method effect
load() 表示加载媒体内容
play() 开始播放
pause() 暂停播放

相关事件:

event effect
play 手动调用video.play()时,触发的方法
durationchange 获取到视频的长度
loadstart 开始加载媒体内容的时候触发该事件
loadmetadata 媒体元数据已经加载完成时触发元数据: 音频信息,但不包括媒体的具体内容
canplay 加载了一些内容,可以开始播放时触发的事件
waiting 缓冲的数据不够时,触发waiting事件,播放暂停
playing 但缓冲数据足够的时候,触发playing事件,继续播放

相关属性:

name 可读可写 effect
playbackRate yes 返回播放速度.(0,1)为慢速,>1为快速
currentTime yes 播放进度,单位为s
volume yes 音量,为[0,1]之间的浮点数
muted yes 是否为静音,类型为Boolean
paused read-only 是否处在暂停状态 Boolean
ended read-only 播放是否完成 Boolean
duration read-only 媒体时长, string

上面是一些基本的属性内容和时间,但当一个video从获取到加载,这一阶段, 触发的相关操作是怎样的呢?

video触发时间顺序

具体的,我这里就不重复造轮子了. 参考来至: video 视频讲解

简单说明一下就是, durationchange事件,是针对实际视频内容最先触发的时间. 这里就可以获得关于video的所有相关属性. 更加具体的,请参照w3c video api

上面API,简单了解之后.我们来具体看一看. video的具体操作

快进快退

快进快退,属于基本的操作.

// 快进10s
video.currentTime+=10
// 快退10s
video.currentTime-=10

然后还有一些其他的操作. 比如,静音, 快放等. 看看上面操作属性即可.没什么太大的问题. 下面主要讲解一下,不常见的吧.

设置指定时间播放

这里只要使用seekable来获得指定时间,然后通过currentTime指定播放时间即可.

var video = document.querySelector('video');
video.addEventListener('durationchange',function(e){
	console.log(video.seekable.end(0));
	var seekable = video.seekable,
		start = seekable.start(0),
		end = seekable.end(0),
		half = Math.floor((start+end)/2);
	// 从视频中间部分开始播放
	video.currentTime = half;
	video.play();
},false);

通过seekable提供的start和end来获取相关时间参数, 设置currentTime来设置播放位置. play()方法,就可以触发视频自动播放.

Ps: 如果没有练手的视频的话,可以使用下列命令,下载视频 wget http://media.w3.org/2010/05/sintel/trailer.mp4

设置播放范围

在使用video进行加载播放时,可以在url后面加上#, 指定播放的段落.比如:

http://www.webhek.com/video.ogg#t=10,20
# 指定视频从10秒开始播放,到20秒处结束。
http://www.webhek.com/video.ogg#t=,10.5
# 指定视频从头开始播放到 10.5 秒处。
http://www.webhek.com/video.ogg#t=,02:00:00
# 指定视频播放2小时。
http://www.webhek.com/video.ogg#t=60
# 指定视频从第60秒开始播放,播放到结束。

设置字幕和标题

设置字幕,需要使用到 <track>, 而标题则需要使用到poster属性.看一个demo:

<video controls style="width:640px;height:360px;" poster="poster.png">
  <source src="devstories.webm" 
          type='video/webm;codecs="vp8, vorbis"' />
  <source src="devstories.mp4" 
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
  <track src="devstories-en.vtt" label="English subtitles" 
         kind="subtitles" srclang="en" default></track>
</video>

poster用来指定覆盖video的image. track则是用来设置字幕了. track中的一些属性,这里需要做一些简单的讲解.

  • src: 指定字幕文件
  • label: 相当于给video字幕添加子选项.
  • kind: 是字幕的几种选项之一. 比如: subtitles,captions,descriptions,chapters等. 默认为 subtitles
  • srclang: 设置指定字幕对应的语言. 当为subtitles时,该必须指定.

字幕的格式通常是依照webVTT来的, webvtt格式,通常是以vtt结尾.是一种纯文本格式, 用来存放video相关描述信息,比如subtitles,Captions,Descriptions,Chapters,Metadata. 最主要的还是subtitles和captions.

  • subtitles: 就是字幕,下面简单介绍一下
  • captions: 对字幕的声音进行简单描述. 比如: <v Tom>I am an hero</v>. 就是使用Tom的声音读出, I am an hero.
  • description: 就是针对屏幕阅读器来做的.为了方便读出视频中具体的字幕内容。

具体的格式,放一个demo:

WEBVTT

1
00:00:01.000 --> 00:00:10.000
This is the first line of text, displaying from 1-10 seconds

上面中的1代表一个轨道,当然,你可以设置多个轨道.

WEBVTT

1
00:00:02.000 --> 00:00:10.000
This is the <b>first</b> line of text, <u>displaying from 2-10 seconds</u>

2
00:00:15.000 --> 00:00:20.000
And the second line of text separated over
two lines with a <c.customClass>custom CSS as well</c>.

轨道(cue)的不同,主要体现在,当时间重复时,显示的位置上. 另外,还可以在指定字幕后面设置摆放位置

# 居中显示字幕
00:00:01.000 --> 00:00:10.000 A:middle T:50%

相当于就是设置,字幕中的内容位置. 主要设置方式有4类:D,L,T,A,S

  • D: 设置值为 D:vertical || D:vertical-lr . 用来设置显示字幕内容,是否是纵向排列.vertical-lr,设置纵向从左到右.Ps: 默认字幕播放是横向的.
  • L: 设置值为 L: number || L: num% 设置距顶部的距离.
  • T: 设置值为 T: num% 设置距左边界的横向距离
  • A: 设置值为 A: start | middle | end 用来设置,文本在盒子中对齐位置.
  • S: 设置值为 S: num% 设置字幕盒子的大小.

上面的几个设置值可以相互搭配使用, 并不会造成什么conflict. 更多的设置,详见video webvtt 但,由于字幕设置的效果不是特别好.所以,一般会用一些polyfill 进行兼容. 比如: playr 这个简单的插件.

原文链接: https://www.villianhr.com/2017/01/19/流媒体播放基本了解

更新时间: 2017-01-19