[HTML5] Video 标签播放及控制视频

Video 是 HTML5 中新增的标签，使用 Video 标签可以播放 ogg、mp4
、webm 等格式的视频，Video 标签的引入，减少前端页面对 Flash 动画的依赖。

0x0 预备知识

不同的浏览器支持的视频格式可能不同，以下是摘自 W3School 各个浏览器对三种视频格式的支持情况：

0x1 在 Video 中嵌入视频

    <video src="/movie.mp4" controls="controls">你就用这个浏览器有出息吗？</video>

当页面载入时，会引用 movie.mp4 文件，如果浏览器无法支持 HTML5，则会提示 Video 中的内容。

显然，为适应不同的浏览器，我们也需要准备多种不同的格式的视频，并使用 video 引用它们：

    <video controls="controls"><source src="/movie.mp4" type="video/mp4"><source src="/movie.ogg" type="video/ogg">你就用这个浏览器有出息吗？<video>

0x2 使用 Video 的控制属性

Video 提供多个属性，通过各个属性可以控制相关的功能。例如 controls 为视频提供进度、音量、全屏的控制。尽管属性与值对应，但是我们仍然可以使用 controls 来代替 controls = “controls”。

下面的代码提供自动缓存、静音、及控制条：

    <video autobuffer muted controls><source src="/movie.mp4" type="video/mp4"><source src="/movie.ogg" type="video/ogg">你就用这个浏览器有出息吗？<video>

自动播放并循环：

    <video autoplay loop controls><source src="/movie.mp4" type="video/mp4"><source src="/movie.ogg" type="video/ogg">你就用这个浏览器有出息吗？<video>

0x3 使用 HTML DOM 控制 Video 播放

基本的播放、暂停、静音功能控制：

    <button onclick="play()">播放/暂停</button><button onclick="mute()">静音</button><video id="player" controls><source src="/movie.mp4" type="video/mp4"><source src="/movie.ogg" type="video/ogg">你就用这个浏览器有出息吗？<video> <script>function play() {var player = document.getElementById("player");if(player.play) {player.pause();}else {player.play();}}function mute() {var player = document.getElementById("player");player.muted = player.muted ? false : true;         }</script>

通常在一些视频网站上，会记录用户上次播放视频的进度，当用户再次进入网站的时候，就可以在停下来的地方继续观看。我们可以通过HTML DOM来控制视频播放进度：

    <video id="player" controls><source src="/movie.mp4" type="video/mp4"><source src="/movie.ogg" type="video/ogg">你就用这个浏览器有出息吗？<video> <script>document.getElementById("player").addEventListener("loadedmetadata", function() {this.currentTime = 5;});</script>

通过 JavaScript 调整 Video 的 currentTime 属性来实现进度控制，注意单位为秒而非毫秒。由于 JavaScript 需要获取视频的总时间以便进行调整，所以在控制进度之前，需要等待视频信息加载完成。所以，我们为 Video 对象绑定 loadedmetadata 事件，该事件在视频信息加载完毕时触发。

更多 HTML5 Video 参考：

HTML5 Videos: 10 Things Designer Need To Know
by Jake Rocheleau
http://www.hongkiat.com/blog/html5-videos-things-you-need-to-know

[HTML5] Video 标签播放及控制视频相关推荐

html video标签播放直播视频,HTML5 Video 标签播放及控制视频
Video 是 HTML5 中新增的标签,使用 Video 标签可以播放 ogg.mp4.webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖. 0x0 预备知识不 ...
微信端iphone 使用video标签播放不了视频
Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用. 问题:微信端 ...
video标签播放m3u8格式视频-------html页面
m3u8是苹果公司推出一种视频播放标准,是m3u的一种,不过编码方式是utf-8,是一种文件检索格式,将视频切割成一小段一小段的ts格式的视频文件,然后存在服务器中(现在为了减少I/o访问次数,一般 ...
Video 标签播放 m3u8 格式视频
在不借助流媒体播放器的前提下,直接播放 m3u8 格式的视频文件更多精彩更多技术博客,请移步 IT人才终生实训与职业进阶平台 - 实训在线写在前面的话为什么要播放 m3u8 格式的视频对于一 ...
IPhone微信H5用Video标签播放不了视频
H5用Video标签播放视频视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载把文件服务改成支持断点下载即可断点下载参考(C#) 转载于:https://w ...
HTML5 VIDEO标签播放事件流水
HTML5 的 <video>标签有许多默认的事件,如果我们通过这个播放器加载一段视频文件,从开始加载到播放结束,都经历了哪些事件呢?这些事件的触发顺序如何? [1]HTML5:onpla ...
html5 video标签播放视频流解决方案
项目要求从文件服务器读取音视频文件,以流的方式传给前台,并能够播放视频. 做了一个demo,用html5的video,audio标签实现. 后台实现代码: @GetMapping(value = &q ...
HTML5 video循环播放多个视频
最近在开发中遇到的需求是:微信扫描课件二维码,播放其对应的课件视频设计流程扫描二维码时,将其视频列表存入model中,存入第一条是为了,不在html界面重新获取第一条视频 model.addAtt ...
[Flask]解决Flask用video标签播放不了视频黑屏的问题
文章目录一.原因二.修改步骤总结一.原因播放不了的原因是视频文件没有按照Flask框架要求来进行存放,所以我们要将视频文件存储在static文件夹下才行. 二.修改步骤原先代码: < ...

[HTML5] Video 标签播放及控制视频

[HTML5] Video 标签播放及控制视频相关推荐

最新文章

热门文章