HTML系列之多媒体视频标签 video

Posted 老__L

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML系列之多媒体视频标签 video相关的知识，希望对你有一定的参考价值。

文章の目录

1、video 是什么了

<video> 元素用于在 html 或者 XHTML 文档中嵌入媒体播放器，用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容，但是 <audio> 元素可能在用户体验上更合适。

2、video的相关属性

2.1、autoplay

布尔属性；指定后，视频会马上自动开始播放，不会停下来等着数据载入结束。

2.2、buffered

这个属性可以读取到哪段时间范围内的媒体被缓存了。该属性包含了一个 TimeRanges 对象。

2.3、controls

加上这个属性，Gecko 会提供用户控制，允许用户控制视频的播放，包括音量，跨帧，暂停/恢复播放。

2.4、loop

布尔属性；指定后，会在视频结尾的地方，自动返回视频开始的地方。

2.5、muted

布尔属性，指明了视频里的音频的默认设置。设置后，音频会初始化为静音。默认值是false，意味着视频播放的时候音频也会播放 。

2.6、height

视频展示区域的高度，单位是CSS像素。

2.7、width

视频显示区域的宽度，单位是CSS像素。

2.8、preload

该枚举属性旨在告诉浏览器作者认为达到最佳的用户体验的方式是什么。可能是下列值之一：

  • none

提示作者认为用户不需要查看该视频，服务器也想要最小化访问流量；换句话说就是提示浏览器该视频不需要缓存。

  • metadata

提示尽管作者认为用户不需要查看该视频，不过抓取元数据（比如：长度）还是很合理的。

  • auto

用户需要这个视频优先加载；换句话说就是提示：如果需要的话，可以下载整个视频，即使用户并不一定会用它。

  • 空字符串

也就代指 auto 值。

注意：

autoplay 属性优先于 preload 假如用户想自动播放视频，那么很明显浏览器需要下载视频。同时设置 autoplay 和 preload 属性在规范里是允许的。

规范没有强制浏览器去遵循该属性的值；这仅仅只是个提示。

假如不设置，默认值就是浏览器定义的了 （即，不同浏览器会选择自己的默认值），即使规范建议设置为 metadata。

2.9、src

要嵌到页面的视频的 URL。可选；你也可以使用 video 块内的 <source> 元素来指定需要嵌到页面的视频。

2.10、poster

一个海报帧的 URL，用于在用户播放或者跳帧之前展示。如果属性未指定，那么在第一帧可用之前什么都不会展示；之后第一帧就像海报帧一样展示。

2.11、controlslist

当浏览器显示自己的控件集(例如，当指定了 Controls 属性时)，Controlslist 属性将帮助浏览器选择在媒体元素上显示的控件。

允许接受的 value 有 nodownload，nofullscreen 和 noremoteplayback

2.12、crossorigin

该枚举属性指明抓取相关图片是否必须用到 CORS（跨域资源共享）。 支持CORS的资源可在 <canvas> 元素中被重用，而不会被污染。允许的值如下：

  • anonymous

跨域请求（即，使用 Origin: 的HTTP头）会被执行。但是不发送凭证（即，不发送cookie， X.509 证书或者 HTTP Basic 授权）。如果服务器不提供证书给源站点 (不设置 Access-Control-Allow-Origin: HTTP头)，图片会被污染，并且它的使用会受限。

  • use-credentials

跨域请求A cross-origin request (i.e. with Origin: HTTP header) 会被执行，且凭证会被发送 (即， 发送一个 cookie，一个证书和 HTTP Basic 授权会被执行)。如果服务器不提供证书给源站点 (通过Access-Control-Allow-Credentials: HTTP 头)，图像会被污染且它的使用会受限。

不加这个属性时，抓取资源不会走 CORS 请求(即，不会发送 Origin: HTTP 头)，保证其在 <canvas> 元素中使用时不会被污染。如果指定非法值，会被当作指定了枚举关键字 anonymous 一样使用。

2.13、currentTime

读取CurentTime返回一个双精度浮点值，指示以秒为单位的媒体的当前播放位置。如果video尚未开始播放，则会在开始播放后返回偏移量。通过CurentTime将当前播放位置设置为给定时间，会在加载媒体时将媒体查找到该位置（从指定的位置开始播放）。

