html video标签播放直播视频,HTML5 Video 标签播放及控制视频

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

0x0 预备知识

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

浏览器对视频格式的支持

0x1 在 Video 中嵌入视频

你就用这个浏览器有出息吗？

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

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

你就用这个浏览器有出息吗？

0x2 使用 Video 的控制属性

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

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

你就用这个浏览器有出息吗？

自动播放并循环：

你就用这个浏览器有出息吗？

0x3 使用 HTML DOM 控制 Video 播放

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

播放/暂停

静音

你就用这个浏览器有出息吗？

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;

}

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

你就用这个浏览器有出息吗？

document.getElementById("player").addEventListener(

"loadedmetadata",

function() {

this.currentTime =5;

});

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

【编辑推荐】

【责任编辑：chenqingxiang TEL：(010)68476606】

html video标签播放直播视频,HTML5 Video 标签播放及控制视频相关推荐

html选择本地文件视频并播放器,使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file)...
使HTML5视频播放器播放不同的文件(Make a HTML5 video player play a different file) 在播放视频时,我无法让HTML5播放器播放不同的视频,我尝试更改 ...
html5 video 停止播放视频,html5 video怎么停止播放视频
html5 video停止播放视频的方法:首先使用"document.getElementById("id值")"获取到video对象:然后使用"vi ...
android webview video标签,Android WebView支持html5 video标签
看到这个标题很兴奋了吧,但是内容肯定会让你失望...这先告诉结果了,我没在2.3上搞出什么名堂来. 起因是项目需要在android 2.3.*的版本上调用有video标签的页面,调研是否支持.百度,g ...
html5音乐播放时间监测,html5 video如何实现实时监测当前播放时间（代码）
这篇文章给大家介绍的内容是关于html5 video如何实现实时监测当前播放时间(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. html:Your browser does ...
Video标签事件与属性 HTML5 Video Events and API
属性描述 audioTracks 返回可用的音轨列表(MultipleTrackList对象) autoplay 媒体加载后自动播放 buffered 返回缓冲部件的时间范围(TimeRanges对 ...
html制作在线视频音乐播放器,用html5制作音乐播放器，这3款就足够了！
用HTML5结合Jquery做一个简易版的音乐播放器代码展示: 三生草 var sum = 1; function ssss(a) { var s = document.getElementById ...
html5哪个标签首字母大写,HTML5中标签和常用规则有哪些？html5标签以及规则的介绍...
这篇文章给大家介绍的内容是关于HTML5中标签和常用规则有哪些?html5标签以及规则的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1. 命名规则 [强制]class:必须单 ...
html中mark标记,html5 mark标签是什么意思?html5 mark标签的作用又是什么？
本篇文章为大家介绍的是html5中的mark标签,文中介绍了包括html5 mark标签中的定义和使用的一些说明,还有,关于html5 mark标签的一些作用和实例代码,mark标签使用简单,就是使文 ...
在html5中空标签可以不写,HTML5中标签之间尽量不要加enter或者空格
HTM友,记基开前不接些前家我告对猿果水使钮控L5中如果标签之间随意使用换行或者空格可能会出现意向不朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随到的bug. 具体实例: 写 ...

html video标签播放直播视频,HTML5 Video 标签播放及控制视频

html video标签播放直播视频,HTML5 Video 标签播放及控制视频相关推荐

最新文章

热门文章