一直以来网页大多是使用 flash 来播放视频。在目前唱衰 flash 的环境下,HTML5 为我们带来了一个网页内视频播放的解决方案—— <video>标签。

在HTML5 中,可以通过HTML标签“audio”和“video”来支持嵌入式的媒体,使开发者能够方便地将媒体嵌入到HTML文档中。

视频格式

当前,video 元素支持三种视频格式:

  • Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
  • MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
  • WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件

嵌入媒体

html5嵌入媒体就和使用 <img> 标签嵌入图片一样简单,你只需要一个 <video> 标签就可以:

<video src="../video/2.ogg" controls>
</video>

src 属性来指定想要播放的视频文件,controls 属性可以显示视频播放控件(默认不显示)。

可以在 <video> 标签中设置内容,这些内容将在浏览器不支持 <video> 时展示:

<audio src="audio.ogg" controls autoplay loop>
<p>你的浏览器不支持video标签</p>
</audio>

播放属性

video 标签中可以设置一些属性来对播放器进行简单的控制。

比如规定播放器大小为640px * 480px:

<video src="../video/2.ogg" height="480" width="640" controls>
<p>你的浏览器不支持video标签</p>
</video>

height 和 width 属性的单位都是 pixels, 即像素。如果设置这些属性,在页面加载时会为视频预留出空间。如果没有设置这些属性,那么浏览器就无法预先确定视频的尺寸,这样就无法为视频保留合适的空间。结果是,在页面加载的过程中,其布局也会产生变化。

再比如下面这个例子:

<video src="../video/2.ogg" height="480" width="640" autoplay loop muted controls>
<p>你的浏览器不支持video标签</p>
</video>

这个例子中又增加了三个属性:
autoplay 属性可以让视频在准备完毕后自动播放;
loop 属性规定视屏循环播放,即播放完毕后再次从头开始播放; muted 属性让视频播放时默认是静音状态

接下来再看一个例子:

<video src="../video/2.ogg" height="480" width="640" preloader="auto" poster="../video/show.png" controls>
<p>你的浏览器不支持video标签</p>
</video>

这里出现两个属性: preloader 告诉了视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。 preloader 有三个属性值可设置:

  • "none" 不缓冲文件
  • "auto" 缓冲音频文件
  • "metadata" 仅仅缓冲文件的元数据 poster 则设定了视频的展示图像,包括播放前的展示图像和下载的展示图像;如果未设定此属性,一般情况下播放前视频区是黑色的。

上面三个例子包含了html5 <video> 标签到目前新增的所有属性,整理如下:

  • height 播放器高度
  • width 播放器宽度
  • autoplay 视频准备完毕后自动播放
  • controls 显示包含“播放”、“进度条”、“全屏”等操作组件的播放控件
  • loop 设定视频循环播放
  • muted 静音播放视频
  • preload 视频在页面加载时进行加载,并预备播放。如果使用 "autoplay",则忽略该属性。
  • poster 视频展示的图像,即视频播放前或下载时展示的图像

<source> 标签

可以在 <video> 标签内使用 <source> 标签来指定多个播放文件,来为不同的浏览器提供可支持的编码格式。例如:

<video controls>
<source src="../video/2.ogg" type="video/ogg">
<source src="../video/2.mp4" type="video/mp4">
<p>你的浏览器不支持video标签</p>
</video>

浏览器会先加载 2.ogg, 如果不支持ogg格式或视频不存在,则会加载2.MP4,以此类推。

<source> 标签里,需要通过 src 来指定文件,通过 type 属性来指定文件格式。

<track> 标签

想要指定字幕文件,可以使用 <track> 标签;track 使用方式与 source 相同。

<video controls>
<source src="../video/2.ogg" type="video/ogg">
<source src="../video/2.mp4" type="video/mp4">
<track kind="captions" src="sampleCaptions.vtt" srclang="en">
<track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
<track kind="chapters" src="sampleChapters.vtt" srclang="en"> <p>你的浏览器不支持video标签</p>
</video>

<track> 标签可以用于规定字幕文件或其他包含文本的文件。