媒体正在播放的情况下，如果媒体缓冲区的数据已经过期（视频已经播放完），则 user agent 有可能无法正常拿到数据。有些媒体可能有一个不以0秒开始的媒体时间线（不是从头开始播放的），因此应该将currentTime的时间设置在其数据失效之前。getStartDate() 这个方法可以用来确定媒体时间线起始的坐标。

2.14、disablePictureInPicture

防止浏览器建议图片中的上下文菜单或在某些情况下自动请求图片中的图片。该属性可以禁用 video 元素的画中画特性，右键菜单中的“画中画”选项会被禁用

2.15、disableRemotePlayback

一个布尔属性，用于禁用使用有线连接的设备(HDMI、DVI等)的远程播放功能。无线技术(Miracast、Chromecast、DLNA、AirPlay等)。

2.16、duration 只读

一个双精度浮点值，它指示媒体的持续时间(总长度)，以秒为单位，在媒体的时间线上。如果元素上没有媒体，或者媒体无效，则返回的值为NaN。如果媒体没有已知终点(例如时间未知的实时流、网络广播、来自WebRTC的媒体等等)，那么这个值就是Infinity。

2.17、intrinsicsize

这个属性告诉浏览器忽略图像的实际内在大小，并假装它是属性中指定的大小。具体来说，图像将在这些维度上展开，图像上的 naturalWidth/naturalHeight 将返回此属性中指定的值。

2.18、playsinline

一个布尔属性，标志视频将被“inline”播放，即在元素的播放区域内。请注意，没有此属性并不意味着视频始终是全屏播放的。

2.19、played

一个 TimeRanges 对象，指明了视频已经播放的所有范围。

3、示例

  <video controls width="250">
    <source src="/media/cc0-videos/flower.webm" type="video/webm">
    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">
    Sorry, your browser doesn't support embedded videos.
  </video>

4、注意点

  • 在 <video></video> 标签中间的内容，是针对浏览器不支持此元素时候的降级处理；
  • 开始标签和结束标签都必须有；
  • 谷歌浏览器把视频标签的自动播放禁止了；

5、video支持的类型

6、字幕track

<track> 元素被当作媒体元素 <audio> 和 <video> 的子元素来使用。它允许指定时序文本字幕（或者基于时间的数据），例如自动处理字幕。字幕格式有 WebVTT 格式（.vtt格式文件）— Web 视频文本字幕格式，以及指时序文本标记语言（TTML）格式。

6.1、属性

该元素包含全局属性。

6.1.1、default

该属性定义了该 track 应该启用，除非用户首选项指定了更合适一个track。每个媒体元素里面只有一个 track 元素可以有这个属性。

6.1.2、kind

定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 subtitles。下面是允许的关键字：

  • subtitles

字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。
字幕可能包含额外的内容，通常有附加的背景信息。比如在电影星球大战开头的文字，或者某个场景的日期，时间，还有地点。

  • captions

隐藏式字幕提供了音频的转录甚至是翻译。
可能包含重要的非言语的信息，比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music，text，character)。
适用于耳聋的用户或者当调成静音的时候。

  • descriptions

视频内容的文本描述。
适用于失明用户或者当视频不可见的场景。

  • chapters

章节标题用于用户浏览媒体资源的时候。

  • metadata

脚本使用的track。对用户不可见。

6.1.3、label

当列出可用的 text tracks 时，给浏览器使用的 text track 的标题，这种标题是用户可读的。

6.1.4、src

track的地址。必须是合法的URL。该属性必须定义。

6.1.5、srclang

track 文本数据的语言。它必须是合法的 BCP 47 语言标签。如果 kind 属性被设为 subtitles，那么 srclang 必须定义。

6.2、示例

  <video controls poster="/images/sample.gif">
    <source src="sample.mp4" type="video/mp4">
    <source src="sample.ogv" type="video/ogv">
    <track kind="captions" src="sampleCaptions.vtt" srclang="en">
    <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
    <track kind="chapters" src="sampleChapters.vtt" srclang="en">
    <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
    <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
    <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
    <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
    <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1">
    <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2">
    <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3">
 </video>

