浏览器原生支持音视频无疑是一件大事——尤其对移动设备而言。不依赖Flash,意味着更加省电、安全和快速的播放体验,而且只需要引入一个标签,就能播放自如。

<video src="daomei.mp4" autoplay controls></video>

仅仅一行代码,就可以实现一个带控件(controls 属性) 的视频播放器。如下图所示。

如果浏览器不支持video元素,我们可以在video标签中嵌入提示文字来实现fallback。

<video src="daomei.mp4" autoplay controls>
你的浏览器不支持<code>video</code>元素,是时候升级了!
</video>

音频播放也是类似的:

<audio src="单车.mp3" controls autoplay>
<p>没有声音,再好的戏也出不来。</p>
</audio> 

指定 autoplay 属性可以使视频在加载页面的时候自动播放,loop 属性则可以让其循环播放:

<video src="daomei.mp4" autoplay controls loop></video>

poster 属性可以为视频指定一张海报(播放前会显示它):

<video src="daomei.mp4" controls loop poster="1.png"></video>

对于较大的文件还可以指定 preload 属性进行预载入:

<audio src="单车.mp3" controls perload="auto"></audio>

preload 可以从三个值中指定。

  1. none:不缓冲此文件。

  2. auto:缓冲整个媒体文件。

  3. metadata:只缓冲部分元数据(比如该媒体的时长)。

* 由于不同浏览器支持的文件格式不同,HTML5提供了 source 元素让我们可以提供多种格式编码的文件以兼容这些浏览器:

<video controls autoplay>
<source src="daomei.ogg" type="video/ogg"></source>
<source src="daomei.mp4" type="video/mp4"></source>
<source src="daomei.webm" type="video/webm"></source>
你的浏览器不支持<code>video</code>元素,是时候升级了!
</video> 

上面的代码在支持ogg格式的浏览器里会直接播放daomei.ogg文件,如果不支持ogg,浏览器会依次检测MP4和webm格式的支持情况。这里需要注意的是,浏览器会根据type里的MIME值和服务器最终返回的值来判断文件是否可以播放,src里的文件扩展名并不是判断格式的依据。

^_^ 当然除了标签本身提供的这些功能之外,我们还可以使用JavaScript更加细致地控制媒体文件,比如 play 和 pause 方法可以控制媒体的播放与暂停:

var oVideo=document.querySelector('video');
oVideo.play();
setTimeout(function(){
oVideo.pause();
},2000);

当然我们可以写一个简单的MP3播放器,以控制播放/暂停以及控制声音大小:

<audio src="单车.mp3"></audio><br/>
<input type="button" value="播放" onclick="document.querySelector('audio').play();"/>
<input type="button" value="暂停" onclick="document.querySelector('audio').pause();"/>
<input type="button" value="加音量" onclick="document.querySelector('audio').volume+=0.1;"/>
<input type="button" value="减音量" onclick="document.querySelector('audio').volume-=0.1;"/>

在这里我们需要注意的就是HTML5提供了暂停接口却并没有提供给我们停止的接口,而且即便是暂停后浏览器依然会继续下载媒体文件。如果想提供停止功能,简单的做法就是将 src 属性设置为空:

var oVideo=document.querySelector('video');
oVideo.play();
setTimeout(function(){
oVideo.pause();
oVideo.src='';
},2000);

媒体元素( video / audio )本身还提供了非常强大的控制功能,我们还可以控制播放的进度:

var oVideo=document.querySelector('video');
oVideo.seekable.start(0); //返回开始时间 (单位为秒,通常都会返回0);
oVideo.seekable.end(0); //返回结束时间,通常是媒体文件的时长;
oVideo.currentTime; //返回当前播放到多少时间;
oVideo.currentTime=122; //跳转到第122秒;
oVideo.played.end(0); //返回浏览器已经播放了多长时间;
oVideo.buffered.end(0); //返回浏览器已经缓冲了多长时间;
oVideo.muted=true; //静音;
oVideo.volume=1; //将音量调至最大;

媒体元素上的seekableplayedbuffered 属性都是一个 TimeRanges 类型的对象,表示一个时间范围,我们可以通过访问它的 startend 方法来确定开始和结束的时间。currentTime