<track> 标签属性包括:

  • src 源文件
  • kind 指定文件的使用目的,默认值为 subtitles ,可选值包括:
    • subtitles 定义此文件是字幕文件,就是大家熟悉的视频底部字幕了
    • captions 将在播放器中显示的简短说明
    • descriptions 视频内容的文本描述,适用于盲人或者视频不可见时的提供的音频描述。
    • chapters 定义章节,用于导航媒介资源
    • metadata 提供给脚本使用的内容,对用户不可见
  • label 为字幕文件指定一个名字,以供浏览器使用;当浏览器需要列出可用的字幕文件时,会使用此名字。
  • srclang 轨道的语言,若、当 kind 属性值为 "subtitles"时,该属性是必需的

虽然 <track> 标签为 video 提供了丰富的文本内容支持,但是目前浏览器对于 track 的支持率很不乐观。

以上简单介绍了HTML5中video标签的使用方法。下一篇文章计划介绍video事件相关内容。想要进行更深入的了解可以在此查看文档

使用html5进行视频播放 (二)
 
在播放视频时,经常需要对播放进行控制。这时我们就需要使用 HTML5 <video> 元素的方法、属性和事件。

暂停/播放

video 的 play()、pause() 方法分别用于实现视频的播放、暂停。

通过对 video 标签的 paused 属性进行判断,可以知道当前视频的播放状态。视频处于播放状态时,paused 为 false;处于暂停状态时, paused 为 true。

示例:

<video id="video" preloader poster="../video/show.png" height="480" width="640">
<source src="../video/trailer.MP4" type="video/mp4">
</video>
<button id="play_btn" type="button"></button>
var v = document.getElementById('video');

var playBtn = document.getElementById('play_btn');

playBtn.textContent = '>';

playBtn.addEventListener("click", function(){
if(v.paused){
v.play();
playBtn.textContent = '||';
}else{
v.pause();
playBtn.textContent = '>';
}
});

音量

通过 volume 属性可以控制播放音量。
volume 的值在 0~1 之间。

<video id="video" preloader poster="../video/show.png" height="480" width="640">
<source src="../video/trailer.MP4" type="video/mp4">
</video>
<div>
音量<button id="vol_inc_btn" type="button">+</button>
<button id="vol_dec_btn" type="button">-</button>
</div>
var v = document.getElementById('video');

var volIncBtn = document.getElementById('vol_inc_btn');
var volDecBtn = document.getElementById('vol_dec_btn'); volIncBtn.addEventListener("click", function(){
v.volume > 0.9?v.volume = 1:v.volume += 0.1;
}) volDecBtn.addEventListener("click", function(){
v.volume < 0.1?v.volume = 0:v.volume -= 0.1;
})

muted 属性表示是否静音。值为 true 时,视频被静音。

<button id="muted_btn" type="button">静音</button>
var mutedBtn = document.getElementById('muted_btn');

mutedBtn.addEventListener("click", function(){
v.muted = !v.muted;
mutedBtn.textContent = v.muted?'恢复':'静音'; })

播放时间

video 的 currentTime 属性用来获取当前播放的位置。duration 属性表示当前资源的长度。利用这两个属性,可以实现 当前时刻/总长度 格式的时间显示。

<font id="now_time" size="3"></font>/<font id="duration" size="3"></font>
var nowTime = document.getElementById('now_time');
var duration = document.getElementById('duration'); //初始值设为0
nowTime.textContent = 0;
duration.textContent = 0; //currentTime 和 duration 单位都是秒,我们写一个函数来将时间显示格式变为 mm:ss。
function parseTime(time){
time = Math.floor(time);
var _m, _s;
_m = Math.floor(time/60);
_s = time - _m*60;
if(_m<10){
_m = '0' + _m;
}
if(_s<10){
_s = '0' + _s;
}
return _m + ':' + _s
} v.addEventListener('timeupdate', function(){
nowTime.textContent = parseTime(v.currentTime);
}) v.addEventListener('loadedmetadata', function(){
console.log('loadedmetadata')
duration.textContent = parseTime(v.duration);
})

这里用到了两个事件:timeupdate 和 loadedmetadata。

