整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
多站点都会使用到视频. HTML5 提供了展示视频的标准。
检测您的浏览器是否支持 HTML5 视频：
检测
Web站点上的视频
直到现在，仍然不存在一项旨在网页上显示视频的标准。
今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。
HTML5 规定了一种通过 video 元素来包含视频的标准方法。
浏览器支持
Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持 <video> 元素.
注意: Internet Explorer 8 或者更早的IE版本不支持 <video> 元素。
HTML5 (视频)- 如何工作
如需在 HTML5 中显示视频，您所有需要的是：
实例
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
您的浏览器不支持Video标签。
</video>
<video> 元素提供了 播放、暂停和音量控件来控制视频。
同时<video> 元素元素也提供了 width 和 height 属性控制视频的尺寸.如果设置的高度和宽度，所需的视频空间会在页面加载时保留。。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
<video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
<video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：
视频格式与浏览器的支持
当前， <video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:
| 浏览器 | MP4 | WebM | Ogg |
|---|---|---|---|
| Internet Explorer | YES | NO | NO |
| Chrome | YES | YES | YES |
| Firefox | YES | YES | YES |
| Safari | YES | NO | NO |
| Opera | YES (从 Opera 25 起) | YES | YES |
MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
视频格式
| 格式 | MIME-type |
|---|---|
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
HTML5 <video> - 使用 DOM 进行控制
HTML5 <video> 和 <audio> 元素同样拥有方法、属性和事件。
<video> 和 <audio>元素的方法、属性和事件可以使用JavaScript进行控制.
其中的方法有用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。其中的 DOM 事件能够通知您，比方说，<video> 元素开始播放、已暂停，已停止，等等。
例中简单的方法，向我们演示了如何使用 <video> 元素，读取并设置属性，以及如何调用方法。
实例 1
为视频创建简单的播放/暂停以及调整尺寸控件：
播放/暂停 放大 缩小 普通
上面的例子调用了两个方法：play() 和 pause()。它同时使用了两个属性：paused 和 width。
HTML5 Video 标签
| 标签 | 描述 |
|---|---|
| <video> | 定义一个视频 |
| <source> | 定义多种媒体资源,比如 <video> 和<audio> |
| <track> | 定义在媒体播放器文本轨迹 |
图网长期致力于web前端开发，难免会和各种视频、音频打交道，除了常见的mp4、mp3等格式，其实还有m3u8、oga等等其他没有那么常见的格式，那么你都了解了吗？下面介绍一下html5常见的音视频格式和解决方案。
万能播放插件js
1.ckplayerhttp://www.ckplayer.com/
2.Sewise Player
一款专业的免费网页HTML5视频、流播放器，它功能强大，体积小，跨平台，兼容性好，使用方便简洁。确定html5与flash播放的优先级。支持跨终端播放，不仅适用PC端播放，也适配ipad、iphone、android手机、平板电脑等移动终端。 支持多系统多平台，PC端支持Window、MacOS、Linux 等，移动端支持Android、IOS、Window Phone等。 兼容HTML5，确保98％的互联网用户可以看到您的视频。 支持多浏览器兼容，IE6/7/8/9/10、Chrome、Firefox、Safari、Opera等。 接收来自任何地方的音视频流 支持mp4、m3u8、oga、webm、theora、flv、f4v等视频格式播放。 支持Flash播放m3u8文件，以及AES-128解码播放。 支持播放地址AMF, AJAX, JOSNP类型请求。 支持PC与Mobile平台播放器自动识别功能。 支持浏览器HTML5与Flash特性检测。
3.hls
http://www.bootcdn.cn/hls.js/
仅支持hls(m3u8)地址，不支持flv,mp4,mov,f4v,3gp格式，做了跨平台的适配， 支持PC终端,Android安卓终端,iOS苹果终端,WP终端的正常播放。
m3u8是m3u的一种，是utf-8格式的，Apple 为了提高流播效率开发的技术，特点是将流媒体切分为若干 TS 片段（比如每10秒一段），然后通过一个扩展的 m3u 列表文件将这些 TS 片段集中起来供客户端播放器接收。可以做多码率的适配，根据网络带宽，客户端会自动选择一个适合自己码率的文件进行播放，保证视频流的流畅。
MP4是一套用于音频、视频信息的压缩编码标准，支持所有音频和视频以及高级内容（或它们的混合），编码格式：H.264格式高清
MP4是遵循MPEG-4（ISO 14496-14）的官方容器格式定义的广义文件扩展名。它可以流媒体化并支持众多多媒体的内容（多音轨(multiple audio)、视频流(video)、字幕(subtitlestreams)、图片(pictures)、可变桢率(variable-framerates)、码率(bitrates)、采样率(samplerates)等）和高级内容(advanced content)（官方称之为“Richmedia”(超媒体)或“BIFS”(Binary Format for Scenes/二进制格式场景），类似2D和3D图形，动画、用户界面、类DVD菜单，上述这些AVI搞不定的东西。
其他相关的扩展名：
– .m4v：是.mp4文件的错误扩展名，由apple提出，支持视频+音频，m4v扩展名可以安全地更名为.mp4
– .m4a：是.mp4文件的错误扩展名，由apple提出，只支持音频，m4a扩展名可以安全地更名为.mp4
– .m4p：随iTunes发售的DRM(Digital Rights Management/数字版权保护技术)产权保护的文件，使用Apple开发的DRM sheme
– .m4e：由.sdp修改扩展名的来的文件，Envivio用其于流媒体播放。
– .m4v, -.mp4v, -.cmp, -.divx, .-xvid, .264：raw的mpeg-4视频流（并非内含于mp4）。
– .3gp, -.3g2：手机中使用的格式，其中储存的内容同样在.mp4未被定义（H.263, AMR(Adaptive Multi Rate/自适应多码率)）。
OGG OGGVobis(oggVorbis)是一种音频压缩格式，类似于MP3等的音乐格式。Ogg是完全免费、开放和没有专利限制的。OggVorbis文件的扩展名是”.ogg”。Ogg文件格式可以不断地进行大小和音质的改良，而不影响旧有的编码器或播放器。
OGV是html5中的一个名为Ogg Theora的视频格式，起源于ogg容器格式。
webm由Google提出，是一个开放、免费的媒体文件格式。WebM标准的网络视频更加偏向于开源并且是基于HTML5标准的，WebM 项目旨在为对每个人都开放的网络开发高质量、开放的视频格式，其重点是解决视频服务这一核心的网络用户体验。
MOV(QuickTime)它是Apple公司开发的一种音频、视频文件格式，用于存储常用数字媒体类型。QuickTime用于保存音频和视频信息，包括Apple Mac OS，MicrosoftWindows95/98/NT/2003/XP/VISTA，甚至WINDOWS7在内的所有主流电脑平台支持。
WMV 是微软推出的一种采用独立编码方式并且可以直接在网上实时观看视频节目的文件压缩格式。WMV格式的主要优点包括：本地或网络回放、可扩充的媒体类型、部件下载、可伸缩的媒体类型、流的优先级化、多语言支持、环境独立性、丰富的流间关系以及扩展性等。
MPG/MPEG(.mpg, .mpeg)
Realmedia(.rm, .rmvb)
AVI(.avi)
Flv/swf
本文由专业的WEB前端外包公司-切图网原创，转载请保留版权（ WEB前端开发外包www.qietu.com ）切图网始于2007年，提供高品质的前端开发服务、前端外包、切图外包。欢迎来电咨询！
TML5中的video标签用于播放视频文件的，在video标签中我们可以设置窗口的宽高，视频的自动播放，循环播放以及视频的封面图片等等
HTML5是下一代HTML，新增了许多新的标签，这些标签实现了许多新的功能。并且还减少了对外部插件的要求同时也可以更好的处理错误。比如HTML5中的video标签就可以很好的实现了在页面上播放视频的效果。接下来在文章中将为大家具体介绍如何使用video标签，具有一定的参考作用，希望对大家有所帮助
【推荐课程：HTML5教程】
HTML5 video标签的详细用法
用于播放视频文件，比如电影或其它视频流。可以在开始标签和结束标签之间放置文本内容，这样做的好处是一些低版本的浏览器就可以显示出不支持该标签的信息
例：
<video src="movie01.mp4" controls></video>
定义宽高
我们可以给这个视频自定义宽高来改变它的窗口大小
<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>
效果图：
自动播放
我们可以通过设置属性来让视频是否开启自动播放
（1）使用autoplay属性可以让浏览器加载完后视频文件后立即播放
<video width="400" height="300" controls autoplay>
<source src="movie01.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
我们还可以在自动播放时设置muted状态，这样做的目的是当视频自动播放时会静音，而且我们还可以通过点击播放器的扬声器来开启声音
<video width="400" height="300" controls autoplay muted>
<source src="movie01.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
效果图：
循环播放
我们可以使用loop属性让视频播放结束时，再从头开始循环播放。代码如下所示
<video width="400" height="300" controls loop>
<source src="movie01.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
预加载媒体文件
设置preload属性中的不同属性值，来告诉浏览器应该怎样加载一个媒体文件：
auto：表示让浏览器自动下载整个文件
none：表示让浏览器不必预先下载文件
metadata：表示让浏览器先获取视频文件开头的数据块，从而足以确定一些基本信息（比如视频的总时长，第一帧图像等）
<video width="400" height="300" controls preload="auto">
<source src="movie01.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
设置视频的封面图片
通过poster属性可以设置视频的封面图片，浏览器在下面三种情况下会使用这个图片：
（1）视频第一帧未加载完毕
（2）把preload属性设置为none
（3）没有找到指定的视频文件
<video width="400" height="300" controls preload="none" poster="images/5.jpg">
<source src="movie01.mp4" type="video/mp4">
您的浏览器不支持 video 标签。
</video>
效果图：
总结：以上就是本篇文章的全部内容了，希望通过这篇文章可以帮助大家学会去使用video标签。
以上就是HTML5中video标签如何使用的详细内容，更多请关注其它相关文章！
更多技巧请《转发 + 关注》哦！
*请认真填写需求信息，我们会在24小时内与您取得联系。