6.3、使用track需要注意的点

  • 一个 media 元素的任意两个 track 子元素不能有相同的 kind，srclang 和 label 属性；
  • 它是一个空元素；
  • 开始标签必须存在，结束标签可以省略；

写在最后

如果你感觉文章不咋地//(ㄒoㄒ)//，就在评论处留言，作者继续改进；o_O???
如果你觉得该文章有一点点用处，可以给作者点个赞；\\\\*^o^*//
如果你想要和作者一起进步，可以微信扫描二维码，关注前端老L；~~~///(^v^)\\\\\\~~~
谢谢各位读者们啦(^_^)∠※！！！

HTML5无插件多媒体Media——音频audio与视频video

tip：有问题或者需要大厂内推的+我脉脉哦：丛培森 ٩( ‘ω’ )و

【本文源址：http://blog.csdn.net/q1056843325/article/details/60336226 转载请添加该地址】

音频与视频现在已经变得越来越流行
各个网站为了保证跨浏览器的兼容性
仍然选择使用flash


（源码截自优酷）

#多媒体标签
##使用
HTML5增加了audio与video两个多媒体标签
兼容性还不错，低版本IE不支持
可以使我们不需要使用任何浏览器插件就能够插入音频与视频控件
而且非常的简单


（源码截自Bilibili）

元素用法如下:

<audio src="media/xi-Halcyon.mp3" id="demoAudio">不支持H5-audio</audio>
<video src="media/Animation.mp4" id="demoVideo">不支持H5-video</video>

标签中内容如果浏览器不支持该标签就会显示
当然使用这两个元素的时候
最起码要添加src属性，属性值就是资源的url

但是每个浏览器由于版权问题支持的媒体格式也不同
所以就可以使用下面的方式

<audio id="demoAudio">
	<source src="media/xi-Halcyon.mp3">
	<source src="media/xi-Halcyon.ogg">
	...
	不支持H5-audio
</audio>

<video id="demoVideo">
	<source src="media/Animation.mp4">
	<source src="media/Animation.webm">
	...
	不支持H5-video
</video>

这样指定不同的资源格式
也保证了各个浏览器的兼容性
##属性
audio和video标签除了src外
还有一些公有的属性

|属性|描述
|-
|autoplay|设置该属性后，音/视频资源就绪后立即播放
|controls|设置该属性后，则显示浏览器播放控制控件
|loop|设置该属性后，则音/视频结束后重新循环开始播放
|preload|设置该属性后，则音/视频在页面加载时进行加载，并预备播放（使用autoplay会忽略该属性）


前三个属性属性名与属性值相同，直接添加属性名即可 preload有如下属性值
  • none 不加载数据
  • metedata 仅加载元数据（时长、比特率、帧大小等）
  • auto 浏览器加载它认为适量的媒体内容

比如想要在浏览器添加一段音乐
并且加载后立即播放，循环播放
使用浏览器的播放控件

<audio src="media/xi-Halcyon.mp3" id="demoVideo" autoplay controls loop></audio>

控件的样式各个浏览器都不一样
随着浏览器版本的更新，可能还会更新样式

video元素还有独有的属性poster
属性值是图片资源的url
用来设置视频播放前的一张占位图片

<video src="media/Animation.mp4" id="demoVideo" width="500" height="400" poster="images/preimg.jpg" controls></video>

点击播放后，视频正常播放

#脚本化音视频
##元素
使用js获取dom节点就很简单了

var a = document.getElementById('demoAudio');
var v = document.getElementById('demoVideo');

类似于image的Image构造函数
Audio也可以通过类似的方式创建（Video不可以）
区别在于Image创建的图片是要插入文档的
但是Audio不需要

var a = new Audio('song.mp3');

然后可以为它添加autoplay、loop等属性
然后添加到页面

##接口
在获取的DOM节点上可以使用浏览器提供的接口属性和方法
常用的属性、方法如下

  • currentSrc 媒体数据的URL地址
  • volume 播放音量
    • 介于0~1（注意超范围会报错），默认1最大音量
  • muted 是否静音
    • 设置true进入静音模式
  • playbackRate 媒体播放速度
    • 默认1.0常速，>1快进，<1慢放（负值表回放但无浏览器实现此功能）
  • defaultPlaybackRate 媒体默认的播放速度
  • currentTime 当前播放时间（单位s）
  • duration 媒体时长（单位s）
  • play() 播放音/视频
  • pause() 暂停音/视频
  • load() 重新加载音/视频（通常用于修改元素属性后）