timeupdate 事件在播放时间改变时触发,在这里我们监听播放时间的改变,然后同步更新显示。

loadedmetada 在成功获取资源长度时触发。

进度条

在播放器中进度条是标配,我们在这里也简单实现以下进度条功能。

<div id="progressWrap">
<div id="playProgress">
</div>
</div>
var progressWrap = document.getElementById("progressWrap");
var playProgress = document.getElementById("playProgress"); //计算当前进度条显示长度,利用前面说过的 currentTime 和 duration。
function getProgress(){
var percent = v.currentTime / v.duration;
playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";
} // 鼠标在播放条上点击时进行捕获并进行处理
function videoSeek(e){
if(v.paused || v.ended){
v.play();
}
enhanceVideoSeek(e);
}
function enhanceVideoSeek(e){
var length = e.pageX - progressWrap.offsetLeft;
var percent = length / progressWrap.offsetWidth;
playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";
v.currentTime = percent * v.duration;
} progressWrap.addEventListener('click', function(e){
videoSeek(e);
}) v.addEventListener('timeupdate', function(){
getProgress();
})

播放速度

playbackRate 属性代表当前的播放速度。正常播放速度为 1。 通过改变 playbackRate 的值,可以调整视频的播放速度。

例如我们实现一个快进功能,使播放速度在 正常/2倍/4倍 间切换:

<button id="speed_up" type="button">快进</button>
var speedUpBtn = document.getElementById('speed_up');

var _speed = 1;

speedUpBtn.addEventListener('click', function(){
changeSpeed();
}); function changeSpeed () {
_speed = _speed * 2;
if(_speed>4){
_speed = 1;
}
v.playbackRate = _speed;
speedUpBtn.textContent = _speed===1?'快进':'快进x' + _speed;
}

有了快进功能,一般还要有一个快退的功能。在这里可以用之前提到过得 currentTime 来简单实现。

<button id="back" type="button">快退</button>
var backBtn = document.getElementById('back');
var _back_speed = 1;
var _t; backBtn.addEventListener('click', function(){
_back_speed = _back_speed * 2;
if(_back_speed>4){
v.playbackRate = 1;
_back_speed = 1;
clearInterval(_t);
}else{
v.playbackRate = 0;
clearInterval(_t);
//通过计时器来不断改变当前播放位置,实现后退的功能
_t = setInterval(function(){
v.currentTime -= _back_speed * 0.1;
},100)
}
backBtn.textContent = _back_speed===1?'快退':'快退x' + _back_speed;
})

加载状态

通过事件 loadstart 和 loadeddata 可以监控资源的加载状态。

当资源开始加载时,触发 loadstart 事件。加载完毕时,触发 loadeddata 事件。如果加载失败,触发 error 事件。

<p id="load_state"></p>
var loadState = document.getElementById('load_state');

v.addEventListener('loadstart', function(){
loadState.textContent = '视频加载中。。。';
}) v.addEventListener('loadeddata', function(){
loadState.textContent = '加载完毕。';
}) v.addEventListener('error', function(){
loadState.textContent = '加载失败。';
})

全屏

现在主流浏览器基本上实现了全屏效果,但是不同浏览器实现不一样:

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C 提议
element.requestFullscreen();
document.exitFullscreen();

实现全屏效果,只需要调用这些方法即可。

<button id="fullscreen" type="button">全屏</button>
function requestFullScreen(de) {
if (de.requestFullscreen) {
de.requestFullscreen();
} else if (de.mozRequestFullScreen) {
de.mozRequestFullScreen();
} else if (de.webkitRequestFullScreen) {
de.webkitRequestFullScreen();
}
} var fullscreen = document.getElementById('fullscreen'); fullscreen.addEventListener('click', function(){
requestFullScreen(v);
})

至此基本上实现了一个简单的播放器的操控组件,包括 播放、暂停、时间显示、音量调节、进度条、快进、快退、全屏等。我们的播放器张这样:

哈哈,很粗糙,但是加上样式的话会好很多吧~

除此之外, video 还提供了很多事件在上面的例子中并没有用到,就列举在下面,需要丰富功能时可以随时查看~

完整代码ChinTeo/html5videoDemo

