当前位置:Gxlcms > html代码 > 教你如何使用好HTML5的音频和视频

教你如何使用好HTML5的音频和视频

时间:2021-07-01 10:21:17 帮助过:20人阅读

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

嵌入媒体EDIT

在HTML中嵌入媒体:

<video src="http://v2v.cc/~j/theora_testsuite/320x240.ogg" controls>  你的浏览器不支持 <code>video</code> 标签.</video>

这个例子展示了一个带有回放控制器的可播放视频,视频来源于Theora网站。

下面是一个将音频嵌入到HTML文档的例子。

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

src属性可以设置为一个音频文件的URL或者本地文件的路径。

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

这个例子的代码中使用了HTML的“audio”元素的一些属性:

controls : 为网页中的音频显示标准的HTML5控制器。

autoplay : 使音频自动播放。

loop : 使音频自动重复播放。

<audio src="audio.mp3" preload="auto" controls></audio>

preload属性用来缓冲audio元素的大文件,有三个属性值可供设置:

"none" 不缓冲文件

"auto" 缓冲音频文件

"metadata" 仅仅缓冲文件的元数据

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

<video controls>
  <source src="foo.ogg" type="video/ogg">
  <source src="foo.mp4" type="video/mp4">
  Your browser does not support the <code>video</code> element.</video>

当浏览器支持Ogg格式的时候, 该代码会播放Ogg文件。 如果浏览器不支持Ogg,浏览器会播放MPEG-4 file。参见列表 audio和video元素支持的媒体格式 来查看不同浏览器对视频音频编码格式的支持情况。

你也可以指定视频文件需要的视频编解码器的值;这样允许浏览器做出更加正确的决定:

<video controls>
  <source src="foo.ogg" type="video/ogg; codecs=
dir
ac, speex">
  Your browser does not support the <code>video</code> element.</video>

在这里,我们指定video标签使用Dirac和Speex的视频编解码器。如果浏览器支持Ogg,但是不支持指定的编解码器,则视频不会被加载。

如果类型属性没有被指定,媒体类型将返回至服务器然后检查浏览器是否可以解决;如果不能被执行,就检查下一个来源。如果没有任何一个指定的来源元素可以使用,则分派一个错误事件给video标签。如果指定了类型属性,那么将会与浏览器能够播放的类型做对比,如果其没有被识别,甚至不会被向服务器发出询问;相反,下一个来源会被同时检查。

点击 媒体事件 来查看完整的媒体回放事件列表。要查看不同浏览器支持的媒体格式的详细信息, 点击 Media formats supported by the audio and video elements.

媒体回放控制EDIT

当你已经用新的元素将媒体嵌入 HTML 文档以后,你就可以用 JavaScript 代码 采用编程的方式来控制它们。比如说,如果你想(重新)开始播放,可以写如下的代码:

var v = document.getElementsByTagName("video")[0];v.play();

头一行是取得当前文档中第一个视频元素,下一行调用了该元素的 play() 方法, 这一方法在实现媒体元素的接口中定义。

控制一个 HTML5 音频播放器的播放、暂停、增减音量等则直接了当:

<audio id="demo" src="audio.mp3"></audio><p>
  <button 
onclick
="document.getElementById('demo').play()">播放声音</button>
  <button onclick="document.getElementById('demo').pause()">暂停声音</button>
  <button onclick="document.getElementById('demo').volume+=0.1">提高音量</button>
  <button onclick="document.getElementById('demo').volume-=0.1">降低音量</button></p>

终止媒体下载EDIT

停止媒体播放很简单,只要调用 pause() 方法即可,然而浏览器还会继续下载媒体直至媒体元素被垃圾回收机制回收。

以下是即刻停止媒体下载的方法:

var mediaElement = document.getElementById("myMediaElementID");
mediaElement.pause();
mediaElement.src='';
//or
mediaElement.removeAttribute("src");

通过移除媒体元素的 src 属性(或者直接将其设为一个空字符串——这取决于具体浏览器), 你可以摧毁该元素的内部解码,从而结束媒体下载。removeAttribute() 操作并不干净, 而将<video>元素的 'src' 属性设为空字符串可能会引起我们不想要的请求(Mozilla Firefox 22)。

在媒体中查找EDIT

媒体元素支持在媒体的内容中从当前播放位置移到某个特定点。 这是通过设置元素的属性currentTime的值来达成的;有关元素属性的详细信息请看HTMLMediaElement 。 简单的设置那个你希望继续播放的以秒为单位时间值。

你可以使用元素的属性seekable来决定媒体目前能查找的范围。它返回一个你可以查找的TimeRanges 时间对象。

var mediaElement = document.getElementById('mediaElementID');
mediaElement.seekable.start();
  // 返回开始时间
   (in seconds)mediaElement.seekable.end();
    // 返回结束时间 (in seconds)mediaElement.currentTime = 122;
     // 设定在 122 secondsmediaElement.played.end();
      // 返回浏览器播放的秒数

标记播放范围EDIT

在给一个<audio>或者<video>元素标签指定媒体的URI的时候,你可以选择性地加入一些额外信息来指定媒体将要播放的部分。要这样做的话,需要附加一个哈希标志("#"),后面跟着媒体片段的描述。

一条指定时间范围的语句:

#t=[starttime][,endtime]

时间值可以被指定为秒数(如浮点数)或者为以冒号分隔时/分/秒格式(像2小时5分钟1秒表示为2:05:01)。

【相关推荐】

1. html/css免费视频教程

2. 教你如何增强H5中video标签在浏览器中的兼容性

3. 详解HTML5展示视频的标准

4. 简述<video>标签的参数和属性

5. 分析H5网页中video标签中的MP4视频无法播放的缘由

以上就是教你如何使用好HTML5的音频和视频的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行