表示当前时间,它是可读可写的值。一个媒体的开始时间和结束时间通常是固定的。但是我们也可以通过 hash mark(#)的方式来设置,语法是:

<video src="daomei.mp4#t=100,200" autoplay controls></video>

这样视频将自动从第100秒开始播放,并在200秒时停止。时间设置也可以是冒号分割的形式,诸如1:04:00。

<video src="daomei.mp4#t=1:04:00" autoplay controls></video>

注意: 在Android或IOS设备上,HTML5视频元素将会调用设备内置的播放器来播放音视频,定制的播放器外观将失去效果,所以不必纠结。

vedeo与audio标签的使用的更多相关文章

  1. HTML5的Audio标签打造WEB音频播放器

    目前,WEB页面上没有标准的方式来播放音频文件,大多数的音频文件是使用插件来播放,而众多浏览器都使用了不同的插件.而HTML5的到来,给我们提供了一个标准的方式来播放WEB中的音频文件,用户不再为浏览 ...

  2. 论HTML5 Audio 标签歌词同步的实现

    HTML5草案里面其实有原生的字幕标签(<track> Tag)的,但使用的是vtt格式的文件,非常规的字幕(.sub, .srt)或歌词文件(.lrc). 用法如下(代码来自W3Scho ...

  3. 关于HTML5音频——audio标签和Web Audio API各平台浏览器的支持情况

    对比audio标签 和 Web Audio API 各平台浏览器的支持情况:   audio element Web Audio API desktop browsers Chrome 14 Yes  ...

  4. 使用audio标签播放音频文件

    HTML5定义了一个新的元素用来指定标准的方式来插入音频文件到web页面中:<audio>标签.使用audio标签可以控制音频的播放与停止,循环播放与播放次数设置,以及播放位置等等. 例如 ...

  5. H5页面实现一个Audio标签加载多个音频文件,并进行播放和展示音频长度

    最近微信项目中有需求,要将微信端发送过来的amr格式的语音文件,在项目中的页面上进行展示和播放,实现方式如下: 1.首先java后台收到微信端的消息推送的时候,使用 ffmpeg将amr格式的音频文件 ...

  6. <video>和<audio>标签

    一.<video>基本格式: <video width=" " heigh="" src=""> </vide ...

  7. HTML5 <Audio/>标签Api整理(二)

    1.实例2: 相对较完整 Html代码: <style> #volumeSlider .slider-selection { background:#bababa; } </styl ...

  8. HTML5 <Audio>标签API整理(一)

    简单实例: <audio id="myAudio"></audio> <script> var myAudio = document.getEl ...

  9. 关于HTML5中audio标签在手机中的autoplay

    这个问题是我最头疼的: 问题描述:在开发手机网页的时候,苹果和三星的一些浏览器不能自动开始播放 解决办法:在这个页面上弹出一个层来触发audio标签的play()方法,或者你还可以 谷歌一下----& ...

随机推荐

  1. spoj 2319 BIGSEQ - Sequence

    You are given the sequence of all K-digit binary numbers: 0, 1,..., 2K-1. You need to fully partitio ...

  2. C# IOCP服务器

    C# IOCP服务器 @by  群63438968 这是我写的unity 网络斗地主的服务器源码,本来我想只公开部份服务端代码的,但是为了回报大家的热情,以及曾经和现在的好兄弟,我计划慢慢开源! 告诉 ...

  3. Unity3D批处理脚本

    Unity3D批处理脚本 本文属于转载,如有侵权,请留言,我会及时删除! Max09在模型到处的模型和U3D场景的尺寸不一致,Max09中的1m导到U3D中,只有0.01m,这时可以在U3D中将模型的 ...

  4. codeforces Toy Sum

    题意:给你x个集合的数,然后根据求y集合的数. 思路:根据对称性,先找出对称出现的个数cnt,然后对称位置的中如果出现一个的把另一个加入到y集合中,再找出cnt个对应位置都不出现的加入到y集合中. # ...

  5. memcached采用的网络模型

    memcached采用的网络模型是早前提到的半同步半异步的网络模型. 简 单的说,大致流程就是:主线程负责接收新的连接,接收到新的连接之后,选择一个worker副线程,将该新连接push到副线程的连接 ...

  6. keil MDK启动文件分析---基于LPC2100系列(其实都是相通的)

    转用MDK有一段时间了,越来越觉得MDK的强大,因为我之前都是用ADS1.2开发产品,所以更能体会到MDK的强大与易用性.MDK编译出来的代码与ADS1.2相比,代码量减少了很多,我的一个工程用ADS ...

  7. VS2015开发的Office Addin部署,安装时报错:无法解析属性“type”的值。

    用VS2012开发的Outlook插件,在多数情况下安装正常,但是在某些机器上,安装时出现以下错误: 打开VSTOInstaller.exe.config文件查看,其中内容是: <?xml ve ...

  8. Request.url用法

    原文:Request.url用法 我們在開發網頁應用程式,時常需要去解析網址(Request.Url)的每個片段,進行一些判斷.例如說 "http://localhost:1897/News ...

  9. linux系统开机过程描述

    本文描述linux系统开机过程,属于个人理解范畴,如果文中表述有误请大家批评指正! 计算机开机之后,首先要加载BIOS(基本输入输出系统)信息,BIOS包含了很多重要的信息,包括CPU信息,设备启动顺 ...

  10. Hibernate 配置详解(5)

    9) hibernate.batch_fetch_style: 该配置是hibernate4.2.0新添加的,使用这个设置可以配置hibernate在做batch-fetch的时候,生成SQL的策略. ...