使用html5进行视频播放的更多相关文章

  1. html5中视频播放问题总结

    html5中视频播放问题总结 文章 1.问题一 框架? 加个标签就OK! <video id="video1" src="/video1.mp4" con ...

  2. selenium(java)处理HTML5的视频播放

    大多数浏览器使用控件(如 Flash) 来播放规频,但是,不同的浏览器需要使用不同的插件.HTML5 定义了一个新的元素<video>,,指定了一个标准的方式来嵌入电影片段.IE9+.Fi ...

  3. Selenium(十二):操作Cookie、调用JavaScript、HTML5的视频播放

    1. 操作Cookie 有时候我们想要验证浏览器中cookie是否正确,因为基于真实cookie的测试是无法通过白盒和集成测试的.WebDriver提供了操作Cookie的相关方法,可以读取.添加和删 ...

  4. Selenium 2自动化测试实战22(处理HTML5的视频播放)

    一.处理HTML5的视频播放 大多数浏览器使用控件(如Flash)来播放视频,但是,不同的浏览器需要使用不同的插件.HTML5定义了一个新的元素<video>,指定了一个标准的方式来嵌入电 ...

  5. 移动端HTML5<video>视频播放优化实践

    遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达 ...

  6. 移动端HTML5<video>视频播放优化实践[转]

    http://blog.csdn.net/u010918416/article/details/52705732 http://www.xuanfengge.com/html5-video-play. ...

  7. Chrome/Chromium HTML5 video 视频播放硬件加速

    Chromium站点上有个大致的框图.描写叙述了Chromium的video在各个平台 - 包含Android - 上是怎样使用硬件资源来做视频编解码加速的: 而依据Android Kitkat上的C ...

  8. HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速

    Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...

  9. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

随机推荐

  1. jenkins的安装与使用

    以前用过hudson,前段时间听以前同事说,他现在搞jenkins,zookeeper...,现在的项目 也是手动的,所以我也就搞了一个jenkins.期间也遇到好多问题,主要是自己水平不够,网上的都 ...

  2. 【CF1238E】Keyboard Purchase(状压DP,贡献)

    题意:有m种小写字符,给定一个长为n的序列,定义编辑距离为序列中相邻两个字母位置差的绝对值之和,其中字母位置是一个1到m的排列 安排一种方案,求编辑距离最小 n<=1e5,m<=20 思路 ...

  3. window安装nginx

    下载安装 到nginx官网上下载相应的安装包,http://nginx.org/en/download.html: 下载进行解压,将解压后的文件放到自己心仪的目录下,我的解压文件放在了d盘根目录下,如 ...

  4. GET and POST

    有待补充:

  5. 伪造请求头向url传递参数爬取百度默认翻译

    from urllib import request,parse import json # 翻译函数 def fanyi(msg): #参数封装 data = { "kw": c ...

  6. 深入研究浏览器对HTML解析过程

    HTML HTML解析 HTML解析是一个将字节转化为字符,字符解析为标记,标记生成节点,节点构建树的过程. 标记化算法 是词法分析过程,将输入内容解析成多个标记.HTML标记包括起始标记.结束标记. ...

  7. 46-python基础-python3-字符串-常用字符串方法(四)-join()-split()

    5-字符串方法 join()和 split() 1-join()方法 将字符串列表连接成一个单独的字符串. join()方法在一个字符串上调用,参数是一个字符串列表,返回一个字符串. 请注意,调用 j ...

  8. Python运行出现:ModuleNotFoundError: No module named 'logbook',解决办法

    ModuleNotFoundError: No module named 'xlrd' ModuleNotFoundError: No module named 'xlwt' AttributeErr ...

  9. Java面试宝典(4)Java基础部分

    71.说出一些常用的类,包,接口,请各举5个 要让人家感觉你对java ee开发很熟,所以,不能仅仅只列core java中的那些东西,要多列你在做ssh项目中涉及的那些东西.就写你最近写的那些程序中 ...

  10. Educational Codeforces Round 33 D. Credit Card

    Credit Card time limit per test2 seconds memory limit per test256 megabytes Recenlty Luba got a cred ...