除此之外还有

  • played 已经播放的时间段
  • buffered 已经缓冲的时间段
  • seekable 用户可以跳转的时间段

它们都是TimeRanges对象
每个对象都有一个length属性（表示当前时间段）
以及start()和end()方法（返回当前时间段的起始时间点和结束时间点，单位s）
start()和end()都有一个数字参数，表示第一个时间段
确定当前缓存内容百分比：

var percentLoaded = Math.floor(song.buffered.end(0)/song.duration*100)

下面三个布尔属性表示媒体播放器的状态

  • paused 是否暂停
  • seeking 是否正调到一个新的播放点
  • ended 是否播放结束并停止

并不是所有浏览器都支持video和audio的所有编解码器
canPlayType()方法就是用来鉴定时候支持某一格式的媒体资源
返回字符串maybe、probably或空字符串
如果只传入MIME类型，则返回maybe
如果同时传入MIME类型和编解码器，则返回probably（可能性增加了）
只是因为媒体文件只不过是音/视频的容器
真正决定文件能否播放的还得是编码格式

console.log(a.canPlayType('audio/mp4')); //maybe
console.log(a.canPlayType('audio/mp4;codecs="mp4a.40.2"')); //probably

下面的状态位属性也了解一下

  • readyState 就绪状态
    • 0 = HAVE_NOTHING - 没有关于音/视频是否就绪的信息
    • 1 = HAVE_METADATA - 关于音频/视频就绪的元数据
    • 2 = HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/ms
    • 3 = HAVE_FUTURE_DATA - 当前及至少下一帧的数据可用
    • 4 = HAVE_ENOUGH_DATA - 可用数据足以开始播放
  • netWorkState 网络状态
    • 0 = NETWORK_EMPTY - 音/视频尚未初始化
    • 1 = NETWORK_IDLE - 音/视频是活动的且已选取资源，但并未使用网络
    • 2 = NETWORK_LOADING - 浏览器正在下载数据
    • 3 = NETWORK_NO_SOURCE - 未找到音/视频来源
  • error.code 错误状态
    • 1 = MEDIA_ERR_ABORTED - 取回过程被用户中止
    • 2 = MEDIA_ERR_NETWORK - 当下载时发生错误
    • 3 = MEDIA_ERR_DECODE - 当解码时发生错误
    • 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频

#事件
除了接口属性方法以外
还有必不可少的事件模型
如果我们不想使用浏览器的控件而是定义自己的播放控制组件
就要使用这套事件了

  • play 播放时触发
  • pause 暂停时触发
  • loadedmetadata 浏览器获取完媒体元数据时触发
  • loadeddata 浏览器加载完当前帧媒体数据时触发
  • ended 播放结束后停止时触发

初次之外还有很多事件
很多不常用
在w3c截了一张图

通过接口与事件
也可以简单的实现自己简陋的音乐播放器

<button id="btn">播放</button>
<span id="cur">0s</span>/<span id="dur">0s</span><br>
音量：<input type="range" id="vol">

var audio = new Audio('media/xi-Halcyon.mp3');
var btn = document.getElementById('btn');
var vol = document.getElementById('vol');
var cur = document.getElementById('cur');
var dur = document.getElementById('dur');
var state = 'pause';

vol.value = 100;
audio.onloadeddata = function()
  dur.textContent = Math.floor(audio.duration) + 's';


setInterval(function()
  cur.textContent = Math.floor(audio.currentTime) + 's';
, 200);

btn.onclick = function()
  if(state === 'play')
    state = 'pause';
    btn.textContent = '播放';
    audio.pause();
  else
    state = 'play';
    btn.textContent = '暂停';
    audio.play();
  



vol.oninput = function()
  audio.volume = vol.value/100;

主页传送门

以上是关于HTML系列之多媒体视频标签 video的主要内容，如果未能解决你的问题，请参考以下文章

前端小功能：video视频播放

HTML5里video标签支持哪些格式的视频文件？

多媒体标签

HTML系列：多媒体

07-多媒体标签

mp4的视频打开可以播放在页面上无法打开